@wordpress/block-editor 10.2.0 → 10.3.0

package/src/components/block-tools/insertion-point.js

@@ -17,14 +17,15 @@ import { useReducedMotion } from '@wordpress/compose';
 import Inserter from '../inserter';
 import { store as blockEditorStore } from '../../store';
 import BlockPopoverInbetween from '../block-popover/inbetween';
+import BlockDropZonePopover from '../block-popover/drop-zone';
 
 export const InsertionPointOpenRef = createContext();
 
-function InsertionPointPopover( {
+function InbetweenInsertionPointPopover( {
 	__unstablePopoverSlot,
 	__unstableContentRef,
 } ) {
-	const { selectBlock, hideInsertionPoint } = useDispatch( blockEditorStore );
+	const { selectBlock } = useDispatch( blockEditorStore );
 	const openRef = useContext( InsertionPointOpenRef );
 	const ref = useRef();
 	const {
@@ -33,6 +34,8 @@ function InsertionPointPopover( {
 		nextClientId,
 		rootClientId,
 		isInserterShown,
+		isDistractionFree,
+		isNavigationMode,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockOrder,
@@ -41,6 +44,8 @@ function InsertionPointPopover( {
 			isBlockBeingDragged,
 			getPreviousBlockClientId,
 			getNextBlockClientId,
+			getSettings,
+			isNavigationMode: _isNavigationMode,
 		} = select( blockEditorStore );
 		const insertionPoint = getBlockInsertionPoint();
 		const order = getBlockOrder( insertionPoint.rootClientId );
@@ -60,6 +65,8 @@ function InsertionPointPopover( {
 			_nextClientId = getNextBlockClientId( _nextClientId );
 		}
 
+		const settings = getSettings();
+
 		return {
 			previousClientId: _previousClientId,
 			nextClientId: _nextClientId,
@@ -67,6 +74,8 @@ function InsertionPointPopover( {
 				getBlockListSettings( insertionPoint.rootClientId )
 					?.orientation || 'vertical',
 			rootClientId: insertionPoint.rootClientId,
+			isNavigationMode: _isNavigationMode(),
+			isDistractionFree: settings.isDistractionFree,
 			isInserterShown: insertionPoint?.__unstableWithInserter,
 		};
 	}, [] );
@@ -88,14 +97,6 @@ function InsertionPointPopover( {
 		}
 	}
 
-	function maybeHideInserterPoint( event ) {
-		// Only hide the inserter if it's triggered on the wrapper,
-		// and the inserter is not open.
-		if ( event.target === ref.current && ! openRef.current ) {
-			hideInsertionPoint();
-		}
-	}
-
 	// Define animation variants for the line element.
 	const horizontalLine = {
 		start: {
@@ -149,13 +150,13 @@ function InsertionPointPopover( {
 			...( ! isVertical ? horizontalLine.rest : verticalLine.rest ),
 			opacity: 1,
 			borderRadius: '2px',
-			transition: { delay: isInserterShown ? 0.1 : 0, type: 'tween' },
+			transition: { delay: isInserterShown ? 0.5 : 0, type: 'tween' },
 		},
 		hover: {
 			...( ! isVertical ? horizontalLine.hover : verticalLine.hover ),
 			opacity: 1,
 			borderRadius: '2px',
-			transition: { delay: 0.1, type: 'tween' },
+			transition: { delay: 0.5, type: 'tween' },
 		},
 	};
 
@@ -165,10 +166,14 @@ function InsertionPointPopover( {
 		},
 		rest: {
 			scale: 1,
-			transition: { type: 'tween' },
+			transition: { delay: 0.4, type: 'tween' },
 		},
 	};
 
+	if ( isDistractionFree && ! isNavigationMode ) {
+		return null;
+	}
+
 	const className = classnames(
 		'block-editor-block-list__insertion-point',
 		'is-' + orientation
@@ -195,7 +200,6 @@ function InsertionPointPopover( {
 				className={ classnames( className, {
 					'is-with-inserter': isInserterShown,
 				} ) }
-				onHoverEnd={ maybeHideInserterPoint }
 			>
 				<motion.div
 					variants={ lineVariants }
@@ -229,9 +233,30 @@ function InsertionPointPopover( {
 }
 
 export default function InsertionPoint( props ) {
-	const isVisible = useSelect( ( select ) => {
-		return select( blockEditorStore ).isBlockInsertionPointVisible();
+	const { insertionPoint, isVisible } = useSelect( ( select ) => {
+		const { getBlockInsertionPoint, isBlockInsertionPointVisible } =
+			select( blockEditorStore );
+		return {
+			insertionPoint: getBlockInsertionPoint(),
+			isVisible: isBlockInsertionPointVisible(),
+		};
 	}, [] );
 
-	return isVisible && <InsertionPointPopover { ...props } />;
+	if ( ! isVisible ) {
+		return null;
+	}
+
+	/**
+	 * Render a popover that overlays the block when the desired operation is to replace it.
+	 * Otherwise, render a popover in between blocks for the indication of inserting between them.
+	 */
+	return insertionPoint.operation === 'replace' ? (
+		<BlockDropZonePopover
+			// Force remount to trigger the animation.
+			key={ `${ insertionPoint.rootClientId }-${ insertionPoint.index }` }
+			{ ...props }
+		/>
+	) : (
+		<InbetweenInsertionPointPopover { ...props } />
+	);
 }

package/src/components/block-tools/selected-block-popover.js

@@ -36,6 +36,7 @@ function selector( select ) {
 		isMultiSelecting: isMultiSelecting(),
 		isTyping: isTyping(),
 		hasFixedToolbar: getSettings().hasFixedToolbar,
+		isDistractionFree: getSettings().isDistractionFree,
 		lastClientId: hasMultiSelection()
 			? getLastMultiSelectedBlockClientId()
 			: null,
@@ -46,6 +47,7 @@ function SelectedBlockPopover( {
 	clientId,
 	rootClientId,
 	isEmptyDefaultBlock,
+	showContents, // we may need to mount an empty popover because we reuse
 	capturingClientId,
 	__unstablePopoverSlot,
 	__unstableContentRef,
@@ -55,6 +57,7 @@ function SelectedBlockPopover( {
 		isMultiSelecting,
 		isTyping,
 		hasFixedToolbar,
+		isDistractionFree,
 		lastClientId,
 	} = useSelect( selector, [] );
 	const isInsertionPointVisible = useSelect(
@@ -94,6 +97,7 @@ function SelectedBlockPopover( {
 		editorMode === 'edit' &&
 		! shouldShowContextualToolbar &&
 		! hasFixedToolbar &&
+		! isDistractionFree &&
 		! isEmptyDefaultBlock;
 
 	useShortcut(
@@ -136,7 +140,7 @@ function SelectedBlockPopover( {
 			resize={ false }
 			{ ...popoverProps }
 		>
-			{ shouldShowContextualToolbar && (
+			{ shouldShowContextualToolbar && showContents && (
 				<BlockContextualToolbar
 					// If the toolbar is being shown because of being forced
 					// it should focus the toolbar right after the mount.
@@ -169,6 +173,8 @@ function wrapperSelector( select ) {
 		getBlockRootClientId,
 		getBlock,
 		getBlockParents,
+		getSettings,
+		isNavigationMode: _isNavigationMode,
 		__experimentalGetBlockListSettingsForBlocks,
 	} = select( blockEditorStore );
 
@@ -195,10 +201,14 @@ function wrapperSelector( select ) {
 				?.__experimentalCaptureToolbars
 	);
 
+	const settings = getSettings();
+
 	return {
 		clientId,
 		rootClientId: getBlockRootClientId( clientId ),
 		name,
+		isDistractionFree: settings.isDistractionFree,
+		isNavigationMode: _isNavigationMode(),
 		isEmptyDefaultBlock:
 			name && isUnmodifiedDefaultBlock( { name, attributes } ),
 		capturingClientId,
@@ -221,6 +231,8 @@ export default function WrappedBlockPopover( {
 		name,
 		isEmptyDefaultBlock,
 		capturingClientId,
+		isDistractionFree,
+		isNavigationMode,
 	} = selected;
 
 	if ( ! name ) {
@@ -232,6 +244,7 @@ export default function WrappedBlockPopover( {
 			clientId={ clientId }
 			rootClientId={ rootClientId }
 			isEmptyDefaultBlock={ isEmptyDefaultBlock }
+			showContents={ ! isDistractionFree || isNavigationMode }
 			capturingClientId={ capturingClientId }
 			__unstablePopoverSlot={ __unstablePopoverSlot }
 			__unstableContentRef={ __unstableContentRef }

package/src/components/button-block-appender/style.scss

@@ -36,8 +36,9 @@
 .block-list-appender:only-child {
 	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
 	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > &,
-	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > &,
-	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > & {
+	// Legacy groups have an inner container so need to be targeted separately
+	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > &,
+	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > & {
 		pointer-events: none;
 
 		&::after {
@@ -48,6 +49,7 @@
 			bottom: 0;
 			left: 0;
 			pointer-events: none;
+			border: $border-width dashed currentColor;
 			@include placeholder-style();
 		}
 

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -118,67 +118,61 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
 }
 
 <div
-  className="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
+  class="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
 >
   <div
-    className="components-base-control__field emotion-2 emotion-3"
+    class="components-base-control__field emotion-2 emotion-3"
   >
     <fieldset
-      className="block-editor-color-gradient-control__fieldset"
+      class="block-editor-color-gradient-control__fieldset"
     >
       <div
-        className="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
-        data-wp-c16t={true}
+        class="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
+        data-wp-c16t="true"
         data-wp-component="VStack"
       >
         <legend>
           <div
-            className="block-editor-color-gradient-control__color-indicator"
+            class="block-editor-color-gradient-control__color-indicator"
           >
             <span
-              className="components-base-control__label emotion-6 emotion-7"
+              class="components-base-control__label emotion-6 emotion-7"
             >
               Test Color
             </span>
           </div>
         </legend>
         <div
-          className="block-editor-color-gradient-control__panel"
+          class="block-editor-color-gradient-control__panel"
         >
           <div
-            className="components-flex components-h-stack components-v-stack emotion-8 emotion-5"
-            data-wp-c16t={true}
+            class="components-flex components-h-stack components-v-stack emotion-8 emotion-5"
+            data-wp-c16t="true"
             data-wp-component="VStack"
           >
             <div
-              className="components-dropdown"
-              tabIndex="-1"
+              class="components-dropdown"
+              tabindex="-1"
             >
               <button
-                aria-expanded={false}
+                aria-expanded="false"
                 aria-haspopup="true"
                 aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
-                className="components-flex components-color-palette__custom-color emotion-10 emotion-5"
-                data-wp-c16t={true}
+                class="components-flex components-color-palette__custom-color emotion-10 emotion-5"
+                data-wp-c16t="true"
                 data-wp-component="Flex"
-                onClick={[Function]}
-                style={
-                  Object {
-                    "background": "#f00",
-                    "color": "#000",
-                  }
-                }
+                style="background: rgb(255, 0, 0); color: rgb(0, 0, 0);"
               >
                 <span
-                  className="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-13 emotion-5"
-                  data-wp-c16t={true}
+                  class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-13 emotion-5"
+                  data-wp-c16t="true"
                   data-wp-component="FlexItem"
                 >
                   red
                 </span>
                 <span
-                  className="components-flex-item components-color-palette__custom-color-value emotion-15 emotion-5"
-                  data-wp-c16t={true}
+                  class="components-flex-item components-color-palette__custom-color-value emotion-15 emotion-5"
+                  data-wp-c16t="true"
                   data-wp-component="FlexItem"
                 >
                   f00
@@ -186,40 +180,28 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
               </button>
             </div>
             <div
-              className="components-circular-option-picker"
+              class="components-circular-option-picker"
             >
               <div
-                className="components-circular-option-picker__swatches"
+                class="components-circular-option-picker__swatches"
               >
                 <div
-                  className="components-circular-option-picker__option-wrapper"
+                  class="components-circular-option-picker__option-wrapper"
                 >
                   <button
-                    aria-describedby={null}
                     aria-label="Color: red"
-                    aria-pressed={true}
-                    className="components-button components-circular-option-picker__option is-pressed"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                    style={
-                      Object {
-                        "backgroundColor": "#f00",
-                        "color": "#f00",
-                      }
-                    }
+                    aria-pressed="true"
+                    class="components-button components-circular-option-picker__option is-pressed"
+                    style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
                     type="button"
                   />
                   <svg
-                    aria-hidden={true}
+                    aria-hidden="true"
                     fill="#000"
-                    focusable={false}
-                    height={24}
+                    focusable="false"
+                    height="24"
                     viewBox="0 0 24 24"
-                    width={24}
+                    width="24"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
@@ -229,12 +211,10 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                 </div>
               </div>
               <div
-                className="components-circular-option-picker__custom-clear-wrapper"
+                class="components-circular-option-picker__custom-clear-wrapper"
               >
                 <button
-                  aria-describedby={null}
-                  className="components-button components-circular-option-picker__clear is-tertiary"
-                  onClick={[Function]}
+                  class="components-button components-circular-option-picker__clear is-tertiary"
                   type="button"
                 >
                   Clear

package/src/components/color-palette/test/control.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { create, act } from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -12,20 +12,16 @@ const noop = () => {};
 
 describe( 'ColorPaletteControl', () => {
 	it( 'matches the snapshot', async () => {
-		let root;
+		const { container } = render(
+			<ColorPaletteControl
+				label="Test Color"
+				value="#f00"
+				colors={ [ { color: '#f00', name: 'red' } ] }
+				disableCustomColors={ false }
+				onChange={ noop }
+			/>
+		);
 
-		await act( async () => {
-			root = create(
-				<ColorPaletteControl
-					label="Test Color"
-					value="#f00"
-					colors={ [ { color: '#f00', name: 'red' } ] }
-					disableCustomColors={ false }
-					onChange={ noop }
-				/>
-			);
-		} );
-
-		expect( root.toJSON() ).toMatchSnapshot();
+		expect( container.firstChild ).toMatchSnapshot();
 	} );
 } );

package/src/components/colors-gradients/control.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { every, isEmpty } from 'lodash';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -180,7 +180,7 @@ function ColorGradientControlSelect( props ) {
 
 function ColorGradientControl( props ) {
 	if (
-		every( colorsAndGradientKeys, ( key ) => props.hasOwnProperty( key ) )
+		colorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )
 	) {
 		return <ColorGradientControlInner { ...props } />;
 	}

package/src/components/colors-gradients/panel-color-gradient-settings.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { every, isEmpty } from 'lodash';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -50,8 +50,7 @@ export const PanelColorGradientSettingsInner = ( {
 		isEmpty( gradients ) &&
 		disableCustomColors &&
 		disableCustomGradients &&
-		every(
-			settings,
+		settings?.every(
 			( setting ) =>
 				isEmpty( setting.colors ) &&
 				isEmpty( setting.gradients ) &&
@@ -137,7 +136,7 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => {
 
 const PanelColorGradientSettings = ( props ) => {
 	if (
-		every( colorsAndGradientKeys, ( key ) => props.hasOwnProperty( key ) )
+		colorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )
 	) {
 		return <PanelColorGradientSettingsInner { ...props } />;
 	}

package/src/components/colors-gradients/test/control.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
-import { create, act } from 'react-test-renderer';
 
 /**
  * Internal dependencies
@@ -11,15 +10,6 @@ import ColorGradientControl from '../control';
 
 const noop = () => {};
 
-const getButtonWithAriaLabelStartPredicate =
-	( ariaLabelStart ) => ( element ) => {
-		return (
-			element.type === 'button' &&
-			element.props[ 'aria-label' ] &&
-			element.props[ 'aria-label' ].startsWith( ariaLabelStart )
-		);
-	};
-
 describe( 'ColorPaletteControl', () => {
 	it( 'renders tabs if it is possible to select a color and a gradient rendering a color picker at the start', async () => {
 		render(
@@ -64,25 +54,21 @@ describe( 'ColorPaletteControl', () => {
 	} );
 
 	it( 'renders the color picker and does not render tabs if it is only possible to select a color', async () => {
-		let wrapper;
-
-		await act( async () => {
-			wrapper = create(
-				<ColorGradientControl
-					label="Test Color Gradient"
-					colorValue="#f00"
-					colors={ [
-						{ color: '#f00', name: 'red' },
-						{ color: '#0f0', name: 'green' },
-					] }
-					gradients={ [] }
-					disableCustomColors={ false }
-					disableCustomGradients={ true }
-					onColorChange={ noop }
-					onGradientChange={ noop }
-				/>
-			);
-		} );
+		render(
+			<ColorGradientControl
+				label="Test Color Gradient"
+				colorValue="#f00"
+				colors={ [
+					{ color: '#f00', name: 'red' },
+					{ color: '#0f0', name: 'green' },
+				] }
+				gradients={ [] }
+				disableCustomColors={ false }
+				disableCustomGradients={ true }
+				onColorChange={ noop }
+				onGradientChange={ noop }
+			/>
+		);
 
 		// Is not showing the two tab buttons.
 		expect(
@@ -93,43 +79,35 @@ describe( 'ColorPaletteControl', () => {
 		).not.toBeInTheDocument();
 
 		// Is showing the two predefined Colors.
-		expect(
-			wrapper.root.findAll(
-				getButtonWithAriaLabelStartPredicate( 'Color:' )
-			)
-		).toHaveLength( 2 );
+		expect( screen.getAllByLabelText( /^Color:/ ) ).toHaveLength( 2 );
 	} );
 
 	it( 'renders the gradient picker and does not render tabs if it is only possible to select a gradient', async () => {
-		let wrapper;
-
-		await act( async () => {
-			wrapper = create(
-				<ColorGradientControl
-					label="Test Color Gradient"
-					colorValue="#f00"
-					colors={ [] }
-					gradients={ [
-						{
-							gradient:
-								'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%',
-							name: 'Vivid cyan blue to vivid purple',
-							slug: 'vivid-cyan-blue-to-vivid-purple',
-						},
-						{
-							gradient:
-								'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
-							name: 'Light green cyan to vivid green cyan',
-							slug: 'light-green-cyan-to-vivid-green-cyan',
-						},
-					] }
-					disableCustomColors={ true }
-					disableCustomGradients={ false }
-					onColorChange={ noop }
-					onGradientChange={ noop }
-				/>
-			);
-		} );
+		render(
+			<ColorGradientControl
+				label="Test Color Gradient"
+				colorValue="#f00"
+				colors={ [] }
+				gradients={ [
+					{
+						gradient:
+							'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%',
+						name: 'Vivid cyan blue to vivid purple',
+						slug: 'vivid-cyan-blue-to-vivid-purple',
+					},
+					{
+						gradient:
+							'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
+						name: 'Light green cyan to vivid green cyan',
+						slug: 'light-green-cyan-to-vivid-green-cyan',
+					},
+				] }
+				disableCustomColors={ true }
+				disableCustomGradients={ false }
+				onColorChange={ noop }
+				onGradientChange={ noop }
+			/>
+		);
 
 		// Is not showing the two tab buttons.
 		expect(
@@ -140,22 +118,16 @@ describe( 'ColorPaletteControl', () => {
 		).not.toBeInTheDocument();
 
 		// Is showing the two predefined Gradients.
-		expect(
-			wrapper.root.findAll(
-				getButtonWithAriaLabelStartPredicate( 'Gradient:' )
-			)
-		).toHaveLength( 2 );
+		expect( screen.getAllByLabelText( /^Gradient:/ ) ).toHaveLength( 2 );
 
 		// Is showing the custom gradient picker.
 		expect(
-			wrapper.root.findAll(
-				( element ) =>
-					element.props &&
-					element.props.className &&
-					element.props.className.includes(
-						'components-custom-gradient-picker'
-					)
-			).length
-		).toBeGreaterThanOrEqual( 1 );
+			screen.getAllByRole( 'button', {
+				expanded: false,
+				name: /^Gradient control point at position/,
+			} )[ 0 ]
+		).toHaveClass(
+			'components-custom-gradient-picker__control-point-button'
+		);
 	} );
 } );