Make WordPress Core

Opened 10 months ago

Last modified 3 months ago

#59510 new enhancement

Add filter for the block-template viewport meta tag

Reported by: joemaller's profile joemaller Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.4
Component: General Keywords: has-patch
Focuses: Cc:

Description

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.

Change History (4)

This ticket was mentioned in PR #5360 on WordPress/wordpress-develop by @joemaller.


10 months ago
#1

  • Keywords has-patch added

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.

@joemaller commented on PR #5360:


10 months ago
#2

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" />';
});

@colorful tones commented on PR #5360:


3 months ago
#3

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)
https://github.com/WordPress/wordpress-develop/assets/405912/fd71e813-455c-42bd-bd2e-54b66948a299 <br><span>Twenty Twenty-Four theme without custom viewport</span> https://github.com/WordPress/wordpress-develop/assets/405912/41096ab6-721d-4f44-9d3c-c574edee1a75 <br><span>Twenty Twenty-Four theme with custom viewport</span>
https://github.com/WordPress/wordpress-develop/assets/405912/be06cde4-1e30-4895-9dcc-8e4d74549e79 <br><span>Twenty-Sixteen without custom viewport</span> https://github.com/WordPress/wordpress-develop/assets/405912/5f9be352-90e6-4258-9d8c-a5e0199de47b <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! 🚀

@joemaller commented on PR #5360:


3 months ago
#4

@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.

Note: See TracTickets for help on using tickets.