@wordpress/block-editor 8.0.12-next.33ec3857e2.0 → 8.0.15

package/src/components/block-styles/test/{utils.js → index.js}

@@ -1,12 +1,7 @@
 /**
  * Internal dependencies
  */
-import {
-	getActiveStyle,
-	getDefaultStyle,
-	getRenderedStyles,
-	replaceActiveStyle,
-} from '../utils';
+import { getActiveStyle, replaceActiveStyle } from '../utils';
 
 describe( 'getActiveStyle', () => {
 	it( 'Should return the undefined if no active style', () => {
@@ -79,57 +74,3 @@ describe( 'replaceActiveStyle', () => {
 		);
 	} );
 } );
-
-describe( 'getRenderedStyles', () => {
-	it( 'Should return an empty array if styles is falsy', () => {
-		expect( getRenderedStyles( null ) ).toEqual( [] );
-	} );
-
-	it( 'Should return an empty array if styles array is empty', () => {
-		expect( getRenderedStyles( [] ) ).toEqual( [] );
-	} );
-
-	it( 'Should return styles collection if there is a default', () => {
-		const styles = [
-			{ name: 'hazlenut' },
-			{ name: 'cashew', isDefault: true },
-		];
-
-		expect( getRenderedStyles( styles ) ).toEqual( styles );
-	} );
-
-	it( 'Should add a default item to the styles collection if there is no default', () => {
-		const styles = [ { name: 'pistachio' }, { name: 'peanut' } ];
-		const defaultStyle = {
-			name: 'default',
-			label: 'Default',
-			isDefault: true,
-		};
-
-		expect( getRenderedStyles( styles ) ).toEqual( [
-			defaultStyle,
-			...styles,
-		] );
-	} );
-} );
-
-describe( 'getDefaultStyle', () => {
-	it( 'Should return default style object', () => {
-		const styles = [
-			{ name: 'trout' },
-			{ name: 'bream', isDefault: true },
-		];
-
-		expect( getDefaultStyle( styles ) ).toEqual( styles[ 1 ] );
-	} );
-
-	it( 'Should return `undefined` if there is no default', () => {
-		const styles = [ { name: 'snapper' }, { name: 'perch' } ];
-
-		expect( getDefaultStyle( styles ) ).toBeUndefined();
-	} );
-
-	it( 'Should return `undefined` if `styles` argument is no passed', () => {
-		expect( getDefaultStyle() ).toBeUndefined();
-	} );
-} );

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

@@ -6,7 +6,6 @@ import { find } from 'lodash';
  * WordPress dependencies
  */
 import TokenList from '@wordpress/token-list';
-import { _x } from '@wordpress/i18n';
 
 /**
  * Returns the active style from the given className.
@@ -52,41 +51,3 @@ export function replaceActiveStyle( className, activeStyle, newStyle ) {
 
 	return list.value;
 }
-
-/**
- * Returns a collection of styles that can be represented on the frontend.
- * The function checks a style collection for a default style. If none is found, it adds one to
- * act as a fallback for when there is no active style applied to a block. The default item also serves
- * as a switch on the frontend to deactivate non-default styles.
- *
- * @param {Array}           styles Block style variations.
- *
- * @return {Array<Object?>}        The style collection.
- */
-export function getRenderedStyles( styles ) {
-	if ( ! styles || styles.length === 0 ) {
-		return [];
-	}
-
-	return getDefaultStyle( styles )
-		? styles
-		: [
-				{
-					name: 'default',
-					label: _x( 'Default', 'block style' ),
-					isDefault: true,
-				},
-				...styles,
-		  ];
-}
-
-/**
- * Returns a style object from a collection of styles where that style object is the default block style.
- *
- * @param {Array}    styles Block style variations.
- *
- * @return {Object?}        The default style object, if found.
- */
-export function getDefaultStyle( styles ) {
-	return find( styles, 'isDefault' );
-}

package/src/components/block-switcher/block-styles-menu.js

@@ -3,21 +3,56 @@
  */
 import { __ } from '@wordpress/i18n';
 import { MenuGroup } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import {
+	cloneBlock,
+	getBlockFromExample,
+	store as blocksStore,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
-import BlockStylesMenuItems from '../block-styles/menu-items';
+import BlockStyles from '../block-styles';
+import PreviewBlockPopover from './preview-block-popover';
 
 export default function BlockStylesMenu( { hoveredBlock, onSwitch } ) {
-	const { clientId } = hoveredBlock;
+	const { name, clientId } = hoveredBlock;
+	const [ hoveredClassName, setHoveredClassName ] = useState();
+	const blockType = useSelect(
+		( select ) => select( blocksStore ).getBlockType( name ),
+		[ name ]
+	);
 
 	return (
 		<MenuGroup
 			label={ __( 'Styles' ) }
 			className="block-editor-block-switcher__styles__menugroup"
 		>
-			<BlockStylesMenuItems clientId={ clientId } onSwitch={ onSwitch } />
+			{ hoveredClassName && (
+				<PreviewBlockPopover
+					blocks={
+						blockType && blockType.example
+							? getBlockFromExample( blockType.name, {
+									attributes: {
+										...blockType.example.attributes,
+										className: hoveredClassName,
+									},
+									innerBlocks: blockType.example.innerBlocks,
+							  } )
+							: cloneBlock( hoveredBlock, {
+									className: hoveredClassName,
+							  } )
+					}
+				/>
+			) }
+			<BlockStyles
+				clientId={ clientId }
+				onSwitch={ onSwitch }
+				onHoverClassName={ setHoveredClassName }
+				itemRole="menuitem"
+			/>
 		</MenuGroup>
 	);
 }

package/src/components/block-tools/back-compat.js

@@ -22,7 +22,6 @@ export default function BlockToolsBackCompat( { children } ) {
 
 	deprecated( 'wp.components.Popover.Slot name="block-toolbar"', {
 		alternative: 'wp.blockEditor.BlockTools',
-		since: '5.8',
 	} );
 
 	return (

package/src/components/block-tools/block-selection-button.js

@@ -59,7 +59,7 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 				hasBlockMovingClientId,
 				getBlockListSettings,
 			} = select( blockEditorStore );
-			const index = getBlockIndex( clientId, rootClientId );
+			const index = getBlockIndex( clientId );
 			const { name, attributes } = getBlock( clientId );
 			const blockMovingMode = hasBlockMovingClientId();
 			return {
@@ -169,14 +169,8 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 		if ( ( isEnter || isSpace ) && startingBlockClientId ) {
 			const sourceRoot = getBlockRootClientId( startingBlockClientId );
 			const destRoot = getBlockRootClientId( selectedBlockClientId );
-			const sourceBlockIndex = getBlockIndex(
-				startingBlockClientId,
-				sourceRoot
-			);
-			let destinationBlockIndex = getBlockIndex(
-				selectedBlockClientId,
-				destRoot
-			);
+			const sourceBlockIndex = getBlockIndex( startingBlockClientId );
+			let destinationBlockIndex = getBlockIndex( selectedBlockClientId );
 			if (
 				sourceBlockIndex < destinationBlockIndex &&
 				sourceRoot === destRoot

package/src/components/block-tools/index.js

@@ -95,6 +95,17 @@ export default function BlockTools( {
 		} else if (
 			isMatch( 'core/block-editor/delete-multi-selection', event )
 		) {
+			/**
+			 * Check if the target element is a text area, input or
+			 * event.defaultPrevented and return early. In all these
+			 * cases backspace could be handled elsewhere.
+			 */
+			if (
+				[ 'INPUT', 'TEXTAREA' ].includes( event.target.nodeName ) ||
+				event.defaultPrevented
+			) {
+				return;
+			}
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length > 1 ) {
 				event.preventDefault();

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

@@ -32,7 +32,7 @@ function InsertionPointPopover( {
 	__unstablePopoverSlot,
 	__unstableContentRef,
 } ) {
-	const { selectBlock, hideInsertionPoint } = useDispatch( blockEditorStore );
+	const { selectBlock } = useDispatch( blockEditorStore );
 	const openRef = useContext( InsertionPointOpenRef );
 	const ref = useRef();
 	const {
@@ -195,14 +195,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();
-		}
-	}
-
 	// Only show the in-between inserter between blocks, so when there's a
 	// previous and a next element.
 	const showInsertionPointInserter =
@@ -317,7 +309,6 @@ function InsertionPointPopover( {
 				className={ classnames( className, {
 					'is-with-inserter': showInsertionPointInserter,
 				} ) }
-				onHoverEnd={ maybeHideInserterPoint }
 				style={ style }
 			>
 				<motion.div

package/src/components/border-style-control/style.scss

@@ -7,6 +7,7 @@
 
 	.components-border-style-control__buttons {
 		display: inline-flex;
+		margin-bottom: $grid-unit-30;
 
 		.components-button.has-icon {
 			min-width: 30px;

package/src/components/button-block-appender/index.js

@@ -90,7 +90,6 @@ function ButtonBlockAppender(
 export const ButtonBlockerAppender = forwardRef( ( props, ref ) => {
 	deprecated( `wp.blockEditor.ButtonBlockerAppender`, {
 		alternative: 'wp.blockEditor.ButtonBlockAppender',
-		since: '5.9',
 	} );
 
 	return ButtonBlockAppender( props, ref );

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

@@ -7,17 +7,8 @@ import { every, isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
-	__experimentalHStack as HStack,
-	__experimentalSpacer as Spacer,
-	FlexItem,
-	ColorIndicator,
-	PanelBody,
-	Dropdown,
-} from '@wordpress/components';
-import { sprintf, __, isRTL } from '@wordpress/i18n';
+import { PanelBody, ColorIndicator } from '@wordpress/components';
+import { sprintf, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -136,13 +127,6 @@ export const PanelColorGradientSettingsInner = ( {
 		</span>
 	);
 
-	let dropdownPosition;
-	let popoverProps;
-	if ( __experimentalIsRenderedInSidebar ) {
-		dropdownPosition = isRTL() ? 'bottom right' : 'bottom left';
-		popoverProps = { __unstableForcePosition: true };
-	}
-
 	return (
 		<PanelBody
 			className={ classnames(
@@ -152,63 +136,23 @@ export const PanelColorGradientSettingsInner = ( {
 			title={ showTitle ? titleElement : undefined }
 			{ ...props }
 		>
-			<ItemGroup
-				isBordered
-				isSeparated
-				className="block-editor-panel-color-gradient-settings__item-group"
-			>
-				{ settings.map( ( setting, index ) => (
-					<Dropdown
-						position={ dropdownPosition }
-						popoverProps={ popoverProps }
-						className="block-editor-panel-color-gradient-settings__dropdown"
-						key={ index }
-						contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
-						renderToggle={ ( { isOpen, onToggle } ) => {
-							return (
-								<Item
-									onClick={ onToggle }
-									className={ classnames(
-										'block-editor-panel-color-gradient-settings__item',
-										{ 'is-open': isOpen }
-									) }
-								>
-									<HStack justify="flex-start">
-										<ColorIndicator
-											className="block-editor-panel-color-gradient-settings__color-indicator"
-											colorValue={
-												setting.gradientValue ??
-												setting.colorValue
-											}
-										/>
-										<FlexItem>{ setting.label }</FlexItem>
-									</HStack>
-								</Item>
-							);
-						} }
-						renderContent={ () => (
-							<ColorGradientControl
-								showTitle={ false }
-								{ ...{
-									colors,
-									gradients,
-									disableCustomColors,
-									disableCustomGradients,
-									__experimentalHasMultipleOrigins,
-									__experimentalIsRenderedInSidebar,
-									enableAlpha,
-									...setting,
-								} }
-							/>
-						) }
-					/>
-				) ) }
-			</ItemGroup>
-			{ !! children && (
-				<>
-					<Spacer marginY={ 4 } /> { children }
-				</>
-			) }
+			{ settings.map( ( setting, index ) => (
+				<ColorGradientControl
+					showTitle={ showTitle }
+					key={ index }
+					{ ...{
+						colors,
+						gradients,
+						disableCustomColors,
+						disableCustomGradients,
+						__experimentalHasMultipleOrigins,
+						__experimentalIsRenderedInSidebar,
+						enableAlpha,
+						...setting,
+					} }
+				/>
+			) ) }
+			{ children }
 		</PanelBody>
 	);
 };

package/src/components/colors-gradients/style.scss

@@ -5,14 +5,13 @@
 }
 
 .block-editor-panel-color-gradient-settings {
-	.block-editor-panel-color-gradient-settings__panel-title {
-		display: flex;
-		gap: $grid-unit-15;
+	.component-color-indicator {
+		vertical-align: text-bottom;
+	}
 
+	&__panel-title {
 		.component-color-indicator {
-			width: $grid-unit-15;
-			height: $grid-unit-15;
-			align-self: center;
+			display: inline-block;
 		}
 	}
 
@@ -38,40 +37,4 @@
 	.block-editor-block-inspector & .components-base-control {
 		margin-bottom: inherit;
 	}
-
-	.block-editor-panel-color-gradient-settings__dropdown {
-		display: block;
-	}
-}
-
-.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
-	& > div {
-		width: $sidebar-width;
-	}
-}
-
-@include break-medium() {
-	.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
-		margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 } !important;
-		margin-top: #{ -($grid-unit-60 + $grid-unit-15) } !important;
-	}
 }
-
-.block-editor-panel-color-gradient-settings__dropdown:last-child > div {
-	border-bottom-width: 0;
-}
-
-.block-editor-panel-color-gradient-settings__item {
-	padding-top: $grid-unit-15 !important;
-	padding-bottom: $grid-unit-15 !important;
-	.block-editor-panel-color-gradient-settings__color-indicator {
-		// Show a diagonal line (crossed out) for empty swatches.
-		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
-	}
-
-	&.is-open {
-		background: $gray-100;
-		color: var(--wp-admin-theme-color);
-	}
-}
-

package/src/components/default-block-appender/index.js

@@ -8,9 +8,9 @@ import classnames from 'classnames';
  */
 import { __ } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
+import { getDefaultBlockName } from '@wordpress/blocks';
 import { decodeEntities } from '@wordpress/html-entities';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { ENTER, SPACE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -26,12 +26,13 @@ export const ZWNBSP = '\ufeff';
 
 export function DefaultBlockAppender( {
 	isLocked,
+	isVisible,
 	onAppend,
 	showPrompt,
 	placeholder,
 	rootClientId,
 } ) {
-	if ( isLocked ) {
+	if ( isLocked || ! isVisible ) {
 		return null;
 	}
 
@@ -47,23 +48,20 @@ export function DefaultBlockAppender( {
 		>
 			<p
 				tabIndex="0"
+				// Only necessary for `useCanvasClickRedirect` to consider it
+				// as a target. Ideally it should consider any tabbable target,
+				// but the inserter is rendered in place while it should be
+				// rendered in a popover, just like it does for an empty
+				// paragraph block.
+				contentEditable
+				suppressContentEditableWarning
 				// We want this element to be styled as a paragraph by themes.
 				// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
 				role="button"
-				aria-label={ __( 'Add default block' ) }
+				aria-label={ __( 'Add block' ) }
 				// A wrapping container for this one already has the wp-block className.
 				className="block-editor-default-block-appender__content"
-				onKeyDown={ ( event ) => {
-					if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
-						onAppend();
-					}
-				} }
-				onClick={ () => onAppend() }
-				onFocus={ () => {
-					if ( showPrompt ) {
-						onAppend();
-					}
-				} }
+				onFocus={ onAppend }
 			>
 				{ showPrompt ? value : ZWNBSP }
 			</p>
@@ -79,14 +77,23 @@ export function DefaultBlockAppender( {
 
 export default compose(
 	withSelect( ( select, ownProps ) => {
-		const { getBlockCount, getSettings, getTemplateLock } = select(
-			blockEditorStore
-		);
+		const {
+			getBlockCount,
+			getBlockName,
+			isBlockValid,
+			getSettings,
+			getTemplateLock,
+		} = select( blockEditorStore );
 
 		const isEmpty = ! getBlockCount( ownProps.rootClientId );
+		const isLastBlockDefault =
+			getBlockName( ownProps.lastBlockClientId ) ===
+			getDefaultBlockName();
+		const isLastBlockValid = isBlockValid( ownProps.lastBlockClientId );
 		const { bodyPlaceholder } = getSettings();
 
 		return {
+			isVisible: isEmpty || ! isLastBlockDefault || ! isLastBlockValid,
 			showPrompt: isEmpty,
 			isLocked: !! getTemplateLock( ownProps.rootClientId ),
 			placeholder: bodyPlaceholder,

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

@@ -126,7 +126,3 @@
 		display: flex;
 	}
 }
-
-.block-editor-default-block-appender__content {
-	cursor: text;
-}

package/src/components/default-block-appender/test/__snapshots__/index.js.snap

@@ -6,12 +6,24 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
   data-root-client-id=""
 >
   <p
-    aria-label="Add default block"
+    aria-label="Add block"
     className="block-editor-default-block-appender__content"
-    onClick={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
+    contentEditable={true}
+    onFocus={
+      [MockFunction] {
+        "calls": Array [
+          Array [],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
     role="button"
+    suppressContentEditableWarning={true}
     tabIndex="0"
   >
     Type / to choose a block
@@ -30,12 +42,12 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
   data-root-client-id=""
 >
   <p
-    aria-label="Add default block"
+    aria-label="Add block"
     className="block-editor-default-block-appender__content"
-    onClick={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
+    contentEditable={true}
+    onFocus={[MockFunction]}
     role="button"
+    suppressContentEditableWarning={true}
     tabIndex="0"
   >
     Type / to choose a block
@@ -54,12 +66,12 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
   data-root-client-id=""
 >
   <p
-    aria-label="Add default block"
+    aria-label="Add block"
     className="block-editor-default-block-appender__content"
-    onClick={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
+    contentEditable={true}
+    onFocus={[MockFunction]}
     role="button"
+    suppressContentEditableWarning={true}
     tabIndex="0"
   >
     

package/src/components/default-block-appender/test/index.js

@@ -14,10 +14,16 @@ describe( 'DefaultBlockAppender', () => {
 		expect( onAppend ).toHaveBeenCalledWith();
 	};
 
+	it( 'should render nothing if not visible', () => {
+		const wrapper = shallow( <DefaultBlockAppender /> );
+
+		expect( wrapper.type() ).toBe( null );
+	} );
+
 	it( 'should match snapshot', () => {
 		const onAppend = jest.fn();
 		const wrapper = shallow(
-			<DefaultBlockAppender onAppend={ onAppend } showPrompt />
+			<DefaultBlockAppender isVisible onAppend={ onAppend } showPrompt />
 		);
 
 		expect( wrapper ).toMatchSnapshot();
@@ -26,10 +32,10 @@ describe( 'DefaultBlockAppender', () => {
 	it( 'should append a default block when input focused', () => {
 		const onAppend = jest.fn();
 		const wrapper = shallow(
-			<DefaultBlockAppender onAppend={ onAppend } showPrompt />
+			<DefaultBlockAppender isVisible onAppend={ onAppend } showPrompt />
 		);
 
-		wrapper.find( 'p' ).simulate( 'click' );
+		wrapper.find( 'p' ).simulate( 'focus' );
 
 		expect( wrapper ).toMatchSnapshot();
 
@@ -39,7 +45,11 @@ describe( 'DefaultBlockAppender', () => {
 	it( 'should optionally show without prompt', () => {
 		const onAppend = jest.fn();
 		const wrapper = shallow(
-			<DefaultBlockAppender onAppend={ onAppend } showPrompt={ false } />
+			<DefaultBlockAppender
+				isVisible
+				onAppend={ onAppend }
+				showPrompt={ false }
+			/>
 		);
 		const input = wrapper.find( 'p' );