Repository navigation
Add blockStatesEnabled setting to hide the block-level style states control - #80946
vedant-ere wants to merge 3 commits into
Conversation
…ontrol Adds a blockStatesEnabled editor setting, following the same pattern as responsiveEditingEnabled/codeEditingEnabled. When set to false via the block_editor_settings_all filter, BlockStatesControl is not rendered in the block inspector. Existing state styles and their rendering (editor canvas and frontend) are unaffected.
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @vedant-ere! In case you missed it, we'd love to have you join us in our Slack community. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
What this does
Adds a new
blockStatesEnablededitor setting that lets plugins and site owners hide the block-level Style States control in the block inspector. This is the control that lets you select a viewport or pseudo-state (such as Hover or Focus) when styling an individual block.Why
Gutenberg's Style States feature is exposed through two different UI surfaces:
BlockStatesControlin the block inspector for supported blocks (such as the Button block).Issue #80814 introduced the
responsiveEditingEnabledsetting, allowing developers to disable the global Style States UI. This is useful for plugins or themes that provide their own state-styling experience and want to opt out of the built-in interface.However, there was no equivalent setting for the per-block control. The only workaround was to target the internal CSS class (
.block-editor-global-styles-state-control) directly. Since that class is an implementation detail rather than a public API, it can change or be removed at any time, making it an unreliable solution for production use.This change closes that gap by introducing a supported
blockStatesEnabledsetting, giving the block inspector the same clean opt-out mechanism already available for the global Style States UI.Closes: #80850
How to use it
Configure the setting through the standard
block_editor_settings_allfilter:The setting defaults to
true, so existing behavior is unchanged unless it's explicitly disabled. When set tofalse,BlockStatesControlis simply not rendered in the block inspector.This setting only affects the visibility of the UI for selecting style states. It does not affect existing state data or rendering:
Implementation
The implementation follows the same pattern already used by
codeEditingEnabledandresponsiveEditingEnabled.packages/editor/src/store/defaults.jsblockStatesEnabled: trueas the default editor setting and documents it alongside the other*Enabledsettings.packages/editor/src/components/provider/use-block-editor-settings.jseditorpackage to theblock-editorpackage, following the existing pattern used forcodeEditingEnabled.packages/block-editor/src/store/defaults.jspackages/block-editor/src/components/block-inspector/index.js<BlockStatesControl />whenblockStatesEnabledisfalse.Testing instructions
functions.php, then reload the editor.AI Usage: Claude was used to understand the codebase and assist with implementation.