Supported generic styles
All the generic WordPress block styling options listed below are supported by @wp-block-tools/styles
.
Note that if a style is not supported you can easily implement it yourself by referring to the relevant block attribute for that style.
Layout
Inner blocks fill width of container
![Layout full width](/_astro/layout-full-width.5d1f2e9a_4iHd8.webp)
Inner blocks custom content
and wide
widths
![Layout restricted width](/_astro/layout-restricted-width.e34bd122_Z29AXoc.webp)
Justify items left - Justify items center - Justify items right - Space between items
![Block justification](/_astro/block-justification.fdac6317_Z1Asfr6.webp)
Orientation horizontal - Orientation vertical
![Block orientation](/_astro/block-orientation.ef4c34a0_1brLGF.webp)
Allow to wrap multiple lines
![Allow wrap](/_astro/allow-wrap.466fc0cc_Z127hOp.webp)
Color
- Background (solid + gradient)
- Text
- Link (default + hover) (added in
@wp-block-tools/styles@1.3.0
) - Heading, H1, H3, H3, H4, H5, H6 (text + background + gradient) (added in
@wp-block-tools/styles@1.4.0
) - Button (text + background + gradient) (added in
@wp-block-tools/styles@1.5.5
andWPGraphQL Blocks 2.0.2
)
Typography
- Size
- Appearance
- Line height
- Letter spacing
- Decoration
- Letter case
- Drop cap (added in
@wp-block-tools/styles@1.5.1
)
Dimensions
- Padding
- Margin
- Block spacing
Border
- Border
- Radius
- Color
- Style
Block align
None (Content) - Wide - Full
![Layout full width](/_astro/align-width.8524a6d0_Edsdf.webp)
Block vertical alignment
Align top - Align middle - Align bottom - Stretch to fill
![Block vertical alignment](/_astro/vertical-alignment.6dccf5c7_1z9FjN.webp)
Position
Default, Sticky
![Position](/_astro/position.1896534b_25FWxA.webp)