Hide Additional CSS controls when block is inside contentOnly editing mode by Shekhar0109 · Pull Request #76512 · WordPress/gutenberg

Shekhar0109 · 2026-03-15T08:07:44Z

What?

Hide Additional CSS related controls when a block is rendered inside template preview (contentOnly editing mode).

Why?

When blocks are edited inside template preview, they run in contentOnly editing mode.
In this mode, controls like Additional CSS, Additional CSS Classes, and HTML Element rely on block attributes that cannot be persisted.

Currently these controls are still rendered in the Advanced panel even though their values cannot be saved. This makes the UI misleading.

How?

This PR detects when the editor is inside a content-only section using getEditedContentOnlySection.

When this mode is active, the InspectorControls.Slot for the advanced group is not rendered, preventing Additional CSS related controls from appearing.

Template Part specific controls (such as Title and Area) remain unaffected.

Testing Instructions

Open the Site Editor.
Go to Appearance → Editor → Templates → Single Posts.
Select a block like Post Title inside the template preview.
Open the Advanced panel in the block inspector.

Expected result

The following controls should not appear:

Additional CSS
Additional CSS Classes
HTML Element

Verify normal editor still works

Go to Posts → Add New.
Insert any block.
Open the Advanced panel.

The following controls should still appear:

HTML Anchor
Additional CSS Classes
Additional CSS

…ontentOnly mode)

github-actions · 2026-03-15T08:07:54Z

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: Shekhar0109 <shekh0109@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@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

Thanks for the PR!

Open the Site Editor.

Go to Appearance → Editor → Templates → Single Posts.

Select a block like Post Title inside the template preview.

Open the Advanced panel in the block inspector.

In my testing, the Advanced panel is visible and the Additional CSS field is editable. Am I missing something?

… template preview

Shekhar0109 · 2026-03-17T14:10:04Z

@t-hamano Thanks for reviewing!

I re-tested the change using the local wp-env environment.

When a block is rendered inside a template preview (contentOnly editing mode), such as blocks inside a Template Part, the Additional CSS related controls are no longer rendered in the Advanced panel.

For example, selecting Header → Site Title in the Site Editor shows only Template Part specific controls:

Title
Area
HTML Element

The following controls are no longer displayed:

Additional CSS
Additional CSS Classes
HTML Anchor

I also verified that the normal editing experience remains unchanged.
When editing blocks in the main template content, the Advanced panel still displays the standard controls such as Additional CSS and Additional CSS Classes.

Screenshots are attached showing both scenarios.

t-hamano

This approach seems to work fine in the site editor, but not in the post editor.

Wouldn't it be sufficient to just add useBlockEditingMode, as with many other block supports?

diff --git a/packages/block-editor/src/hooks/custom-css.js b/packages/block-editor/src/hooks/custom-css.js
index 5bd3347726e..096d9ba93df 100644
--- a/packages/block-editor/src/hooks/custom-css.js
+++ b/packages/block-editor/src/hooks/custom-css.js
@@ -17,6 +17,7 @@ import AdvancedPanel, {
 } from '../components/global-styles/advanced-panel';
 import { cleanEmptyObject, useStyleOverride } from './utils';
 import { store as blockEditorStore } from '../store';
+import { useBlockEditingMode } from '../components/block-editing-mode';
 
 // Stable reference for useInstanceId.
 const CUSTOM_CSS_INSTANCE_REFERENCE = {};
@@ -33,6 +34,12 @@ const EMPTY_STYLE = {};
  * @param {Object}   props.style         Block style attribute.
  */
 function CustomCSSControl( { blockName, setAttributes, style } ) {
+       const blockEditingMode = useBlockEditingMode();
+
+       if ( blockEditingMode !== 'default' ) {
+               return null;
+       }
+
        const blockType = getBlockType( blockName );
 
        function onChange( newStyle ) {

…SSControl

Shekhar0109 · 2026-03-17T15:18:08Z

@t-hamano Thanks for the suggestion!

I updated the implementation following your recommendation.

Instead of hiding the entire Advanced panel, I restored the original AdvancedControls behavior and moved the check to CustomCSSControl using useBlockEditingMode.

This ensures that the Custom CSS control is hidden when the block editing mode is not default, while keeping the Advanced panel and other controls unaffected.

Please let me know if this approach looks correct or if further adjustments are needed.

packages/block-editor/src/components/inspector-controls-tabs/advanced-controls-panel.js

t-hamano

LGTM!

t-hamano · 2026-03-18T09:08:03Z

@Shekhar0109 The reason the E2E test failed is that this pull request changed the sidebar tabs in the navigation editor.

Before

After

We should be able to fix this problem by reverting this code: https://github.com/WordPress/gutenberg/pull/73959/changes#diff-cb34a8a792e758a928744e7e7afc59c026bf81670d1fec5961398cdf8b4d7e0b

Shekhar0109 · 2026-03-18T09:12:21Z

@t-hamano Thanks for the review and approval!

I’ve pushed a follow-up fix addressing the earlier Playwright failure. It looks like the current failures are in PHP unit tests, which don’t seem directly related to this change (as this PR only modifies JavaScript in the block editor).

I’ll keep an eye on the logs, but please let me know if you’d like me to investigate further.

packages/block-editor/src/hooks/custom-css.js

Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>

Shekhar0109 · 2026-03-19T07:06:00Z

@t-hamano I’ve applied the suggested revert so the code matches the previous behavior.

Since the Playwright-6 failure appears unrelated to this change, I’ll wait for the further guidance.

t-hamano · 2026-03-19T07:08:39Z

Since the Playwright-6 failure appears unrelated to this change, I’ll wait for the further guidance.

No, the Playwright-6 failure is related to this PR. See #76512 (comment)

…stom CSS is unavailable in contentOnly mode

test/e2e/specs/site-editor/navigation-editor.spec.js

…tion editor E2E test

t-hamano · 2026-03-19T13:48:14Z

Thanks for the update! I believe all CI checks should be ✅.

t-hamano · 2026-03-20T02:11:05Z

The failing E2E test is completely unrelated to this PR. Please see the PRs below.

… mode (#76512) * Hide Additional CSS controls when block is inside template preview (contentOnly mode) * Use block editing mode to hide Additional CSS controls in contentOnly template preview * Restore AdvancedControls panel and move editing mode check to CustomCSSControl * Revert unnecessary change * Fix: restrict Custom CSS control hiding to contentOnly editing mode * Update packages/block-editor/src/hooks/custom-css.js Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> * Fix navigation editor E2E test: Settings tab should be hidden when Custom CSS is unavailable in contentOnly mode * Remove outdated comment and update Settings tab expectation in navigation editor E2E test --------- Co-authored-by: Shekhar0109 <shekh0109@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>

github-actions · 2026-03-20T02:13:38Z

I just cherry-picked this PR to the wp/7.0 branch to get it included in the next release: fddf7db

This updates the pinned hash from the `gutenberg` from `487a096a9782ba6110a7686d7b4b2d0c55ed1b06` to `2ee7ede6be6d4e55d5c7047394c5c4e0ea8d521d`. The following changes are included: - RTC: Backport race condition fix (WordPress/gutenberg#76649) - Fix navigation block rendering unit test (WordPress/gutenberg#76685) - Hide Additional CSS controls when block is inside contentOnly editing mode (WordPress/gutenberg#76512) - RTC: Increase polling intervals, increase polling on primary room only (WordPress/gutenberg#76704) - Navigation: Avoid List View changing position when navigation block saves (WordPress/gutenberg#76659) - Fix navigation block unit test and e2e test (WordPress/gutenberg#76692) - Fix locked content when switching to a different template without exiting 'Edit pattern' (WordPress/gutenberg#76710) - Metabox: Fix checkbox style in sidebar (WordPress/gutenberg#76718) - Stop keeping stale controlled blocks after reset (WordPress/gutenberg#76591) - Gate client-side media processing as plugin-only (WordPress/gutenberg#76700) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/487a096a9782ba6110a7686d7b4b2d0c55ed1b06…2ee7ede6be6d4e55d5c7047394c5c4e0ea8d521d. Log created with: git log --reverse --format="- %s" 487a096a9782ba6110a7686d7b4b2d0c55ed1b06..2ee7ede6be6d4e55d5c7047394c5c4e0ea8d521d | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. git-svn-id: https://develop.svn.wordpress.org/trunk@62076 602fd350-edb4-49c9-b593-d223f7449a82

This updates the pinned hash from the `gutenberg` from `487a096a9782ba6110a7686d7b4b2d0c55ed1b06` to `2ee7ede6be6d4e55d5c7047394c5c4e0ea8d521d`. The following changes are included: - RTC: Backport race condition fix (WordPress/gutenberg#76649) - Fix navigation block rendering unit test (WordPress/gutenberg#76685) - Hide Additional CSS controls when block is inside contentOnly editing mode (WordPress/gutenberg#76512) - RTC: Increase polling intervals, increase polling on primary room only (WordPress/gutenberg#76704) - Navigation: Avoid List View changing position when navigation block saves (WordPress/gutenberg#76659) - Fix navigation block unit test and e2e test (WordPress/gutenberg#76692) - Fix locked content when switching to a different template without exiting 'Edit pattern' (WordPress/gutenberg#76710) - Metabox: Fix checkbox style in sidebar (WordPress/gutenberg#76718) - Stop keeping stale controlled blocks after reset (WordPress/gutenberg#76591) - Gate client-side media processing as plugin-only (WordPress/gutenberg#76700) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/487a096a9782ba6110a7686d7b4b2d0c55ed1b06…2ee7ede6be6d4e55d5c7047394c5c4e0ea8d521d. Log created with: git log --reverse --format="- %s" 487a096a9782ba6110a7686d7b4b2d0c55ed1b06..2ee7ede6be6d4e55d5c7047394c5c4e0ea8d521d | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. Built from https://develop.svn.wordpress.org/trunk@62076 git-svn-id: http://core.svn.wordpress.org/trunk@61358 1a063a9b-81f0-0310-95a4-ce76da25c4cd

Hide Additional CSS controls when block is inside template preview (c…

a2090be

…ontentOnly mode)

Shekhar0109 requested a review from ellatrix as a code owner March 15, 2026 08:07

github-actions bot added the [Package] Block editor /packages/block-editor label Mar 15, 2026

t-hamano added [Type] Bug An existing feature does not function as intended [Feature] Block API API that allows to express the block paradigm. [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Mar 17, 2026

t-hamano reviewed Mar 17, 2026

View reviewed changes

t-hamano added this to WordPress 7.0 Editor Tasks Mar 17, 2026

github-project-automation bot moved this to 🔎 Needs Review in WordPress 7.0 Editor Tasks Mar 17, 2026

Use block editing mode to hide Additional CSS controls in contentOnly…

be2b5fd

… template preview

Shekhar0109 requested a review from t-hamano March 17, 2026 14:12

t-hamano reviewed Mar 17, 2026

View reviewed changes

Restore AdvancedControls panel and move editing mode check to CustomC…

adc4e0b

…SSControl

Shekhar0109 requested a review from tellthemachines as a code owner March 17, 2026 15:08

Shekhar0109 requested a review from t-hamano March 17, 2026 15:18

t-hamano reviewed Mar 18, 2026

View reviewed changes

packages/block-editor/src/components/inspector-controls-tabs/advanced-controls-panel.js Outdated Show resolved Hide resolved

Revert unnecessary change

a18d4de

t-hamano changed the title ~~Hide Additional CSS controls when block is inside template preview (c…~~ Hide Additional CSS controls when block is inside template preview Mar 18, 2026

t-hamano changed the title ~~Hide Additional CSS controls when block is inside template preview~~ Hide Additional CSS controls when block is inside contentOnly editing mode Mar 18, 2026

t-hamano approved these changes Mar 18, 2026

View reviewed changes

t-hamano added the Backport to WP 7.0 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Mar 18, 2026

t-hamano and others added 2 commits March 18, 2026 16:48

Merge branch 'trunk' into fix/76429-hide-advanced-controls

2af53a0

Fix: restrict Custom CSS control hiding to contentOnly editing mode

a1b90ff

t-hamano reviewed Mar 18, 2026

View reviewed changes

packages/block-editor/src/hooks/custom-css.js Outdated Show resolved Hide resolved

Update packages/block-editor/src/hooks/custom-css.js

12b2bda

Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>

Fix navigation editor E2E test: Settings tab should be hidden when Cu…

edb8944

…stom CSS is unavailable in contentOnly mode

t-hamano reviewed Mar 19, 2026

View reviewed changes

test/e2e/specs/site-editor/navigation-editor.spec.js Outdated Show resolved Hide resolved

Remove outdated comment and update Settings tab expectation in naviga…

3140270

…tion editor E2E test

t-hamano merged commit c24aeab into WordPress:trunk Mar 20, 2026
64 of 69 checks passed

github-project-automation bot moved this from 🔎 Needs Review to ✅ Done in WordPress 7.0 Editor Tasks Mar 20, 2026

github-actions bot added this to the Gutenberg 22.9 milestone Mar 20, 2026

github-actions bot removed the Backport to WP 7.0 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Mar 20, 2026

github-actions bot added the Backported to WP Core Pull request that has been successfully merged into WP Core label Mar 20, 2026

Shekhar0109 deleted the fix/76429-hide-advanced-controls branch March 20, 2026 07:40

Conversation

Shekhar0109 commented Mar 15, 2026

What?

Why?

How?

Testing Instructions

Expected result

Verify normal editor still works

Uh oh!

github-actions bot commented Mar 15, 2026

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

Shekhar0109 commented Mar 17, 2026

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

Shekhar0109 commented Mar 17, 2026

Uh oh!

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

t-hamano commented Mar 18, 2026

Before

After

Uh oh!

Shekhar0109 commented Mar 18, 2026

Uh oh!

Uh oh!

Shekhar0109 commented Mar 19, 2026

Uh oh!

t-hamano commented Mar 19, 2026

Uh oh!

Uh oh!

t-hamano commented Mar 19, 2026

Uh oh!

t-hamano commented Mar 20, 2026

Uh oh!

Uh oh!

github-actions bot commented Mar 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants