@wordpress/block-editor 12.9.0 → 12.10.0

package/src/components/global-styles/image-settings-panel.js

@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	ToggleControl,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+
+export function useHasImageSettingsPanel( name, value, inheritedValue ) {
+	// Note: If lightbox `value` exists, that means it was
+	// defined via the the Global Styles UI and will NOT
+	// be a boolean value or contain the `allowEditing` property,
+	// so we should show the settings panel in those cases.
+	return (
+		( name === 'core/image' && inheritedValue?.lightbox?.allowEditing ) ||
+		!! value?.lightbox
+	);
+}
+
+export default function ImageSettingsPanel( {
+	onChange,
+	value,
+	inheritedValue,
+	panelId,
+} ) {
+	const resetLightbox = () => {
+		onChange( undefined );
+	};
+
+	const onChangeLightbox = ( newSetting ) => {
+		onChange( {
+			enabled: newSetting,
+		} );
+	};
+
+	let lightboxChecked = false;
+
+	if ( inheritedValue?.lightbox?.enabled ) {
+		lightboxChecked = inheritedValue.lightbox.enabled;
+	}
+
+	return (
+		<>
+			<ToolsPanel
+				label={ _x( 'Settings', 'Image settings' ) }
+				resetAll={ resetLightbox }
+				panelId={ panelId }
+			>
+				<ToolsPanelItem
+					// We use the `userSettings` prop instead of `settings`, because `settings`
+					// contains the core/theme values for the lightbox and we want to show the
+					// "RESET" button ONLY when the user has explicitly set a value in the
+					// Global Styles.
+					hasValue={ () => !! value?.lightbox }
+					label={ __( 'Expand on Click' ) }
+					onDeselect={ resetLightbox }
+					isShownByDefault={ true }
+					panelId={ panelId }
+				>
+					<ToggleControl
+						label={ __( 'Expand on Click' ) }
+						checked={ lightboxChecked }
+						onChange={ onChangeLightbox }
+					/>
+				</ToolsPanelItem>
+			</ToolsPanel>
+		</>
+	);
+}

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

@@ -1,6 +1,4 @@
 export {
-	__experimentalUseGlobalBehaviors,
-	__experimentalUseHasBehaviorsPanel,
 	useGlobalStylesReset,
 	useGlobalSetting,
 	useGlobalStyle,
@@ -25,6 +23,9 @@ export { default as BorderPanel, useHasBorderPanel } from './border-panel';
 export { default as ColorPanel, useHasColorPanel } from './color-panel';
 export { default as EffectsPanel, useHasEffectsPanel } from './effects-panel';
 export { default as FiltersPanel, useHasFiltersPanel } from './filters-panel';
-export { default as __experimentalBehaviorsPanel } from './behaviors-panel';
+export {
+	default as ImageSettingsPanel,
+	useHasImageSettingsPanel,
+} from './image-settings-panel';
 export { default as AdvancedPanel } from './advanced-panel';
 export { areGlobalStyleConfigsEqual } from './utils';

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

@@ -9,7 +9,7 @@ import {
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import { renderToString, useContext, useMemo } from '@wordpress/element';
+import { useContext, useMemo } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
 
 /**
@@ -23,7 +23,7 @@ import {
 } from './typography-utils';
 import { GlobalStylesContext } from './context';
 import { useGlobalSetting } from './hooks';
-import { PresetDuotoneFilter } from '../duotone/components';
+import { getDuotoneFilter } from '../duotone/utils';
 import { getGapCSSValue } from '../../hooks/gap';
 import { store as blockEditorStore } from '../../store';
 import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
@@ -32,6 +32,7 @@ import {
 	kebabCase,
 	setImmutably,
 } from '../../utils/object';
+import BlockContext from '../block-context';
 
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
@@ -163,11 +164,9 @@ function getPresetsSvgFilters( blockPresets = {} ) {
 			.filter( ( origin ) => presetByOrigin[ origin ] )
 			.flatMap( ( origin ) =>
 				presetByOrigin[ origin ].map( ( preset ) =>
-					renderToString(
-						<PresetDuotoneFilter
-							preset={ preset }
-							key={ preset.slug }
-						/>
+					getDuotoneFilter(
+						`wp-duotone-${ preset.slug }`,
+						preset.colors
 					)
 				)
 			)
@@ -307,13 +306,15 @@ const getFeatureDeclarations = ( selectors, styles ) => {
  *
  * @param {Object}  tree                A theme.json tree containing layout definitions.
  *
+ * @param {boolean} isTemplate          Whether the entity being edited is a full template or a pattern.
  * @return {Array} An array of style declarations.
  */
 export function getStylesDeclarations(
 	blockStyles = {},
 	selector = '',
 	useRootPaddingAlign,
-	tree = {}
+	tree = {},
+	isTemplate = true
 ) {
 	const isRoot = ROOT_BLOCK_SELECTOR === selector;
 	const output = Object.entries( STYLE_PROPERTY ).reduce(
@@ -386,10 +387,10 @@ export function getStylesDeclarations(
 	// This is temporary as we absorb more and more styles into the engine.
 	const extraRules = getCSSRules( blockStyles );
 	extraRules.forEach( ( rule ) => {
-		// Don't output padding properties if padding variables are set.
+		// Don't output padding properties if padding variables are set or if we're not editing a full template.
 		if (
 			isRoot &&
-			useRootPaddingAlign &&
+			( useRootPaddingAlign || ! isTemplate ) &&
 			rule.key.startsWith( 'padding' )
 		) {
 			return;
@@ -757,7 +758,8 @@ export const toStyles = (
 	blockSelectors,
 	hasBlockGapSupport,
 	hasFallbackGapSupport,
-	disableLayoutStyles = false
+	disableLayoutStyles = false,
+	isTemplate = true
 ) => {
 	const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
 	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
@@ -782,16 +784,17 @@ export const toStyles = (
 		ruleset += ` --wp--style--global--wide-size: ${ wideSize };`;
 	}
 
-	if ( useRootPaddingAlign ) {
+	// Root padding styles should only be output for full templates, not patterns or template parts.
+	if ( useRootPaddingAlign && isTemplate ) {
 		/*
 		 * These rules reproduce the ones from https://github.com/WordPress/gutenberg/blob/79103f124925d1f457f627e154f52a56228ed5ad/lib/class-wp-theme-json-gutenberg.php#L2508
 		 * almost exactly, but for the selectors that target block wrappers in the front end. This code only runs in the editor, so it doesn't need those selectors.
 		 */
 		ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }
 			.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
-			.has-global-padding :where(.has-global-padding) { padding-right: 0; padding-left: 0; }
+			.has-global-padding :where(.has-global-padding:not(.wp-block-block)) { padding-right: 0; padding-left: 0; }
 			.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
-			.has-global-padding :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; }
+			.has-global-padding :where(.has-global-padding:not(.wp-block-block)) > .alignfull { margin-right: 0; margin-left: 0; }
 			.has-global-padding > .alignfull:where(:not(.has-global-padding):not(.is-layout-flex):not(.is-layout-grid)) > :where(.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
 			.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where(.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0;`;
 	}
@@ -909,7 +912,8 @@ export const toStyles = (
 				styles,
 				selector,
 				useRootPaddingAlign,
-				tree
+				tree,
+				isTemplate
 			);
 			if ( declarations?.length ) {
 				ruleset += `${ selector }{${ declarations.join( ';' ) };}`;
@@ -1152,6 +1156,10 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 		return !! getSettings().disableLayoutStyles;
 	} );
 
+	const blockContext = useContext( BlockContext );
+
+	const isTemplate = blockContext?.templateSlug !== undefined;
+
 	const getBlockStyles = useSelect( ( select ) => {
 		return select( blocksStore ).getBlockStyles;
 	}, [] );
@@ -1176,7 +1184,8 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 			blockSelectors,
 			hasBlockGapSupport,
 			hasFallbackGapSupport,
-			disableLayoutStyles
+			disableLayoutStyles,
+			isTemplate
 		);
 		const svgs = toSvgFilters( mergedConfig, blockSelectors );
 

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

@@ -415,7 +415,6 @@ export function areGlobalStyleConfigsEqual( original, variation ) {
 	}
 	return (
 		fastDeepEqual( original?.styles, variation?.styles ) &&
-		fastDeepEqual( original?.settings, variation?.settings ) &&
-		fastDeepEqual( original?.behaviors, variation?.behaviors )
+		fastDeepEqual( original?.settings, variation?.settings )
 	);
 }

package/src/components/iframe/index.js

@@ -31,6 +31,30 @@ import { useWritingFlow } from '../writing-flow';
 import { useCompatibilityStyles } from './use-compatibility-styles';
 import { store as blockEditorStore } from '../../store';
 
+function bubbleEvent( event, Constructor, frame ) {
+	const init = {};
+
+	for ( const key in event ) {
+		init[ key ] = event[ key ];
+	}
+
+	if ( event instanceof frame.ownerDocument.defaultView.MouseEvent ) {
+		const rect = frame.getBoundingClientRect();
+		init.clientX += rect.left;
+		init.clientY += rect.top;
+	}
+
+	const newEvent = new Constructor( event.type, init );
+	if ( init.defaultPrevented ) {
+		newEvent.preventDefault();
+	}
+	const cancelled = ! frame.dispatchEvent( newEvent );
+
+	if ( cancelled ) {
+		event.preventDefault();
+	}
+}
+
 /**
  * Bubbles some event types (keydown, keypress, and dragover) to parent document
  * document to ensure that the keyboard shortcuts and drag and drop work.
@@ -39,42 +63,33 @@ import { store as blockEditorStore } from '../../store';
  * should be context dependent, e.g. actions on blocks like Cmd+A should not
  * work globally outside the block editor.
  *
- * @param {Document} doc Document to attach listeners to.
+ * @param {Document} iframeDocument Document to attach listeners to.
  */
-function bubbleEvents( doc ) {
-	const { defaultView } = doc;
-	const { frameElement } = defaultView;
-
-	function bubbleEvent( event ) {
-		const prototype = Object.getPrototypeOf( event );
-		const constructorName = prototype.constructor.name;
-		const Constructor = window[ constructorName ];
-
-		const init = {};
-
-		for ( const key in event ) {
-			init[ key ] = event[ key ];
+function useBubbleEvents( iframeDocument ) {
+	return useRefEffect( ( body ) => {
+		const { defaultView } = iframeDocument;
+		if ( ! defaultView ) {
+			return;
 		}
-
-		if ( event instanceof defaultView.MouseEvent ) {
-			const rect = frameElement.getBoundingClientRect();
-			init.clientX += rect.left;
-			init.clientY += rect.top;
-		}
-
-		const newEvent = new Constructor( event.type, init );
-		const cancelled = ! frameElement.dispatchEvent( newEvent );
-
-		if ( cancelled ) {
-			event.preventDefault();
+		const { frameElement } = defaultView;
+		const eventTypes = [ 'dragover', 'mousemove' ];
+		const handlers = {};
+		for ( const name of eventTypes ) {
+			handlers[ name ] = ( event ) => {
+				const prototype = Object.getPrototypeOf( event );
+				const constructorName = prototype.constructor.name;
+				const Constructor = window[ constructorName ];
+				bubbleEvent( event, Constructor, frameElement );
+			};
+			body.addEventListener( name, handlers[ name ] );
 		}
-	}
 
-	const eventTypes = [ 'dragover', 'mousemove' ];
-
-	for ( const name of eventTypes ) {
-		doc.addEventListener( name, bubbleEvent );
-	}
+		return () => {
+			for ( const name of eventTypes ) {
+				body.removeEventListener( name, handlers[ name ] );
+			}
+		};
+	} );
 }
 
 function Iframe( {
@@ -117,7 +132,6 @@ function Iframe( {
 			const { documentElement } = contentDocument;
 			iFrameDocument = contentDocument;
 
-			bubbleEvents( contentDocument );
 			clearerRef( documentElement );
 
 			// Ideally ALL classes that are added through get_body_class should
@@ -182,6 +196,7 @@ function Iframe( {
 
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
+		useBubbleEvents( iframeDocument ),
 		contentRef,
 		clearerRef,
 		writingFlowRef,
@@ -222,9 +237,11 @@ function Iframe( {
 	return (
 		<>
 			{ tabIndex >= 0 && before }
+			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 			<iframe
 				{ ...props }
 				style={ {
+					border: 0,
 					...props.style,
 					height: expand ? contentHeight : props.style?.height,
 					marginTop:
@@ -248,9 +265,31 @@ function Iframe( {
 				// content.
 				src={ src }
 				title={ __( 'Editor canvas' ) }
+				onKeyDown={ ( event ) => {
+					// If the event originates from inside the iframe, it means
+					// it bubbled through the portal, but only with React
+					// events. We need to to bubble native events as well,
+					// though by doing so we also trigger another React event,
+					// so we need to stop the propagation of this event to avoid
+					// duplication.
+					if (
+						event.currentTarget.ownerDocument !==
+						event.target.ownerDocument
+					) {
+						event.stopPropagation();
+						bubbleEvent(
+							event,
+							window.KeyboardEvent,
+							event.currentTarget
+						);
+					}
+				} }
 			>
 				{ iframeDocument &&
 					createPortal(
+						// We want to prevent React events from bubbling throught the iframe
+						// we bubble these manually.
+						/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
 						<body
 							ref={ bodyRef }
 							className={ classnames(

package/src/components/image-editor/use-save-image.js

@@ -13,9 +13,6 @@ import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 export default function useSaveImage( {
 	crop,
 	rotation,
-	height,
-	width,
-	aspect,
 	url,
 	id,
 	onSaveImage,
@@ -27,7 +24,7 @@ export default function useSaveImage( {
 	const cancel = useCallback( () => {
 		setIsInProgress( false );
 		onFinishEditing();
-	}, [ setIsInProgress, onFinishEditing ] );
+	}, [ onFinishEditing ] );
 
 	const apply = useCallback( () => {
 		setIsInProgress( true );
@@ -86,16 +83,12 @@ export default function useSaveImage( {
 				onFinishEditing();
 			} );
 	}, [
-		setIsInProgress,
 		crop,
 		rotation,
-		height,
-		width,
-		aspect,
+		id,
 		url,
 		onSaveImage,
 		createErrorNotice,
-		setIsInProgress,
 		onFinishEditing,
 	] );
 

package/src/components/image-editor/use-transform-image.js

@@ -30,10 +30,10 @@ export default function useTransformImage( {
 			setEditedUrl();
 			setRotation( angle );
 			setAspect( defaultAspect );
-			setPosition( {
-				x: -( position.y * naturalAspectRatio ),
-				y: position.x * naturalAspectRatio,
-			} );
+			setPosition( ( prevPosition ) => ( {
+				x: -( prevPosition.y * naturalAspectRatio ),
+				y: prevPosition.x * naturalAspectRatio,
+			} ) );
 			return;
 		}
 
@@ -69,10 +69,10 @@ export default function useTransformImage( {
 				setEditedUrl( URL.createObjectURL( blob ) );
 				setRotation( angle );
 				setAspect( canvas.width / canvas.height );
-				setPosition( {
-					x: -( position.y * naturalAspectRatio ),
-					y: position.x * naturalAspectRatio,
-				} );
+				setPosition( ( prevPosition ) => ( {
+					x: -( prevPosition.y * naturalAspectRatio ),
+					y: prevPosition.x * naturalAspectRatio,
+				} ) );
 			} );
 		}
 
@@ -88,7 +88,7 @@ export default function useTransformImage( {
 		if ( typeof imgCrossOrigin === 'string' ) {
 			el.crossOrigin = imgCrossOrigin;
 		}
-	}, [ rotation, defaultAspect ] );
+	}, [ rotation, defaultAspect, url ] );
 
 	return useMemo(
 		() => ( {

package/src/components/index.js

@@ -5,7 +5,6 @@
 export * from './colors';
 export * from './gradients';
 export * from './font-sizes';
-export * from './duotone';
 export { AlignmentControl, AlignmentToolbar } from './alignment-control';
 export { default as Autocomplete } from './autocomplete';
 export {
@@ -17,6 +16,7 @@ export { default as __experimentalBlockAlignmentMatrixControl } from './block-al
 export { default as BlockBreadcrumb } from './block-breadcrumb';
 export { default as __experimentalUseBlockOverlayActive } from './block-content-overlay';
 export { BlockContextProvider } from './block-context';
+export { default as BlockCanvas } from './block-canvas';
 export {
 	default as BlockControls,
 	BlockFormatControls,

package/src/components/index.native.js

@@ -38,13 +38,13 @@ export {
 } from './rich-text';
 export { default as MediaReplaceFlow } from './media-replace-flow';
 export { default as MediaPlaceholder } from './media-placeholder';
+export { default as MediaUpload } from './media-upload';
 export {
-	default as MediaUpload,
 	MEDIA_TYPE_IMAGE,
 	MEDIA_TYPE_VIDEO,
 	MEDIA_TYPE_AUDIO,
 	MEDIA_TYPE_ANY,
-} from './media-upload';
+} from './media-upload/constants';
 export {
 	default as MediaUploadProgress,
 	MEDIA_UPLOAD_STATE_UPLOADING,

package/src/components/inner-blocks/use-nested-settings-update.js

@@ -1,9 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { useLayoutEffect, useMemo } from '@wordpress/element';
+import { useLayoutEffect, useMemo, useState } from '@wordpress/element';
 import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
+import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
@@ -15,6 +16,14 @@ import { getLayoutType } from '../../layouts';
 
 const pendingSettingsUpdates = new WeakMap();
 
+function useShallowMemo( value ) {
+	const [ prevValue, setPrevValue ] = useState( value );
+	if ( ! isShallowEqual( prevValue, value ) ) {
+		setPrevValue( value );
+	}
+	return prevValue;
+}
+
 /**
  * This hook is a side effect which updates the block-editor store when changes
  * happen to inner block settings. The given props are transformed into a
@@ -70,16 +79,12 @@ export default function useNestedSettingsUpdate(
 		[ clientId ]
 	);
 
-	// Memoize allowedBlocks and prioritisedInnerBlocks based on the contents
-	// of the arrays. Implementors often pass a new array on every render,
+	// Implementors often pass a new array on every render,
 	// and the contents of the arrays are just strings, so the entire array
-	// can be passed as dependencies.
-
-	const _allowedBlocks = useMemo(
-		() => allowedBlocks,
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		allowedBlocks
-	);
+	// can be passed as dependencies but We need to include the length of the array,
+	// otherwise if the arrays change length but the first elements are equal the comparison,
+	// does not works as expected.
+	const _allowedBlocks = useShallowMemo( allowedBlocks );
 
 	const _prioritizedInserterBlocks = useMemo(
 		() => prioritizedInserterBlocks,

package/src/components/inserter/block-patterns-explorer/explorer.js

@@ -10,25 +10,37 @@ import { __ } from '@wordpress/i18n';
  */
 import PatternExplorerSidebar from './sidebar';
 import PatternList from './patterns-list';
+import { usePatternsCategories } from '../block-patterns-tab';
+
+function PatternsExplorer( { initialCategory, rootClientId } ) {
+	const [ searchValue, setSearchValue ] = useState( '' );
+	const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );
 
-function PatternsExplorer( { initialCategory, patternCategories } ) {
-	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ selectedCategory, setSelectedCategory ] = useState(
 		initialCategory?.name
 	);
+
+	const patternCategories = usePatternsCategories(
+		rootClientId,
+		patternSourceFilter
+	);
+
 	return (
 		<div className="block-editor-block-patterns-explorer">
 			<PatternExplorerSidebar
 				selectedCategory={ selectedCategory }
 				patternCategories={ patternCategories }
 				onClickCategory={ setSelectedCategory }
-				filterValue={ filterValue }
-				setFilterValue={ setFilterValue }
+				searchValue={ searchValue }
+				setSearchValue={ setSearchValue }
+				patternSourceFilter={ patternSourceFilter }
+				setPatternSourceFilter={ setPatternSourceFilter }
 			/>
 			<PatternList
-				filterValue={ filterValue }
+				searchValue={ searchValue }
 				selectedCategory={ selectedCategory }
 				patternCategories={ patternCategories }
+				patternSourceFilter={ patternSourceFilter }
 			/>
 		</div>
 	);