Allow layout controls to be disabled per block from theme.json (#53378)

* Allow layout controls to be disabled per block from theme.json * Use allowEditing instead of root * Update docs.
WordPress · Aug 9, 2023 · e57bf0d · e57bf0d
1 parent fec05ee
commit e57bf0d
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md
@@ -115,6 +115,7 @@ Settings related to layout.
 | ---       | ---    | ---    |---   |
 | contentSize | string |  |  |
 | wideSize | string |  |  |
+| allowEditing | boolean | true |  |
 
 ---
 

diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
@@ -346,6 +346,7 @@ class WP_Theme_JSON_Gutenberg {
 	 * @since 6.2.0 Added `dimensions.minHeight`, 'shadow.presets', 'shadow.defaultPresets',
 	 *              `position.fixed` and `position.sticky`.
 	 * @since 6.3.0 Removed `layout.definitions`. Added `typography.writingMode`.
+	 * @since 6.4.0 Added `layout.allowEditing`.
 	 * @var array
 	 */
 	const VALID_SETTINGS = array(
@@ -379,8 +380,9 @@ class WP_Theme_JSON_Gutenberg {
 			'minHeight' => null,
 		),
 		'layout'                        => array(
-			'contentSize' => null,
-			'wideSize'    => null,
+			'contentSize'  => null,
+			'wideSize'     => null,
+			'allowEditing' => null,
 		),
 		'position'                      => array(
 			'fixed'  => null,

diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
@@ -31,6 +31,7 @@ import { getLayoutType, getLayoutTypes } from '../layouts';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 import { LAYOUT_DEFINITIONS } from '../layouts/definitions';
 import { kebabCase } from '../utils/object';
+import { useBlockSettings } from './utils';
 
 const layoutBlockSupportKey = 'layout';
 
@@ -136,6 +137,11 @@ export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
 }
 
 function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
+	const settings = useBlockSettings( blockName );
+	const {
+		layout: { allowEditing: allowEditingSetting },
+	} = settings;
+
 	const { layout } = attributes;
 	const defaultThemeLayout = useSetting( 'layout' );
 	const { themeSupportsLayout } = useSelect( ( select ) => {
@@ -153,7 +159,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 	);
 	const {
 		allowSwitching,
-		allowEditing = true,
+		allowEditing = allowEditingSetting ?? true,
 		allowInheriting = true,
 		default: defaultBlockLayout,
 	} = layoutBlockSupport;

diff --git a/schemas/json/theme.json b/schemas/json/theme.json
@@ -291,6 +291,11 @@
 						"wideSize": {
 							"description": "Sets the max-width of wide (`.alignwide`) content. Also used as the maximum viewport when calculating fluid font sizes",
 							"type": "string"
+						},
+						"allowEditing": {
+							"description": "Disable the layout UI controls.",
+							"type": "boolean",
+							"default": true
 						}
 					},
 					"additionalProperties": false