@wordpress/block-editor 11.5.0 → 11.7.0

package/src/components/global-styles/typography-panel.js

@@ -3,6 +3,7 @@
  */
 import {
 	FontSizePicker,
+	__experimentalNumberControl as NumberControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -19,6 +20,10 @@ import LetterSpacingControl from '../letter-spacing-control';
 import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
 import { getValueFromVariable } from './utils';
+import { immutableSet } from '../../utils/object';
+
+const MIN_TEXT_COLUMNS = 1;
+const MAX_TEXT_COLUMNS = 6;
 
 export function useHasTypographyPanel( settings ) {
 	const hasFontFamily = useHasFontFamilyControl( settings );
@@ -27,6 +32,7 @@ export function useHasTypographyPanel( settings ) {
 	const hasLetterSpacing = useHasLetterSpacingControl( settings );
 	const hasTextTransform = useHasTextTransformControl( settings );
 	const hasTextDecoration = useHasTextDecorationControl( settings );
+	const hasTextColumns = useHasTextColumnsControl( settings );
 	const hasFontSize = useHasFontSizeControl( settings );
 
 	return (
@@ -36,7 +42,8 @@ export function useHasTypographyPanel( settings ) {
 		hasLetterSpacing ||
 		hasTextTransform ||
 		hasFontSize ||
-		hasTextDecoration
+		hasTextDecoration ||
+		hasTextColumns
 	);
 }
 
@@ -93,6 +100,10 @@ function useHasTextDecorationControl( settings ) {
 	return settings?.typography?.textDecoration;
 }
 
+function useHasTextColumnsControl( settings ) {
+	return settings?.typography?.textColumns;
+}
+
 function TypographyToolsPanel( {
 	resetAllFilter,
 	onChange,
@@ -124,6 +135,7 @@ const DEFAULT_CONTROLS = {
 	letterSpacing: true,
 	textTransform: true,
 	textDecoration: true,
+	textColumns: true,
 };
 
 export default function TypographyPanel( {
@@ -150,15 +162,13 @@ export default function TypographyPanel( {
 		const slug = fontFamilies?.find(
 			( { fontFamily: f } ) => f === newValue
 		)?.slug;
-		onChange( {
-			...value,
-			typography: {
-				...value?.typography,
-				fontFamily: slug
-					? `var:preset|font-family|${ slug }`
-					: newValue,
-			},
-		} );
+		onChange(
+			immutableSet(
+				value,
+				[ 'typography', 'fontFamily' ],
+				slug ? `var:preset|font-family|${ slug }` : newValue
+			)
+		);
 	};
 	const hasFontFamily = () => !! value?.typography?.fontFamily;
 	const resetFontFamily = () => setFontFamily( undefined );
@@ -177,13 +187,9 @@ export default function TypographyPanel( {
 			? `var:preset|font-size|${ metadata?.slug }`
 			: newValue;
 
-		onChange( {
-			...value,
-			typography: {
-				...value?.typography,
-				fontSize: actualValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'typography', 'fontSize' ], actualValue )
+		);
 	};
 	const hasFontSize = () => !! value?.typography?.fontSize;
 	const resetFontSize = () => setFontSize( undefined );
@@ -218,13 +224,9 @@ export default function TypographyPanel( {
 	const hasLineHeightEnabled = useHasLineHeightControl( settings );
 	const lineHeight = decodeValue( inheritedValue?.typography?.lineHeight );
 	const setLineHeight = ( newValue ) => {
-		onChange( {
-			...value,
-			typography: {
-				...value?.typography,
-				lineHeight: newValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'typography', 'lineHeight' ], newValue )
+		);
 	};
 	const hasLineHeight = () => !! value?.typography?.lineHeight;
 	const resetLineHeight = () => setLineHeight( undefined );
@@ -235,30 +237,33 @@ export default function TypographyPanel( {
 		inheritedValue?.typography?.letterSpacing
 	);
 	const setLetterSpacing = ( newValue ) => {
-		onChange( {
-			...value,
-			typography: {
-				...value?.typography,
-				letterSpacing: newValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'typography', 'letterSpacing' ], newValue )
+		);
 	};
 	const hasLetterSpacing = () => !! value?.typography?.letterSpacing;
 	const resetLetterSpacing = () => setLetterSpacing( undefined );
 
+	// Text Columns
+	const hasTextColumnsControl = useHasTextColumnsControl( settings );
+	const textColumns = decodeValue( inheritedValue?.typography?.textColumns );
+	const setTextColumns = ( newValue ) => {
+		onChange(
+			immutableSet( value, [ 'typography', 'textColumns' ], newValue )
+		);
+	};
+	const hasTextColumns = () => !! value?.typography?.textColumns;
+	const resetTextColumns = () => setTextColumns( undefined );
+
 	// Text Transform
 	const hasTextTransformControl = useHasTextTransformControl( settings );
 	const textTransform = decodeValue(
 		inheritedValue?.typography?.textTransform
 	);
 	const setTextTransform = ( newValue ) => {
-		onChange( {
-			...value,
-			typography: {
-				...value?.typography,
-				textTransform: newValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'typography', 'textTransform' ], newValue )
+		);
 	};
 	const hasTextTransform = () => !! value?.typography?.textTransform;
 	const resetTextTransform = () => setTextTransform( undefined );
@@ -269,13 +274,9 @@ export default function TypographyPanel( {
 		inheritedValue?.typography?.textDecoration
 	);
 	const setTextDecoration = ( newValue ) => {
-		onChange( {
-			...value,
-			typography: {
-				...value?.typography,
-				textDecoration: newValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'typography', 'textDecoration' ], newValue )
+		);
 	};
 	const hasTextDecoration = () => !! value?.typography?.textDecoration;
 	const resetTextDecoration = () => setTextDecoration( undefined );
@@ -388,6 +389,27 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ hasTextColumnsControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Text columns' ) }
+					hasValue={ hasTextColumns }
+					onDeselect={ resetTextColumns }
+					isShownByDefault={ defaultControls.textColumns }
+					panelId={ panelId }
+				>
+					<NumberControl
+						label={ __( 'Text columns' ) }
+						max={ MAX_TEXT_COLUMNS }
+						min={ MIN_TEXT_COLUMNS }
+						onChange={ setTextColumns }
+						size="__unstable-large"
+						spinControls="custom"
+						value={ textColumns }
+						initialPosition={ 1 }
+					/>
+				</ToolsPanelItem>
+			) }
 			{ hasTextDecorationControl && (
 				<ToolsPanelItem
 					className="single-column"

package/src/components/global-styles/use-global-styles-output.js

@@ -13,13 +13,14 @@ import {
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import { useContext, useMemo } from '@wordpress/element';
+import { renderToString, useContext, useMemo } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
  */
 import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
+import { getBlockCSSSelector } from './get-block-css-selector';
 import { getTypographyFontSizeValue } from './typography-utils';
 import { GlobalStylesContext } from './context';
 import { useGlobalSetting } from './hooks';
@@ -95,11 +96,11 @@ function getPresetsDeclarations( blockPresets = {}, mergedSettings ) {
 /**
  * Transform given preset tree into a set of preset class declarations.
  *
- * @param {string} blockSelector
- * @param {Object} blockPresets
+ * @param {?string} blockSelector
+ * @param {Object}  blockPresets
  * @return {string} CSS declarations for the preset classes.
  */
-function getPresetsClasses( blockSelector, blockPresets = {} ) {
+function getPresetsClasses( blockSelector = '*', blockPresets = {} ) {
 	return PRESET_METADATA.reduce(
 		( declarations, { path, cssVarInfix, classes } ) => {
 			if ( ! classes ) {
@@ -144,13 +145,16 @@ function getPresetsSvgFilters( blockPresets = {} ) {
 		return [ 'default', 'theme' ]
 			.filter( ( origin ) => presetByOrigin[ origin ] )
 			.flatMap( ( origin ) =>
-				presetByOrigin[ origin ].map( ( preset ) => (
-					<PresetDuotoneFilter
-						preset={ preset }
-						key={ preset.slug }
-					/>
-				) )
-			);
+				presetByOrigin[ origin ].map( ( preset ) =>
+					renderToString(
+						<PresetDuotoneFilter
+							preset={ preset }
+							key={ preset.slug }
+						/>
+					)
+				)
+			)
+			.join( '' );
 	} );
 }
 
@@ -193,6 +197,89 @@ function concatFeatureVariationSelectorString(
 	return combinedSelectors.join( ', ' );
 }
 
+/**
+ * Generate style declarations for a block's custom feature and subfeature
+ * selectors.
+ *
+ * NOTE: The passed `styles` object will be mutated by this function.
+ *
+ * @param {Object} selectors Custom selectors object for a block.
+ * @param {Object} styles    A block's styles object.
+ *
+ * @return {Object} Style declarations.
+ */
+const getFeatureDeclarations = ( selectors, styles ) => {
+	const declarations = {};
+
+	Object.entries( selectors ).forEach( ( [ feature, selector ] ) => {
+		// We're only processing features/subfeatures that have styles.
+		if ( feature === 'root' || ! styles?.[ feature ] ) {
+			return;
+		}
+
+		const isShorthand = typeof selector === 'string';
+
+		// If we have a selector object instead of shorthand process it.
+		if ( ! isShorthand ) {
+			Object.entries( selector ).forEach(
+				( [ subfeature, subfeatureSelector ] ) => {
+					// Don't process root feature selector yet or any
+					// subfeature that doesn't have a style.
+					if (
+						subfeature === 'root' ||
+						! styles?.[ feature ][ subfeature ]
+					) {
+						return;
+					}
+
+					// Create a temporary styles object and build
+					// declarations for subfeature.
+					const subfeatureStyles = {
+						[ feature ]: {
+							[ subfeature ]: styles[ feature ][ subfeature ],
+						},
+					};
+					const newDeclarations =
+						getStylesDeclarations( subfeatureStyles );
+
+					// Merge new declarations in with any others that
+					// share the same selector.
+					declarations[ subfeatureSelector ] = [
+						...( declarations[ subfeatureSelector ] || [] ),
+						...newDeclarations,
+					];
+
+					// Remove the subfeature's style now it will be
+					// included under its own selector not the block's.
+					delete styles[ feature ][ subfeature ];
+				}
+			);
+		}
+
+		// Now subfeatures have been processed and removed, we can
+		// process root, or shorthand, feature selectors.
+		if ( isShorthand || selector.root ) {
+			const featureSelector = isShorthand ? selector : selector.root;
+
+			// Create temporary style object and build declarations for feature.
+			const featureStyles = { [ feature ]: styles[ feature ] };
+			const newDeclarations = getStylesDeclarations( featureStyles );
+
+			// Merge new declarations with any others that share the selector.
+			declarations[ featureSelector ] = [
+				...( declarations[ featureSelector ] || [] ),
+				...newDeclarations,
+			];
+
+			// Remove the feature from the block's styles now as it will be
+			// included under its own selector not the block's.
+			delete styles[ feature ];
+		}
+	} );
+
+	return declarations;
+};
+
 /**
  * Transform given style tree into a set of style declarations.
  *
@@ -399,7 +486,7 @@ export function getLayoutStyles( {
 										? `${ selector } .${ className }${
 												spacingStyle?.selector || ''
 										  }`
-										: `${ selector }.${ className }${
+										: `${ selector }-${ className }${ selector }-${ className }${
 												spacingStyle?.selector || ''
 										  }`;
 							}
@@ -496,9 +583,9 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 	}
 
 	Object.entries( ELEMENTS ).forEach( ( [ name, selector ] ) => {
-		if ( !! tree.styles?.elements[ name ] ) {
+		if ( !! tree.styles?.elements?.[ name ] ) {
 			nodes.push( {
-				styles: tree.styles?.elements[ name ],
+				styles: tree.styles?.elements?.[ name ],
 				selector,
 			} );
 		}
@@ -529,7 +616,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 						blockSelectors[ blockName ].fallbackGapValue,
 					hasLayoutSupport:
 						blockSelectors[ blockName ].hasLayoutSupport,
-					selector: blockSelectors[ blockName ].selector,
+					selector: blockSelectors[ blockName ]?.selector,
 					styles: blockStyles,
 					featureSelectors:
 						blockSelectors[ blockName ].featureSelectors,
@@ -547,7 +634,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 					) {
 						nodes.push( {
 							styles: value,
-							selector: blockSelectors[ blockName ].selector
+							selector: blockSelectors[ blockName ]?.selector
 								.split( ',' )
 								.map( ( sel ) => {
 									const elementSelectors =
@@ -606,7 +693,7 @@ export const getNodesWithSettings = ( tree, blockSelectors ) => {
 				nodes.push( {
 					presets: blockPresets,
 					custom: blockCustom,
-					selector: blockSelectors[ blockName ].selector,
+					selector: blockSelectors[ blockName ]?.selector,
 				} );
 			}
 		}
@@ -692,23 +779,16 @@ export const toStyles = (
 			// Process styles for block support features with custom feature level
 			// CSS selectors set.
 			if ( featureSelectors ) {
-				Object.entries( featureSelectors ).forEach(
-					( [ featureName, featureSelector ] ) => {
-						if ( styles?.[ featureName ] ) {
-							const featureStyles = {
-								[ featureName ]: styles[ featureName ],
-							};
-							const featureDeclarations =
-								getStylesDeclarations( featureStyles );
-							delete styles[ featureName ];
-
-							if ( !! featureDeclarations.length ) {
-								ruleset =
-									ruleset +
-									`${ featureSelector }{${ featureDeclarations.join(
-										';'
-									) } }`;
-							}
+				const featureDeclarations = getFeatureDeclarations(
+					featureSelectors,
+					styles
+				);
+
+				Object.entries( featureDeclarations ).forEach(
+					( [ cssSelector, declarations ] ) => {
+						if ( !! declarations.length ) {
+							const rules = declarations.join( ';' );
+							ruleset = ruleset + `${ cssSelector }{${ rules }}`;
 						}
 					}
 				);
@@ -720,43 +800,32 @@ export const toStyles = (
 						if ( styles?.variations?.[ styleVariationName ] ) {
 							// If the block uses any custom selectors for block support, add those first.
 							if ( featureSelectors ) {
-								Object.entries( featureSelectors ).forEach(
-									( [ featureName, featureSelector ] ) => {
-										if (
-											styles?.variations?.[
-												styleVariationName
-											]?.[ featureName ]
-										) {
-											const featureStyles = {
-												[ featureName ]:
-													styles.variations[
-														styleVariationName
-													][ featureName ],
-											};
-											const featureDeclarations =
-												getStylesDeclarations(
-													featureStyles
+								const featureDeclarations =
+									getFeatureDeclarations(
+										featureSelectors,
+										styles?.variations?.[
+											styleVariationName
+										]
+									);
+
+								Object.entries( featureDeclarations ).forEach(
+									( [ baseSelector, declarations ] ) => {
+										if ( !! declarations.length ) {
+											const cssSelector =
+												concatFeatureVariationSelectorString(
+													baseSelector,
+													styleVariationSelector
 												);
-											delete styles.variations[
-												styleVariationName
-											][ featureName ];
-
-											if (
-												!! featureDeclarations.length
-											) {
-												ruleset =
-													ruleset +
-													`${ concatFeatureVariationSelectorString(
-														featureSelector,
-														styleVariationSelector
-													) }{${ featureDeclarations.join(
-														';'
-													) } }`;
-											}
+											const rules =
+												declarations.join( ';' );
+											ruleset =
+												ruleset +
+												`${ cssSelector }{${ rules }}`;
 										}
 									}
 								);
 							}
+
 							// Otherwise add regular selectors.
 							const styleVariationDeclarations =
 								getStylesDeclarations(
@@ -907,15 +976,37 @@ export function toSvgFilters( tree, blockSelectors ) {
 	} );
 }
 
+const getSelectorsConfig = ( blockType, rootSelector ) => {
+	if ( ! isEmpty( blockType?.selectors ) ) {
+		return blockType.selectors;
+	}
+
+	const config = { root: rootSelector };
+	Object.entries( BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS ).forEach(
+		( [ featureKey, featureName ] ) => {
+			const featureSelector = getBlockCSSSelector(
+				blockType,
+				featureKey
+			);
+
+			if ( featureSelector ) {
+				config[ featureName ] = featureSelector;
+			}
+		}
+	);
+
+	return config;
+};
+
 export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
 	const result = {};
 	blockTypes.forEach( ( blockType ) => {
 		const name = blockType.name;
-		const selector =
-			blockType?.supports?.__experimentalSelector ??
-			'.wp-block-' + name.replace( 'core/', '' ).replace( '/', '-' );
-		const duotoneSelector =
-			blockType?.supports?.color?.__experimentalDuotone ?? null;
+		const selector = getBlockCSSSelector( blockType, 'root' );
+		const duotoneSelector = getBlockCSSSelector(
+			blockType,
+			'filter.duotone'
+		);
 		const hasLayoutSupport = !! blockType?.supports?.__experimentalLayout;
 		const fallbackGapValue =
 			blockType?.supports?.spacing?.blockGap?.__experimentalDefault;
@@ -930,20 +1021,7 @@ export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
 			} );
 		}
 		// For each block support feature add any custom selectors.
-		const featureSelectors = {};
-		Object.entries( BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS ).forEach(
-			( [ featureKey, featureName ] ) => {
-				const featureSelector =
-					blockType?.supports?.[ featureKey ]?.__experimentalSelector;
-
-				if ( featureSelector ) {
-					featureSelectors[ featureName ] = scopeSelector(
-						selector,
-						featureSelector
-					);
-				}
-			}
-		);
+		const featureSelectors = getSelectorsConfig( blockType, selector );
 
 		result[ name ] = {
 			duotoneSelector,
@@ -973,10 +1051,10 @@ export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
  */
 function updateConfigWithSeparator( config ) {
 	const needsSeparatorStyleUpdate =
-		config.styles?.blocks[ 'core/separator' ] &&
-		config.styles?.blocks[ 'core/separator' ].color?.background &&
-		! config.styles?.blocks[ 'core/separator' ].color?.text &&
-		! config.styles?.blocks[ 'core/separator' ].border?.color;
+		config.styles?.blocks?.[ 'core/separator' ] &&
+		config.styles?.blocks?.[ 'core/separator' ].color?.background &&
+		! config.styles?.blocks?.[ 'core/separator' ].color?.text &&
+		! config.styles?.blocks?.[ 'core/separator' ].border?.color;
 	if ( needsSeparatorStyleUpdate ) {
 		return {
 			...config,
@@ -1049,9 +1127,9 @@ export function useGlobalStylesOutput() {
 			hasFallbackGapSupport,
 			disableLayoutStyles
 		);
+		const svgs = toSvgFilters( mergedConfig, blockSelectors );
 
-		const filters = toSvgFilters( mergedConfig, blockSelectors );
-		const stylesheets = [
+		const styles = [
 			{
 				css: customProperties,
 				isGlobalStyles: true,
@@ -1065,6 +1143,11 @@ export function useGlobalStylesOutput() {
 				css: mergedConfig.styles.css ?? '',
 				isGlobalStyles: true,
 			},
+			{
+				assets: svgs,
+				__unstableType: 'svg',
+				isGlobalStyles: true,
+			},
 		];
 
 		// Loop through the blocks to check if there are custom CSS values.
@@ -1073,7 +1156,7 @@ export function useGlobalStylesOutput() {
 		getBlockTypes().forEach( ( blockType ) => {
 			if ( mergedConfig.styles.blocks[ blockType.name ]?.css ) {
 				const selector = blockSelectors[ blockType.name ].selector;
-				stylesheets.push( {
+				styles.push( {
 					css: processCSSNesting(
 						mergedConfig.styles.blocks[ blockType.name ]?.css,
 						selector
@@ -1083,7 +1166,7 @@ export function useGlobalStylesOutput() {
 			}
 		} );
 
-		return [ stylesheets, mergedConfig.settings, filters ];
+		return [ styles, mergedConfig.settings ];
 	}, [
 		hasBlockGapSupport,
 		hasFallbackGapSupport,

package/src/components/global-styles/utils.js

@@ -16,7 +16,9 @@ export const ROOT_BLOCK_SUPPORTS = [
 	'backgroundColor',
 	'color',
 	'linkColor',
+	'captionColor',
 	'buttonColor',
+	'headingColor',
 	'fontFamily',
 	'fontSize',
 	'fontStyle',
@@ -103,6 +105,7 @@ export const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'elements.link.typography.fontSize': 'font-size',
 	'elements.button.color.text': 'color',
 	'elements.button.color.background': 'color',
+	'elements.caption.color.text': 'color',
 	'elements.button.typography.fontFamily': 'font-family',
 	'elements.button.typography.fontSize': 'font-size',
 	'elements.heading.color': 'color',

package/src/components/image-size-control/index.js

@@ -38,17 +38,16 @@ export default function ImageSizeControl( {
 			{ imageSizeOptions && imageSizeOptions.length > 0 && (
 				<SelectControl
 					__nextHasNoMarginBottom
-					label={ __( 'Image size' ) }
+					label={ __( 'Resolution' ) }
 					value={ slug }
 					options={ imageSizeOptions }
 					onChange={ onChangeImage }
 					help={ imageSizeHelp }
+					size="__unstable-large"
 				/>
 			) }
 			{ isResizable && (
 				<div className="block-editor-image-size-control">
-					<p>{ __( 'Image dimensions' ) }</p>
-
 					<HStack align="baseline" spacing="3">
 						<NumberControl
 							className="block-editor-image-size-control__width"
@@ -58,6 +57,7 @@ export default function ImageSizeControl( {
 							onChange={ ( value ) =>
 								updateDimension( 'width', value )
 							}
+							size="__unstable-large"
 						/>
 						<NumberControl
 							className="block-editor-image-size-control__height"
@@ -67,6 +67,7 @@ export default function ImageSizeControl( {
 							onChange={ ( value ) =>
 								updateDimension( 'height', value )
 							}
+							size="__unstable-large"
 						/>
 					</HStack>
 					<HStack>

package/src/components/image-size-control/test/index.js

@@ -334,7 +334,7 @@ describe( 'ImageSizeControl', () => {
 			);
 
 			expect(
-				screen.getByRole( 'combobox', { name: 'Image size' } )
+				screen.getByRole( 'combobox', { name: 'Resolution' } )
 			).toHaveValue( 'medium' );
 		} );
 
@@ -351,7 +351,7 @@ describe( 'ImageSizeControl', () => {
 			);
 
 			await user.selectOptions(
-				screen.getByRole( 'combobox', { name: 'Image size' } ),
+				screen.getByRole( 'combobox', { name: 'Resolution' } ),
 				'thumbnail'
 			);
 

package/src/components/inner-blocks/README.md

@@ -130,7 +130,7 @@ _Options:_
 -   `'insert'` — prevents inserting or removing blocks, but allows moving existing ones.
 -   `false` — prevents locking from being applied to an `InnerBlocks` area even if a parent block contains locking. ( Boolean )
 
-If locking is not set in an `InnerBlocks` area: the locking of the parent `InnerBlocks` area is used. Note that `contentOnly` can't be overriden: it's present, the `templateLock` value of any children is ignored.
+If locking is not set in an `InnerBlocks` area: the locking of the parent `InnerBlocks` area is used. Note that `contentOnly` can't be overridden: it's present, the `templateLock` value of any children is ignored.
 
 If the block is a top level block: the locking of the Custom Post Type is used.