Add block-template viewport meta tag filter - #5360

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)
Twenty Twenty-Four theme without custom viewport	Twenty Twenty-Four theme with custom viewport
Twenty-Sixteen without custom viewport	Twenty-Sixteen with custom viewport and has no effect, because code only effect block themes 👍

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! 🚀

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props joemaller, colorful-tones.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@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 migrate 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:

<meta name="viewport" content="width=device-width, initial-scale=1" />

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

Some alternate tags currently in use:

<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta data-rh="true" name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui"/>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2, viewport-fit=cover"/>

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.