Make WordPress Core


Ignore:
Timestamp:
01/11/2026 06:34:57 AM (8 months ago)
Author:
westonruter
Message:

Themes: Use WP_HTML_Tag_Processor to insert the block template skip link instead of JavaScript.

  • The skip link now works when JavaScript is turned off.
  • By removing the script, the amount of JavaScript sent to the client is reduced for a very marginal performance improvement.
  • A new wp-block-template-skip-link stylesheet is registered, with minification and path data for inlining.
  • The CSS for the skip link now has an RTL version generated, although it is not yet served when the styles are inlined. See #61625.
  • The wp_enqueue_block_template_skip_link() function now exclusively enqueues the stylesheet since the script is removed.
  • For backwards-compatibility, the skip link will continue to be omitted if the_block_template_skip_link() is unhooked from the wp_footer action or wp_enqueue_block_template_skip_link() is unhooked from wp_enqueue_scripts.

Developed in https://github.com/WordPress/wordpress-develop/pull/10676

Follow-up to [56932], [51003].

Props rutviksavsani, westonruter, dmsnell, whiteshadow01, Slieptsov.
See #59505, #53176.
Fixes #64361.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/tests/phpunit/tests/block-template-utils.php

    r58235 r61469  
    299299
    300300        /**
     301         * Tests that a skip link is added and a MAIN element without an ID receives the default ID.
     302         *
     303         * @ticket 64361
     304         *
     305         * @covers ::_block_template_add_skip_link
     306         */
     307        public function test_block_template_add_skip_link_inserts_link_and_adds_main_id_when_missing() {
     308                $template_html = '<div class="wp-site-blocks"><main>Content</main></div>';
     309                $expected      = '
     310                        <a class="skip-link screen-reader-text" id="wp-skip-link" href="#wp--skip-link--target">Skip to content</a>
     311                        <div class="wp-site-blocks"><main id="wp--skip-link--target">Content</main></div>
     312                ';
     313
     314                $this->assertEqualHTML( $expected, _block_template_add_skip_link( $template_html ) );
     315        }
     316
     317        /**
     318         * Tests that an existing MAIN ID is reused for the skip link.
     319         *
     320         * @ticket 64361
     321         *
     322         * @covers ::_block_template_add_skip_link
     323         */
     324        public function test_block_template_add_skip_link_uses_existing_main_id() {
     325                $template_html = '<div class="wp-site-blocks"><main id="custom-id">Content</main></div>';
     326                $expected      = '
     327                        <a class="skip-link screen-reader-text" id="wp-skip-link" href="#custom-id">Skip to content</a>
     328                        <div class="wp-site-blocks"><main id="custom-id">Content</main></div>
     329                ';
     330
     331                $this->assertEqualHTML( $expected, _block_template_add_skip_link( $template_html ) );
     332        }
     333
     334        /**
     335         * Tests that a boolean MAIN ID is treated as missing and replaced with the default.
     336         *
     337         * @ticket 64361
     338         *
     339         * @covers ::_block_template_add_skip_link
     340         */
     341        public function test_block_template_add_skip_link_handles_boolean_main_id() {
     342                $template_html = '<div class="wp-site-blocks"><main id>Content</main></div>';
     343                $expected      = '
     344                        <a class="skip-link screen-reader-text" id="wp-skip-link" href="#wp--skip-link--target">Skip to content</a>
     345                        <div class="wp-site-blocks"><main id="wp--skip-link--target">Content</main></div>
     346                ';
     347
     348                $this->assertEqualHTML( $expected, _block_template_add_skip_link( $template_html ) );
     349        }
     350
     351        /**
     352         * Tests that a MAIN ID containing whitespace is preserved and used for the skip link.
     353         *
     354         * @ticket 64361
     355         *
     356         * @covers ::_block_template_add_skip_link
     357         */
     358        public function test_block_template_add_skip_link_preserves_whitespace_main_id() {
     359                $template_html = '<div class="wp-site-blocks"><main id=" my-id ">Content</main></div>';
     360                $expected      = '
     361                        <a class="skip-link screen-reader-text" id="wp-skip-link" href="#%20my-id%20">Skip to content</a>
     362                        <div class="wp-site-blocks"><main id=" my-id ">Content</main></div>
     363                ';
     364
     365                $this->assertEqualHTML( $expected, _block_template_add_skip_link( $template_html ) );
     366        }
     367
     368        /**
     369         * Tests that no changes are made when there is no MAIN element.
     370         *
     371         * @ticket 64361
     372         *
     373         * @covers ::_block_template_add_skip_link
     374         */
     375        public function test_block_template_add_skip_link_does_not_modify_when_main_missing() {
     376                $template_html = '<div class="wp-site-blocks"><div>Content</div></div>';
     377
     378                $this->assertSame( $template_html, _block_template_add_skip_link( $template_html ) );
     379        }
     380
     381        /**
    301382         * Should retrieve the template from the theme files.
    302383         */
Note: See TracChangeset for help on using the changeset viewer.