Add filter for the block-template viewport meta tag

[joemaller]

The base block-template.php used for full site editing does not provide a hook for modifying the viewport meta tag. Despite being inserted into wp_head by the _block_template_viewport_meta_tag action hook, the actual tag is basically hard coded and untouchable: ​https://github.com/WordPress/wordpress-develop/blob/00ed25e2c9b20607418cbe8a6103c336d1bf92bd/src/wp-includes/block-template.php#L273-L275.

This ticket introduces a new filter which allows for customization of this meta tag.

This ticket introduces a new filter which allows for customization of the block-template's viewport meta tag.

Despite being inserted into wp_head by the _block_template_viewport_meta_tag action hook, the actual tag is basically ​hard coded and untouchable.

Without this filter, the meta tag can be changed by first removing the _block_template_viewport_meta_tag action:

add_action('pre_get_posts', function() {
    remove_action('wp_head', '_block_template_viewport_meta_tag', 0);
});

And then hooking in a new meta tag:

add_action('wp_head', function() {
        echo '<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />' . "\n";
}, 0);

With the new filter, just this:

add_filter('block_template_viewport_meta_tag', function() {
    return '<meta name="viewport" content="width=device-width" />';
});

I need help thinking of a use case for this. I'm not implying that there are not any, and I'm mostly just having a hard time. @joemaller, do you happen to recall what particular challenge you were encountering when you recommended and submitted this patch? Perhaps you were trying to work around a mobile device viewport issue? 🤔

I tested with both the Twenty Twenty-Four and Twenty-Sixteen themes by adding the following code (provided above) to the functions.php:

add_filter( 'block_template_viewport_meta_tag', function () {
	return '<meta name="viewport" content="width=500, initial-scale=0.3" />';
} );

The code had no effect on the Twenty-Sixteen theme, which is what I expected and is not the intended purpose of _block_template_viewport_meta_tag. I just wanted to verify there were no side effects on a classic theme for posterity.

Before	After (with add_filter)
<br><span>Twenty Twenty-Four theme without custom viewport</span>	<br><span>Twenty Twenty-Four theme with custom viewport</span>
<br><span>Twenty-Sixteen without custom viewport</span>	<br><span>Twenty-Sixteen with custom viewport and has no effect, because code only effect block themes 👍 </span>

Regardless, I've tested it, and it works as advertised. I'm not averse to seeing this functionality and filter being readily available for other developers. Thanks for the effort! 🚀

@colorful-tones Thanks for looking at this and for adding the screenshots.

The goal of this PR was to simplify modifications of the viewport meta tag when working with the Full Site Editing ​template-canvas. In my case, I was trying to migrating an existing site to FSE and needed to add attributes to the viewport.

Filtering the meta tag seemed like something WordPress would do anyway and something WordPress already does in many other places. I was surprised this functionality hadn't been implemented, which is why I wrote this PR.

Currently, WordPress hard-codes this common viewport tag:

This is a very common _current_ implementation, it's not the only one.

Some alternate tags currently in use:

Providing this filter will make it easier for WordPress developers to experiment with ​viewport options while remaining consistent with filtering patterns in use throughout WordPress.