Strategies for styling block content

[bkno]

Hi,

Using Tailwind with WordPress still feels well ahead the curve at present so I’m keen to discover/discuss best practices.

In particular, what do you feel is the optimal approach for using Tailwind with more complex pages? For examples ones that have sections/rows built in the block editor where the client can edit content?

I have been contemplating two broad strategies:

1. Custom ACF blocks. For example, build a Hero section block with Title, Body, Background image as custom fields the client can edit. The block template can then have all the tailwind classes carefully applied in the HTML and there is no chance of the client breaking the layout. Downside: requires ACF, can feel like we building our own versions of WP blocks.

2. Use the built-in WP blocks for sections, for example the WP Cover element for Hero sections, and use the WP Group and WP Columns block for sections. Then there are two ways we can implement Tailwind to these:

   • A) Disable WP block styles and use the @apply directive to set new styles using Tailwind - effectively overriding all the default WP block styles with Tailwind ones. Downside: using Tailwind within existing CSS classes rather than as a HTML component, WP could change HTML output in future.
   • B) Use the render_block filter to manipulate the block output and add Tailwind classes. If I am not mistaken, this is the closest way of editing a block’s “template”. I couldn’t find any info on WP block templates in the traditional sense - i.e. theme files (seems surprising!).

Option 1 (ACF) seems like a pretty good approach. I’m not really keen on both parts of Option 2 (CSS/Filters) as it just feels overly messy.

I welcome your thoughts. I’m sure there are other possibilities I have not considered.

One other simple scenario is buttons - would you try and wrestle the built-in button block to have perfect Tailwind classes or use your own. I don't believe manually setting Tailwind classes in the block editor is the way to go for robust development - it should be in code ideally.

[jeffreyvr]

Very interesting post @bkno. I run into these things myself too.

For complex blocks, I tend to use either custom dynamic blocks (server side rendered) or use a plugin like LazyBlocks which I guess is an alternative to ACF in this regard. But it doesn't feel quite right either way. Because it takes away from the WYSIWYG experience that the block editor tries to be.

Your button example, I use the block that WordPress provides out of the box. Then through theme.json I style it according to my design (and before I would use the apply directive).