@wordpress/block-editor 11.8.0 → 12.1.0

package/src/components/preview-options/index.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { useViewportMatch } from '@wordpress/compose';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { check } from '@wordpress/icons';
+import { check, desktop, mobile, tablet } from '@wordpress/icons';
 
 export default function PreviewOptions( {
 	children,
@@ -38,13 +38,20 @@ export default function PreviewOptions( {
 	const menuProps = {
 		'aria-label': __( 'View options' ),
 	};
+
+	const deviceIcons = {
+		mobile,
+		tablet,
+		desktop,
+	};
+
 	return (
 		<DropdownMenu
 			className="block-editor-post-preview__dropdown"
 			popoverProps={ popoverProps }
 			toggleProps={ toggleProps }
 			menuProps={ menuProps }
-			icon={ null }
+			icon={ deviceIcons[ deviceType.toLowerCase() ] }
 		>
 			{ () => (
 				<>

package/src/components/spacing-sizes-control/spacing-input-control.js

@@ -74,6 +74,7 @@ export default function SpacingInputControl( {
 
 	const previousValue = usePrevious( value );
 	if (
+		!! value &&
 		previousValue !== value &&
 		! isValueSpacingPreset( value ) &&
 		showCustomValueControl !== true

package/src/components/url-input/index.js

@@ -309,11 +309,10 @@ class URLInput extends Component {
 
 				// Submitting while loading should trigger onSubmit.
 				case ENTER: {
-					event.preventDefault();
 					if ( this.props.onSubmit ) {
+						event.preventDefault();
 						this.props.onSubmit( null, event );
 					}
-
 					break;
 				}
 			}

package/src/components/url-popover/test/__snapshots__/index.js.snap

@@ -5,7 +5,7 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
   <span>
     <div
       class="components-popover block-editor-url-popover is-positioned"
-      style="position: absolute; top: 0px; left: 0px; transform: none;"
+      style="position: absolute; top: 0px; left: 0px; transform: translateZ(0);"
       tabindex="-1"
     >
       <div
@@ -53,7 +53,7 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]
   <span>
     <div
       class="components-popover block-editor-url-popover is-positioned"
-      style="position: absolute; top: 0px; left: 0px; transform: none;"
+      style="position: absolute; top: 0px; left: 0px; transform: translateZ(0);"
       tabindex="-1"
     >
       <div
@@ -108,7 +108,7 @@ exports[`URLPopover matches the snapshot when there are no settings 1`] = `
   <span>
     <div
       class="components-popover block-editor-url-popover is-positioned"
-      style="position: absolute; top: 0px; left: 0px; transform: none;"
+      style="position: absolute; top: 0px; left: 0px; transform: translateZ(0);"
       tabindex="-1"
     >
       <div

package/src/hooks/align.js

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

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/duotone.js

@@ -23,6 +23,7 @@ import { useSelect } from '@wordpress/data';
  */
 import {
 	BlockControls,
+	InspectorControls,
 	__experimentalDuotoneControl as DuotoneControl,
 	useSetting,
 } from '../components';
@@ -34,7 +35,9 @@ import {
 } from '../components/duotone';
 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';
 
 const EMPTY_ARRAY = [];
 
@@ -106,9 +109,10 @@ export function getDuotonePresetFromColors( colors, duotonePalette ) {
 	return preset ? `var:preset|duotone|${ preset.slug }` : undefined;
 }
 
-function DuotonePanel( { attributes, setAttributes } ) {
+function DuotonePanel( { attributes, setAttributes, name } ) {
 	const style = attributes?.style;
 	const duotoneStyle = style?.color?.duotone;
+	const settings = useBlockSettings( name );
 
 	const duotonePalette = useMultiOriginPresets( {
 		presetSetting: 'color.duotone',
@@ -132,30 +136,48 @@ function DuotonePanel( { attributes, setAttributes } ) {
 		: duotoneStyle;
 
 	return (
-		<BlockControls group="block" __experimentalShareWithChildBlocks>
-			<DuotoneControl
-				duotonePalette={ duotonePalette }
-				colorPalette={ colorPalette }
-				disableCustomDuotone={ disableCustomDuotone }
-				disableCustomColors={ disableCustomColors }
-				value={ duotonePresetOrColors }
-				onChange={ ( newDuotone ) => {
-					const maybePreset = getDuotonePresetFromColors(
-						newDuotone,
-						duotonePalette
-					);
-
-					const newStyle = {
-						...style,
-						color: {
-							...style?.color,
-							duotone: maybePreset ?? newDuotone, // use preset or fallback to custom colors.
-						},
-					};
-					setAttributes( { style: newStyle } );
-				} }
-			/>
-		</BlockControls>
+		<>
+			<InspectorControls group="filter">
+				<StylesFiltersPanel
+					value={ { filter: { duotone: duotonePresetOrColors } } }
+					onChange={ ( newDuotone ) => {
+						const newStyle = {
+							...style,
+							color: {
+								...newDuotone?.filter,
+							},
+						};
+						setAttributes( { style: newStyle } );
+					} }
+					settings={ settings }
+				/>
+			</InspectorControls>
+			<BlockControls group="block" __experimentalShareWithChildBlocks>
+				<DuotoneControl
+					duotonePalette={ duotonePalette }
+					colorPalette={ colorPalette }
+					disableCustomDuotone={ disableCustomDuotone }
+					disableCustomColors={ disableCustomColors }
+					value={ duotonePresetOrColors }
+					onChange={ ( newDuotone ) => {
+						const maybePreset = getDuotonePresetFromColors(
+							newDuotone,
+							duotonePalette
+						);
+
+						const newStyle = {
+							...style,
+							color: {
+								...style?.color,
+								duotone: maybePreset ?? newDuotone, // use preset or fallback to custom colors.
+							},
+						};
+						setAttributes( { style: newStyle } );
+					} }
+					settings={ settings }
+				/>
+			</BlockControls>
+		</>
 	);
 }
 

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

@@ -429,7 +429,8 @@ export const withLayoutStyles = createHigherOrderComponent(
 				/>
 			</>
 		);
-	}
+	},
+	'withLayoutStyles'
 );
 
 /**
@@ -484,7 +485,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(

package/src/hooks/test/anchor.js

@@ -0,0 +1,113 @@
+/**
+ * WordPress dependencies
+ */
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import '../anchor';
+
+const noop = () => {};
+
+describe( 'anchor', () => {
+	const blockSettings = {
+		save: noop,
+		category: 'text',
+		title: 'block title',
+	};
+
+	describe( 'addAttribute()', () => {
+		const registerBlockType = applyFilters.bind(
+			null,
+			'blocks.registerBlockType'
+		);
+
+		it( 'should do nothing if the block settings do not define anchor support', () => {
+			const settings = registerBlockType( blockSettings );
+
+			expect( settings.attributes ).toBe( undefined );
+		} );
+
+		it( 'should assign a new anchor attribute', () => {
+			const settings = registerBlockType( {
+				...blockSettings,
+				supports: {
+					anchor: true,
+				},
+			} );
+
+			expect( settings.attributes ).toHaveProperty( 'anchor' );
+		} );
+
+		it( 'should not override attributes defined in settings', () => {
+			const settings = registerBlockType( {
+				...blockSettings,
+				supports: {
+					anchor: true,
+				},
+				attributes: {
+					anchor: {
+						type: 'string',
+						default: 'testAnchor',
+					},
+				},
+			} );
+
+			expect( settings.attributes.anchor ).toEqual( {
+				type: 'string',
+				default: 'testAnchor',
+			} );
+		} );
+	} );
+
+	describe( 'addSaveProps', () => {
+		const getSaveContentExtraProps = applyFilters.bind(
+			null,
+			'blocks.getSaveContent.extraProps'
+		);
+
+		it( 'should do nothing if the block settings do not define anchor support', () => {
+			const attributes = { anchor: 'foo' };
+			const extraProps = getSaveContentExtraProps(
+				{},
+				blockSettings,
+				attributes
+			);
+
+			expect( extraProps ).not.toHaveProperty( 'id' );
+		} );
+
+		it( 'should inject anchor attribute ID', () => {
+			const attributes = { anchor: 'foo' };
+			const extraProps = getSaveContentExtraProps(
+				{},
+				{
+					...blockSettings,
+					supports: {
+						anchor: true,
+					},
+				},
+				attributes
+			);
+
+			expect( extraProps.id ).toBe( 'foo' );
+		} );
+
+		it( 'should remove an anchor attribute ID when field is cleared', () => {
+			const attributes = { anchor: '' };
+			const extraProps = getSaveContentExtraProps(
+				{},
+				{
+					...blockSettings,
+					supports: {
+						anchor: true,
+					},
+				},
+				attributes
+			);
+
+			expect( extraProps.id ).toBe( null );
+		} );
+	} );
+} );

package/src/hooks/test/color.js

@@ -12,17 +12,8 @@ import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
  * Internal dependencies
  */
 import BlockEditorProvider from '../../components/provider';
-import { cleanEmptyObject } from '../utils';
 import { withColorPaletteStyles } from '../color';
 
-describe( 'cleanEmptyObject', () => {
-	it( 'should remove nested keys', () => {
-		expect( cleanEmptyObject( { color: { text: undefined } } ) ).toEqual(
-			undefined
-		);
-	} );
-} );
-
 describe( 'withColorPaletteStyles', () => {
 	const settings = {
 		__experimentalFeatures: {