Implementing Filter for Custom Block Styles

[jhallbachner]

As I've been implementing a theme (which has otherwise gone extremely smoothly) I've been working on setting up a process for building custom blocks that use Tailwind styles, via a plugin that will be installed alongside my _tw-derived theme on the target site. At the moment I do have it working using the strategy of just including the relevant directory in my tailwind configuration, but as the documentation mentions that approach can be a bit brittle so I'd like to do things right as much as possible.

I read the documentation here: https://underscoretw.com/docs/custom-blocks/ And I see it mentions using filters to capture the style information from these custom blocks, but from what's written here (and the one related question I found via search) I'm not quite clear how this filter integration is supposed to work here. Can someone give me a pointer on how exactly this would work? Thanks!

[gregsullivan]

Hi Josh—Thanks for posting your question!

There are a number of potential approaches here, but I'll give one that I've used in the past, and if you have any other questions or are looking for a different approach, we can discuss things further.

To show what I mean about creating a filter, let's look at the code for part of the _tw_posted_on() function:

$time_string = '<time datetime="%1$s">%2$s</time>';
if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
	$time_string = '<time datetime="%1$s">%2$s</time><time datetime="%3$s">%4$s</time>';
}

$time_string = sprintf(
	$time_string,
	esc_attr( get_the_date( DATE_W3C ) ),
	esc_html( get_the_date() ),
	esc_attr( get_the_modified_date( DATE_W3C ) ),
	esc_html( get_the_modified_date() )
);

If that code were in a separate plugin and we wanted to add a filter allowing for the HTML to be modified within the theme, we would change it like this:

$time_string = '<time datetime="%1$s">%2$s</time>';
if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
	$time_string = '<time datetime="%1$s">%2$s</time><time datetime="%3$s">%4$s</time>';
}

$time_string = sprintf(
	apply_filters( '_tw_time_markup', $time_string ),
	esc_attr( get_the_date( DATE_W3C ) ),
	esc_html( get_the_date() ),
	esc_attr( get_the_modified_date( DATE_W3C ) ),
	esc_html( get_the_modified_date() )
);

Then, in our theme, we would add something like this:

function _tw_time_markup_callback( $time_string ) {
    return '<time datetime="%1$s" class="font-bold">%2$s</time><time datetime="%3$s" class="hidden">%4$s</time>';
}
add_filter( '_tw_time_markup', '_tw_time_markup_callback' );

In this way, the font-bold and hidden classes would be picked up within your theme.

There are other potential approaches: Your filter could apply only to the classes themselves, or you could modify the HTML within $time_string using WordPress's new WP_HTML_Tag_Processor class.

This is a bit of a contrived example, but hopefully it gives you a sense of what I meant!

[jhallbachner]

Thank you! This was very helpful

[gregsullivan]

You're welcome—very happy to hear it!