Skip to content

wp-build: Render the no-JS fallback in the generated page templates - #81365

Merged
t-hamano merged 3 commits into
trunkfrom
fix/no-js-fallback-in-generated-page-templates
Aug 11, 2026
Merged

wp-build: Render the no-JS fallback in the generated page templates#81365
t-hamano merged 3 commits into
trunkfrom
fix/no-js-fallback-in-generated-page-templates

Conversation

@t-hamano

@t-hamano t-hamano commented Aug 9, 2026

Copy link
Copy Markdown
Contributor

What?

Renders the heading and the "requires JavaScript" notice from the generated page templates, so every wp-build page gets the no-JS fallback automatically.

Why?

Trac #65690 added the notice to the Connectors and Font Library pages individually. More wp-build based pages will be added over time, and each one would have to repeat the same markup. Defining it in the template itself removes that duplication.

How?

Both page templates now render a .wrap.hide-if-js block with the page heading and an error notice, right before the app mount point.

page.php.template needed one extra fix. It only ports the <head> part of admin-header.php, so <body> never received the no-js class or the script that swaps it for js. Without them .hide-if-js and .hide-if-no-js never worked on those pages.

No text domain is passed. These files are bundled into Core, where the default domain is correct. Strings in that directory are extracted: wp-includes/build/ already has 110 translatable strings on GlotPress.

Testing Instructions

  1. Disable JavaScript in your browser.
  2. Go to Appearance → Fonts and Settings → Connectors. Each shows a heading and an error notice instead of a blank page.
  3. Re-enable JavaScript and reload. The fallback is gone and the app renders as before.

Screenshots or screencast

Before

image

After

image

Use of AI Tools

Authored with Claude Code. The code, this description, and the GlotPress and Core references above were produced by the tool and reviewed by me.

@t-hamano
t-hamano force-pushed the fix/no-js-fallback-in-generated-page-templates branch from bcff325 to b5c19f4 Compare August 9, 2026 11:38
<?php
// END see wp-admin/admin-header.php
?>
<div class="wrap hide-if-js" style="margin: 20px;">

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This page builds its own <body> instead of going through admin-header.php, so there is no #wpbody-content to supply the padding that .wrap relies on for its inline-start spacing. Without the inline margin the heading and notice sit flush against the viewport edge.

t-hamano and others added 3 commits August 9, 2026 21:02
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude <noreply@anthropic.com>
@t-hamano
t-hamano force-pushed the fix/no-js-fallback-in-generated-page-templates branch from dd6ed7e to 1fb9936 Compare August 9, 2026 12:02
@t-hamano t-hamano self-assigned this Aug 9, 2026
@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] wp-build /packages/wp-build labels Aug 9, 2026
@t-hamano
t-hamano marked this pull request as ready for review August 9, 2026 12:08
@github-actions

github-actions Bot commented Aug 9, 2026

Copy link
Copy Markdown

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.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>

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

@t-hamano
t-hamano requested a review from youknowriad August 9, 2026 12:08
@github-actions

github-actions Bot commented Aug 9, 2026

Copy link
Copy Markdown

Flaky tests detected in 1fb9936.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/31312294087
📝 Reported tests:

As a user I want to be able to create a navigation overlay for a specific navigation block in /test/e2e/specs/site-editor/navigation-overlay-template-part.spec.js, passed after 1 failed attempt.
TimeoutError: locator.click: Timeout 10000ms exceeded.
Call log:
  - waiting for getByRole('region', { name: /(Editor publish|Save panel)/ }).getByRole('button', { name: 'Save', exact: true })

    at Editor.saveSiteEditorEntities (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/editor/site-editor.ts:42:5)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/site-editor/navigation-overlay-template-part.spec.js:90:4
displays edits to the post title and content in the preview in /test/e2e/specs/editor/various/preview.spec.js, passed after 1 failed attempt.
Error: apiRequestContext.fetch: socket hang up
Call log:
  - → PUT http://localhost:8889/wp-json/wp/v2/plugins/gutenberg-test-plugins/disable-client-side-media-processing
    - user-agent: Playwright/1.62.1 (x64; ubuntu 24.04) node/20.20 CI/1
    - accept: */*
    - accept-encoding: gzip,deflate,br
    - X-WP-Nonce: f5cfd16ef0
    - content-type: application/json
    - content-length: 19
    - cookie: wordpress_test_cookie=WP%20Cookie%20check; wordpress_logged_in_23778236db82f19306f247e20a353a99=admin%7C1786450032%7CQbZig1BL4nvZnfDdnNBSnrhbaKq4CyCALex5ImkccdK%7C4a3ef9ade286266d83893c01ae587ecc454897b32cb6671bd05a85e7aca163b4; wp-settings-time-1=1786278132

    at RequestUtils.rest (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/rest.ts:112:39)
    at RequestUtils.activatePlugin (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/plugins.ts:72:13)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/preview.spec.js:279:3

@youknowriad youknowriad left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Appreciate the follow-up, this makes sense to me.

@t-hamano
t-hamano merged commit 25fc9c1 into trunk Aug 11, 2026
73 checks passed
@t-hamano
t-hamano deleted the fix/no-js-fallback-in-generated-page-templates branch August 11, 2026 02:03
@github-actions github-actions Bot added this to the Gutenberg 23.8 milestone Aug 11, 2026
shail-mehta pushed a commit that referenced this pull request Aug 12, 2026
…81365)

* wp-build: Render the no-JS fallback in the generated page templates

Co-Authored-By: Claude <noreply@anthropic.com>

* Condense the no-JS fallback changelog entries into one

Co-Authored-By: Claude <noreply@anthropic.com>

* Add the Core backport changelog entry for the no-JS fallback templates

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] wp-build /packages/wp-build [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants