Skip to content

Drop editor style deps from front-end block CSS - #1428

Open
RonaldR wants to merge 1 commit into
PopupMaker:developfrom
RonaldR:patch-1
Open

Drop editor style deps from front-end block CSS#1428
RonaldR wants to merge 1 commit into
PopupMaker:developfrom
RonaldR:patch-1

Conversation

@RonaldR

@RonaldR RonaldR commented Oct 31, 2026 •
edited
Loading

Copy link
Copy Markdown

Description

popup-maker-block-library-style is the front-end style handle of the CTA Button and CTA Buttons blocks (packages/block-library/src/lib/cta-button/block.json, cta-buttons/block.json). In Assets::register_scripts() it is registered with a hard dependency on wp-block-editor:

$block_css_deps = [ 'wp-block-editor' ];

On the front end, wp-block-editor pulls in wp-components, wp-preferences and wp-theme. So every page that renders a CTA button (for example inside a popup that is loaded site-wide) also loads the block editor UI stylesheets as render-blocking CSS:

Handle File Raw Gzip
wp-block-editor css/dist/block-editor/style.min.css 121.4 KiB 16.6 KiB
wp-components css/dist/components/style.min.css 106.2 KiB 14.7 KiB
wp-preferences css/dist/preferences/style.min.css 1.0 KiB 0.4 KiB
wp-theme css/dist/theme/design-tokens.min.css 8.8 KiB 1.5 KiB
Total 237.5 KiB 33.2 KiB

(WordPress 7.1.4.) Lighthouse reports these as render-blocking and unused. Because the files live in /wp-includes/, site owners tend to blame WordPress core rather than Popup Maker, which is probably why this hasn't been reported.

The front-end block styles (style.scss of both blocks) don't reference any editor classes, so they don't need these stylesheets.

This change keeps the wp-block-editor dependency in wp-admin, so load order in the editor stays exactly as it is, and drops it on the front end:

$block_css_deps = is_admin() ? [ 'wp-block-editor' ] : [];

Related Issue: none found (searched the WordPress.org support forum and GitHub). Related: #1198 (missing block-library-style.css), which concerns the same handle.

Types of changes

Bug fix (non-breaking): front-end performance. No visual change.

How this was tested

Local test site: WordPress 7.1.4, PHP 8.3, Popup Maker 1.25.0 release build (popup-maker_1.25.0.zip) with this patch applied (it applies cleanly to both 1.25.0 and develop). One page with a CTA Buttons/CTA Button block, one page without. Tested with a minimal classic theme and with Twenty Twenty-Five, each with WordPress' default on-demand block assets and with all block assets loaded (should_load_separate_core_block_assets / should_load_block_assets_on_demand returning false).

Stylesheets in the page HTML (wp-block-editor, wp-components, wp-preferences, wp-theme):

Theme Block assets Page Before After
Classic on demand with CTA all four loaded none
Classic on demand without CTA none none
Classic all with CTA all four loaded none
Classic all without CTA all four loaded none
Twenty Twenty-Five on demand with CTA all four loaded none
Twenty Twenty-Five on demand without CTA none none
Twenty Twenty-Five all with CTA all four loaded none
Twenty Twenty-Five all without CTA all four loaded none

popup-maker-block-library-style itself still loads wherever it did before.

  • Rendering: screenshots of the CTA button and the page (Chromium via Playwright) are pixel-identical before and after in all four theme/asset combinations; the button's computed styles are identical too.
  • wp-admin: with WP_ADMIN defined, the handle is still registered with [ 'wp-block-editor' ], so the editor's dependency chain is unchanged.
  • PHPCS: the project ruleset (.phpcs.xml.dist; PHPCS 3.13.5, WPCS 3.4.1, CodeAtlantic 1.1.0, PHPCompatibilityWP 2.1.8, as pinned in composer.lock) reports no violations for classes/Controllers/Assets.php.
  • No PHP notices or warnings in debug.log.
  • Not run locally: the PHPUnit and E2E suites, and a manual check of the CTA block inside the block editor UI.

Screenshots

N/A: no visual change (verified pixel-identical, see above).

This has been tested in the following browsers

  • Chrome (Chromium, headless via Playwright)

The change is server-side (which stylesheets WordPress enqueues), so the output is the same for every browser.

Merge Checklist

  • This PR passes all automated checks (will appear once pull request is submitted)
  • My code has been tested in the latest version of WordPress. (7.1.4)
  • My code does not have any warnings from ESLint. (no JS changes)
  • My code does not have any warnings from StyleLint. (no CSS changes)
  • My code does not have any warnings from PHPCS.
  • My code follows the WordPress coding standards.
  • My code follows the accessibility standards. (no UI changes)
  • All new functions and classes have code documentation. (no new functions)

Summary by CodeRabbit

  • Bug Fixes
    • Block-style CSS now loads with the appropriate dependency in the editor, while avoiding that dependency on the front end.

@RonaldR
Drop editor style deps from front-end block CSS
2ac9519 
The CTA Button / Buttons blocks declare popup-maker-block-library-style
as their front-end "style" in block.json. Assets::register_scripts()
registers that handle with a hard dependency on wp-block-editor, which in
turn depends on wp-components and wp-preferences (and wp-theme). So every
front-end page that renders a CTA button also loads the full block editor
UI stylesheets (~30 KiB) as render-blocking CSS, none of which is used.

Keep the wp-block-editor dependency in wp-admin, where the block editor
loads those styles anyway, and register the block style without editor
dependencies on the front end.
@coderabbitai

coderabbitai Bot commented Oct 31, 2026 •
edited
Loading

Copy link
Copy Markdown

Review in Change Stack →

No actionable comments were generated in the recent review.

Recent review info
Run configuration
Commits

Reviewing files that changed from the base of the PR and between acd2dcc and 2ac9519.

Files selected for processing: 1
  • classes/Controllers/Assets.php

Included review availability: This review used your included allowance. Your plan provides up to 2 included reviews per hour; 1 remain after this review.

Walkthrough

Block-style CSS registration now uses wp-block-editor as a dependency in the admin area. On the front end, the stylesheet has no dependencies.

Changes

Block-style CSS registration

Layer / File(s) Summary
Set the dependency by context
classes/Controllers/Assets.php		 Admin registration uses wp-block-editor as a dependency. Front-end registration uses no dependencies.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Change: Bug fix

Suggested reviewers: danieliser

Merge Risk: Minimal · up to 2ac95

No actionable merge-blocking risk is established for this narrowly scoped stylesheet dependency change. Merge after normal checks.

Pre-merge checks: Passed 5
Check name Status Explanation
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed The title clearly and concisely describes the main change: removing editor stylesheet dependencies from front-end block CSS.
Docstring Coverage Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
Full details: Docstring Coverage

Explanation

Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 1 functions across 1 files.

Finishing Touches
Generate unit tests (beta)
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@RonaldR