@wordpress/block-editor 12.0.0 → 12.2.0

package/src/hooks/align.js

@@ -13,14 +13,13 @@ import {
 	getBlockType,
 	hasBlockSupport,
 } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { BlockControls, BlockAlignmentControl } from '../components';
 import useAvailableAlignments from '../components/block-alignment-control/use-available-alignments';
-import { store as blockEditorStore } from '../store';
+import { useBlockEditingMode } from '../components/block-editing-mode';
 
 /**
  * An array which includes all possible valid alignments,
@@ -133,15 +132,8 @@ export const withToolbarControls = createHigherOrderComponent(
 		const validAlignments = useAvailableAlignments(
 			blockAllowedAlignments
 		).map( ( { name } ) => name );
-		const isContentLocked = useSelect(
-			( select ) => {
-				return select(
-					blockEditorStore
-				).__unstableGetContentLockingParent( props.clientId );
-			},
-			[ props.clientId ]
-		);
-		if ( ! validAlignments.length || isContentLocked ) {
+		const blockEditingMode = useBlockEditingMode();
+		if ( ! validAlignments.length || blockEditingMode !== 'default' ) {
 			return blockEdit;
 		}
 
@@ -205,7 +197,8 @@ export const withDataAlign = createHigherOrderComponent(
 		}
 
 		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
-	}
+	},
+	'withDataAlign'
 );
 
 /**

package/src/hooks/behaviors.js

@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { select } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { InspectorControls } from '../components';
+import { store as blockEditorStore } from '../store';
+
+/**
+ * External dependencies
+ */
+import merge from 'deepmerge';
+
+/**
+ * Override the default edit UI to include a new block inspector control for
+ * assigning behaviors to blocks if behaviors are enabled in the theme.json.
+ *
+ * Currently, only the `core/image` block is supported.
+ *
+ * @param {WPComponent} BlockEdit Original component.
+ *
+ * @return {WPComponent} Wrapped component.
+ */
+export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
+	return ( props ) => {
+		// Only add behaviors to the core/image block.
+		if ( props.name !== 'core/image' ) {
+			return <BlockEdit { ...props } />;
+		}
+
+		const settings =
+			select( blockEditorStore ).getSettings()?.__experimentalFeatures
+				?.blocks?.[ props.name ]?.behaviors;
+
+		if (
+			! settings ||
+			// If every behavior is disabled, do not show the behaviors inspector control.
+			Object.entries( settings ).every( ( [ , value ] ) => ! value )
+		) {
+			return <BlockEdit { ...props } />;
+		}
+
+		const { behaviors: blockBehaviors } = props.attributes;
+
+		// Get the theme behaviors for the block from the theme.json.
+		const themeBehaviors =
+			select( blockEditorStore ).getBehaviors()?.blocks?.[ props.name ];
+
+		// Block behaviors take precedence over theme behaviors.
+		const behaviors = merge( themeBehaviors, blockBehaviors || {} );
+
+		return (
+			<>
+				<BlockEdit { ...props } />
+				<InspectorControls group="advanced">
+					<SelectControl
+						__nextHasNoMarginBottom
+						label={ __( 'Behaviors' ) }
+						// At the moment we are only supporting one behavior (Lightbox)
+						value={ behaviors?.lightbox ? 'lightbox' : '' }
+						options={ Object.entries( settings )
+							.filter( ( [ , behaviorValue ] ) => behaviorValue ) // Filter out behaviors that are disabled.
+							.map( ( [ behaviorName ] ) => ( {
+								value: behaviorName,
+								label:
+									// Capitalize the first letter of the behavior name.
+									behaviorName[ 0 ].toUpperCase() +
+									behaviorName.slice( 1 ).toLowerCase(),
+							} ) )
+							.concat( {
+								value: '',
+								label: __( 'No behaviors' ),
+							} ) }
+						onChange={ ( nextValue ) => {
+							// If the user selects something, it means that they want to
+							// change the default value (true) so we save it in the attributes.
+							props.setAttributes( {
+								behaviors: {
+									lightbox: nextValue === 'lightbox',
+								},
+							} );
+						} }
+						hideCancelButton={ true }
+						help={ __( 'Add behaviors.' ) }
+						size="__unstable-large"
+					/>
+				</InspectorControls>
+			</>
+		);
+	};
+}, 'withBehaviors' );
+
+addFilter(
+	'editor.BlockEdit',
+	'core/behaviors/with-inspector-control',
+	withBehaviors
+);

package/src/hooks/border.js

@@ -388,7 +388,8 @@ export const withBorderColorPaletteStyles = createHigherOrderComponent(
 		};
 
 		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
-	}
+	},
+	'withBorderColorPaletteStyles'
 );
 
 addFilter(

package/src/hooks/color.js

@@ -416,7 +416,8 @@ export const withColorPaletteStyles = createHigherOrderComponent(
 		};
 
 		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
-	}
+	},
+	'withColorPaletteStyles'
 );
 
 const MIGRATION_PATHS = {

package/src/hooks/content-lock-ui.js

@@ -13,10 +13,6 @@ import { useEffect, useRef, useCallback } from '@wordpress/element';
  */
 import { store as blockEditorStore } from '../store';
 import { BlockControls, BlockSettingsMenuControls } from '../components';
-/**
- * External dependencies
- */
-import classnames from 'classnames';
 
 function StopEditingAsBlocksOnOutsideSelect( {
 	clientId,
@@ -37,7 +33,7 @@ function StopEditingAsBlocksOnOutsideSelect( {
 		if ( ! isBlockOrDescendantSelected ) {
 			stopEditingAsBlock();
 		}
-	}, [ isBlockOrDescendantSelected ] );
+	}, [ isBlockOrDescendantSelected, stopEditingAsBlock ] );
 	return null;
 }
 
@@ -91,7 +87,6 @@ export const withBlockControls = createHigherOrderComponent(
 			__unstableSetTemporarilyEditingAsBlocks();
 		}, [
 			props.clientId,
-			focusModeToRevert,
 			updateSettings,
 			updateBlockListSettings,
 			getBlockListSettings,
@@ -101,7 +96,7 @@ export const withBlockControls = createHigherOrderComponent(
 		] );
 
 		if ( ! isContentLocked && ! isEditingAsBlocks ) {
-			return <BlockEdit { ...props } />;
+			return <BlockEdit key="edit" { ...props } />;
 		}
 
 		const showStopEditingAsBlocks = isEditingAsBlocks && ! isContentLocked;
@@ -156,14 +151,7 @@ export const withBlockControls = createHigherOrderComponent(
 						) }
 					</BlockSettingsMenuControls>
 				) }
-				<BlockEdit
-					{ ...props }
-					className={ classnames(
-						props.className,
-						isEditingAsBlocks &&
-							'is-content-locked-editing-as-blocks'
-					) }
-				/>
+				<BlockEdit key="edit" { ...props } />
 			</>
 		);
 	},

package/src/hooks/dimensions.js

@@ -136,43 +136,3 @@ export function useCustomSides() {
 		version: '6.4',
 	} );
 }
-
-/**
- * Custom hook to determine whether the sides configured in the
- * block support are valid. A dimension property cannot declare
- * support for a mix of axial and individual sides.
- *
- * @param {string} blockName Block name.
- * @param {string} feature   The feature custom sides relate to e.g. padding or margins.
- *
- * @return {boolean} If the feature has a valid configuration of sides.
- */
-export function useIsDimensionsSupportValid( blockName, feature ) {
-	const sides = useCustomSides( blockName, feature );
-
-	if (
-		sides &&
-		sides.some( ( side ) => ALL_SIDES.includes( side ) ) &&
-		sides.some( ( side ) => AXIAL_SIDES.includes( side ) )
-	) {
-		// eslint-disable-next-line no-console
-		console.warn(
-			`The ${ feature } support for the "${ blockName }" block can not be configured to support both axial and arbitrary sides.`
-		);
-		return false;
-	}
-
-	if (
-		sides?.length &&
-		feature === 'blockGap' &&
-		! AXIAL_SIDES.every( ( side ) => sides.includes( side ) )
-	) {
-		// eslint-disable-next-line no-console
-		console.warn(
-			`The ${ feature } support for the "${ blockName }" block can not be configured to support arbitrary sides.`
-		);
-		return false;
-	}
-
-	return true;
-}

package/src/hooks/duotone.js

@@ -16,7 +16,6 @@ import {
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useMemo, useContext, createPortal } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -36,8 +35,8 @@ import {
 import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';
 import { scopeSelector } from '../components/global-styles/utils';
 import { useBlockSettings } from './utils';
-import { store as blockEditorStore } from '../store';
 import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';
+import { useBlockEditingMode } from '../components/block-editing-mode';
 
 const EMPTY_ARRAY = [];
 
@@ -142,6 +141,7 @@ function DuotonePanel( { attributes, setAttributes, name } ) {
 					value={ { filter: { duotone: duotonePresetOrColors } } }
 					onChange={ ( newDuotone ) => {
 						const newStyle = {
+							...style,
 							color: {
 								...newDuotone?.filter,
 							},
@@ -225,14 +225,7 @@ const withDuotoneControls = createHigherOrderComponent(
 			'filter.duotone'
 		);
 
-		const isContentLocked = useSelect(
-			( select ) => {
-				return select(
-					blockEditorStore
-				).__unstableGetContentLockingParent( props.clientId );
-			},
-			[ props.clientId ]
-		);
+		const blockEditingMode = useBlockEditingMode();
 
 		// CAUTION: code added before this line will be executed
 		// for all blocks, not just those that support duotone. Code added
@@ -240,7 +233,7 @@ const withDuotoneControls = createHigherOrderComponent(
 		// performance.
 		return (
 			<>
-				{ hasDuotoneSupport && ! isContentLocked && (
+				{ hasDuotoneSupport && blockEditingMode === 'default' && (
 					<DuotonePanel { ...props } />
 				) }
 				<BlockEdit { ...props } />

package/src/hooks/index.js

@@ -20,6 +20,7 @@ import './layout';
 import './content-lock-ui';
 import './metadata';
 import './metadata-name';
+import './behaviors';
 
 export { useCustomSides } from './dimensions';
 export { useLayoutClasses, useLayoutStyles } from './layout';

package/src/hooks/index.native.js

@@ -15,3 +15,4 @@ export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { useCachedTruthy } from './use-cached-truthy';
+export { useEditorWrapperStyles } from './use-editor-wrapper-styles';

package/src/hooks/layout.js

@@ -29,6 +29,7 @@ import useSetting from '../components/use-setting';
 import { LayoutStyle } from '../components/block-list/layout';
 import BlockList from '../components/block-list';
 import { getLayoutType, getLayoutTypes } from '../layouts';
+import { useBlockEditingMode } from '../components/block-editing-mode';
 
 const layoutBlockSupportKey = '__experimentalLayout';
 
@@ -131,25 +132,16 @@ export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
 	return css;
 }
 
-function LayoutPanel( {
-	clientId,
-	setAttributes,
-	attributes,
-	name: blockName,
-} ) {
+function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 	const { layout } = attributes;
 	const defaultThemeLayout = useSetting( 'layout' );
-	const { themeSupportsLayout, isContentLocked } = useSelect(
-		( select ) => {
-			const { getSettings, __unstableGetContentLockingParent } =
-				select( blockEditorStore );
-			return {
-				themeSupportsLayout: getSettings().supportsLayout,
-				isContentLocked: __unstableGetContentLockingParent( clientId ),
-			};
-		},
-		[ clientId ]
-	);
+	const { themeSupportsLayout } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return {
+			themeSupportsLayout: getSettings().supportsLayout,
+		};
+	}, [] );
+	const blockEditingMode = useBlockEditingMode();
 
 	const layoutBlockSupport = getBlockSupport(
 		blockName,
@@ -270,7 +262,7 @@ function LayoutPanel( {
 					) }
 				</PanelBody>
 			</InspectorControls>
-			{ ! inherit && ! isContentLocked && layoutType && (
+			{ ! inherit && blockEditingMode === 'default' && layoutType && (
 				<layoutType.toolBarControls
 					layout={ usedLayout }
 					onChange={ onChangeLayout }
@@ -429,7 +421,8 @@ export const withLayoutStyles = createHigherOrderComponent(
 				/>
 			</>
 		);
-	}
+	},
+	'withLayoutStyles'
 );
 
 /**
@@ -484,7 +477,8 @@ export const withChildLayoutStyles = createHigherOrderComponent(
 				<BlockListBlock { ...props } className={ className } />
 			</>
 		);
-	}
+	},
+	'withChildLayoutStyles'
 );
 
 addFilter(

package/src/hooks/position.js

@@ -386,7 +386,8 @@ export const withPositionStyles = createHigherOrderComponent(
 				<BlockListBlock { ...props } className={ className } />
 			</>
 		);
-	}
+	},
+	'withPositionStyles'
 );
 
 addFilter(

package/src/hooks/style.js

@@ -447,7 +447,8 @@ const withElementsStyles = createHigherOrderComponent(
 				/>
 			</>
 		);
-	}
+	},
+	'withElementsStyles'
 );
 
 addFilter(