@wordpress/block-editor 8.5.2 → 8.5.5

package/build-style/style-rtl.css

@@ -1018,7 +1018,6 @@
   border: none;
   border-radius: 2px;
   z-index: 10;
-  pointer-events: none;
 }
 .block-editor-block-content-overlay:hover:not(.is-dragging-blocks).overlay-active::before, .block-editor-block-content-overlay.parent-highlighted.overlay-active::before {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.1);

package/build-style/style.css

@@ -1018,7 +1018,6 @@
   border: none;
   border-radius: 2px;
   z-index: 10;
-  pointer-events: none;
 }
 .block-editor-block-content-overlay:hover:not(.is-dragging-blocks).overlay-active::before, .block-editor-block-content-overlay.parent-highlighted.overlay-active::before {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.1);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "8.5.2",
+	"version": "8.5.5",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,8 +36,8 @@
 		"@wordpress/a11y": "^3.6.1",
 		"@wordpress/api-fetch": "^6.3.1",
 		"@wordpress/blob": "^3.6.1",
-		"@wordpress/blocks": "^11.5.2",
-		"@wordpress/components": "^19.8.1",
+		"@wordpress/blocks": "^11.5.3",
+		"@wordpress/components": "^19.8.4",
 		"@wordpress/compose": "^5.4.1",
 		"@wordpress/data": "^6.6.1",
 		"@wordpress/date": "^4.6.1",
@@ -47,12 +47,12 @@
 		"@wordpress/hooks": "^3.6.1",
 		"@wordpress/html-entities": "^3.6.1",
 		"@wordpress/i18n": "^4.6.1",
-		"@wordpress/icons": "^8.2.1",
+		"@wordpress/icons": "^8.2.2",
 		"@wordpress/is-shallow-equal": "^4.6.1",
 		"@wordpress/keyboard-shortcuts": "^3.4.1",
 		"@wordpress/keycodes": "^3.6.1",
 		"@wordpress/notices": "^3.6.1",
-		"@wordpress/rich-text": "^5.4.1",
+		"@wordpress/rich-text": "^5.4.2",
 		"@wordpress/shortcode": "^3.6.1",
 		"@wordpress/style-engine": "^0.5.1",
 		"@wordpress/token-list": "^2.6.1",
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "446565ecaa40370173c18926535e975ec5652b71"
+	"gitHead": "b97f41a0716be45abd8bf897c7f135b86dc0760c"
 }

package/src/components/block-content-overlay/index.js

@@ -25,7 +25,6 @@ export default function BlockContentOverlay( {
 	const [ isHovered, setIsHovered ] = useState( false );
 
 	const {
-		canEdit,
 		isParentSelected,
 		hasChildSelected,
 		isDraggingBlocks,
@@ -37,10 +36,8 @@ export default function BlockContentOverlay( {
 				hasSelectedInnerBlock,
 				isDraggingBlocks: _isDraggingBlocks,
 				isBlockHighlighted,
-				canEditBlock,
 			} = select( blockEditorStore );
 			return {
-				canEdit: canEditBlock( clientId ),
 				isParentSelected: isBlockSelected( clientId ),
 				hasChildSelected: hasSelectedInnerBlock( clientId, true ),
 				isDraggingBlocks: _isDraggingBlocks(),
@@ -62,12 +59,6 @@ export default function BlockContentOverlay( {
 	);
 
 	useEffect( () => {
-		// The overlay is always active when editing is locked.
-		if ( ! canEdit ) {
-			setIsOverlayActive( true );
-			return;
-		}
-
 		// Reenable when blocks are not in use.
 		if ( ! isParentSelected && ! hasChildSelected && ! isOverlayActive ) {
 			setIsOverlayActive( true );
@@ -84,13 +75,7 @@ export default function BlockContentOverlay( {
 		if ( hasChildSelected && isOverlayActive ) {
 			setIsOverlayActive( false );
 		}
-	}, [
-		isParentSelected,
-		hasChildSelected,
-		isOverlayActive,
-		isHovered,
-		canEdit,
-	] );
+	}, [ isParentSelected, hasChildSelected, isOverlayActive, isHovered ] );
 
 	// Disabled because the overlay div doesn't actually have a role or functionality
 	// as far as the a11y is concerned. We're just catching the first click so that
@@ -103,9 +88,7 @@ export default function BlockContentOverlay( {
 			onMouseEnter={ () => setIsHovered( true ) }
 			onMouseLeave={ () => setIsHovered( false ) }
 			onMouseUp={
-				isOverlayActive && canEdit
-					? () => setIsOverlayActive( false )
-					: undefined
+				isOverlayActive ? () => setIsOverlayActive( false ) : undefined
 			}
 		>
 			{ wrapperProps?.children }

package/src/components/block-content-overlay/style.scss

@@ -10,7 +10,6 @@
 		border: none;
 		border-radius: $radius-block-ui;
 		z-index: z-index(".block-editor-block-content-overlay__overlay");
-		pointer-events: none;
 	}
 
 	&:hover:not(.is-dragging-blocks).overlay-active::before,

package/src/components/block-lock/modal.js

@@ -13,8 +13,7 @@ import {
 } from '@wordpress/components';
 import { lock as lockIcon, unlock as unlockIcon } from '@wordpress/icons';
 import { useInstanceId } from '@wordpress/compose';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { isReusableBlock, getBlockType } from '@wordpress/blocks';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -25,18 +24,7 @@ import { store as blockEditorStore } from '../../store';
 
 export default function BlockLockModal( { clientId, onClose } ) {
 	const [ lock, setLock ] = useState( { move: false, remove: false } );
-	const { canEdit, canMove, canRemove } = useBlockLock( clientId );
-	const { isReusable } = useSelect(
-		( select ) => {
-			const { getBlockName } = select( blockEditorStore );
-			const blockName = getBlockName( clientId );
-
-			return {
-				isReusable: isReusableBlock( getBlockType( blockName ) ),
-			};
-		},
-		[ clientId ]
-	);
+	const { canMove, canRemove } = useBlockLock( clientId );
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const instanceId = useInstanceId(
@@ -48,9 +36,8 @@ export default function BlockLockModal( { clientId, onClose } ) {
 		setLock( {
 			move: ! canMove,
 			remove: ! canRemove,
-			...( isReusable ? { edit: ! canEdit } : {} ),
 		} );
-	}, [ canEdit, canMove, canRemove, isReusable ] );
+	}, [ canMove, canRemove ] );
 
 	const isAllChecked = Object.values( lock ).every( Boolean );
 	const isMixed = Object.values( lock ).some( Boolean ) && ! isAllChecked;
@@ -94,36 +81,10 @@ export default function BlockLockModal( { clientId, onClose } ) {
 							setLock( {
 								move: newValue,
 								remove: newValue,
-								...( isReusable ? { edit: newValue } : {} ),
 							} )
 						}
 					/>
 					<ul className="block-editor-block-lock-modal__checklist">
-						{ isReusable && (
-							<li className="block-editor-block-lock-modal__checklist-item">
-								<CheckboxControl
-									label={
-										<>
-											{ __( 'Restrict editing' ) }
-											<Icon
-												icon={
-													lock.edit
-														? lockIcon
-														: unlockIcon
-												}
-											/>
-										</>
-									}
-									checked={ !! lock.edit }
-									onChange={ ( edit ) =>
-										setLock( ( prevLock ) => ( {
-											...prevLock,
-											edit,
-										} ) )
-									}
-								/>
-							</li>
-						) }
 						<li className="block-editor-block-lock-modal__checklist-item">
 							<CheckboxControl
 								label={

package/src/components/block-lock/toolbar.js

@@ -15,7 +15,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 
 export default function BlockLockToolbar( { clientId } ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );
+	const { canMove, canRemove, canLock } = useBlockLock( clientId );
 
 	const [ isModalOpen, toggleModal ] = useReducer(
 		( isActive ) => ! isActive,
@@ -26,7 +26,7 @@ export default function BlockLockToolbar( { clientId } ) {
 		return null;
 	}
 
-	if ( canEdit && canMove && canRemove ) {
+	if ( canMove && canRemove ) {
 		return null;
 	}
 

package/src/components/block-lock/use-block-lock.js

@@ -19,7 +19,6 @@ export default function useBlockLock( clientId ) {
 	return useSelect(
 		( select ) => {
 			const {
-				canEditBlock,
 				canMoveBlock,
 				canRemoveBlock,
 				canLockBlockType,
@@ -28,16 +27,14 @@ export default function useBlockLock( clientId ) {
 			} = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
 
-			const canEdit = canEditBlock( clientId );
 			const canMove = canMoveBlock( clientId, rootClientId );
 			const canRemove = canRemoveBlock( clientId, rootClientId );
 
 			return {
-				canEdit,
 				canMove,
 				canRemove,
 				canLock: canLockBlockType( getBlockName( clientId ) ),
-				isLocked: ! canEdit || ! canMove || ! canRemove,
+				isLocked: ! canMove || ! canRemove,
 			};
 		},
 		[ clientId ]

package/src/components/inserter/index.js

@@ -30,6 +30,7 @@ const defaultRenderToggle = ( {
 	blockTitle,
 	hasSingleBlockType,
 	toggleProps = {},
+	prioritizePatterns,
 } ) => {
 	let label;
 	if ( hasSingleBlockType ) {
@@ -38,6 +39,8 @@ const defaultRenderToggle = ( {
 			_x( 'Add %s', 'directly add the only allowed block' ),
 			blockTitle
 		);
+	} else if ( prioritizePatterns ) {
+		label = __( 'Add pattern' );
 	} else {
 		label = _x( 'Add block', 'Generic label for block inserter button' );
 	}
@@ -106,6 +109,7 @@ class Inserter extends Component {
 			toggleProps,
 			hasItems,
 			renderToggle = defaultRenderToggle,
+			prioritizePatterns,
 		} = this.props;
 
 		return renderToggle( {
@@ -116,6 +120,7 @@ class Inserter extends Component {
 			hasSingleBlockType,
 			directInsertBlock,
 			toggleProps,
+			prioritizePatterns,
 		} );
 	}
 
@@ -138,6 +143,7 @@ class Inserter extends Component {
 			// This prop is experimental to give some time for the quick inserter to mature
 			// Feel free to make them stable after a few releases.
 			__experimentalIsQuick: isQuick,
+			prioritizePatterns,
 		} = this.props;
 
 		if ( isQuick ) {
@@ -149,6 +155,7 @@ class Inserter extends Component {
 					rootClientId={ rootClientId }
 					clientId={ clientId }
 					isAppender={ isAppender }
+					prioritizePatterns={ prioritizePatterns }
 				/>
 			);
 		}
@@ -206,7 +213,11 @@ export default compose( [
 			hasInserterItems,
 			__experimentalGetAllowedBlocks,
 			__experimentalGetDirectInsertBlock,
+			getBlockIndex,
+			getBlockCount,
+			getSettings,
 		} = select( blockEditorStore );
+
 		const { getBlockVariations } = select( blocksStore );
 
 		rootClientId =
@@ -218,6 +229,10 @@ export default compose( [
 			rootClientId
 		);
 
+		const index = getBlockIndex( clientId );
+		const blockCount = getBlockCount();
+		const settings = getSettings();
+
 		const hasSingleBlockType =
 			size( allowedBlocks ) === 1 &&
 			size(
@@ -236,6 +251,11 @@ export default compose( [
 			allowedBlockType,
 			directInsertBlock,
 			rootClientId,
+			prioritizePatterns:
+				settings.__experimentalPreferPatternsOnRoot &&
+				! rootClientId &&
+				index > 0 &&
+				( index < blockCount || blockCount === 0 ),
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps, { select } ) => {

package/src/components/inserter/quick-inserter.js

@@ -30,6 +30,7 @@ export default function QuickInserter( {
 	rootClientId,
 	clientId,
 	isAppender,
+	prioritizePatterns,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
@@ -48,11 +49,7 @@ export default function QuickInserter( {
 		destinationRootClientId
 	);
 
-	const {
-		setInserterIsOpened,
-		insertionIndex,
-		prioritizePatterns,
-	} = useSelect(
+	const { setInserterIsOpened, insertionIndex } = useSelect(
 		( select ) => {
 			const { getSettings, getBlockIndex, getBlockCount } = select(
 				blockEditorStore
@@ -63,15 +60,10 @@ export default function QuickInserter( {
 
 			return {
 				setInserterIsOpened: settings.__experimentalSetIsInserterOpened,
-				prioritizePatterns:
-					settings.__experimentalPreferPatternsOnRoot &&
-					! rootClientId &&
-					index > 0 &&
-					( index < blockCount || blockCount === 0 ),
 				insertionIndex: index === -1 ? blockCount : index,
 			};
 		},
-		[ clientId, rootClientId ]
+		[ clientId ]
 	);
 
 	const showPatterns =

package/src/components/writing-flow/use-click-selection.js

@@ -11,10 +11,9 @@ import { store as blockEditorStore } from '../../store';
 import { getBlockClientId } from '../../utils/dom';
 
 export default function useClickSelection() {
-	const { multiSelect, selectBlock } = useDispatch( blockEditorStore );
+	const { selectBlock } = useDispatch( blockEditorStore );
 	const {
 		isSelectionEnabled,
-		getBlockParents,
 		getBlockSelectionStart,
 		hasMultiSelection,
 	} = useSelect( blockEditorStore );
@@ -54,10 +53,8 @@ export default function useClickSelection() {
 			};
 		},
 		[
-			multiSelect,
 			selectBlock,
 			isSelectionEnabled,
-			getBlockParents,
 			getBlockSelectionStart,
 			hasMultiSelection,
 		]

package/src/components/writing-flow/use-selection-observer.js

@@ -76,36 +76,81 @@ export default function useSelectionObserver() {
 	const { multiSelect, selectBlock, selectionChange } = useDispatch(
 		blockEditorStore
 	);
-	const { getBlockParents } = useSelect( blockEditorStore );
+	const { getBlockParents, getBlockSelectionStart } = useSelect(
+		blockEditorStore
+	);
 	return useRefEffect(
 		( node ) => {
 			const { ownerDocument } = node;
 			const { defaultView } = ownerDocument;
 
-			function onSelectionChange() {
+			function onSelectionChange( event ) {
 				const selection = defaultView.getSelection();
-
 				// If no selection is found, end multi selection and disable the
 				// contentEditable wrapper.
-				if ( ! selection.rangeCount || selection.isCollapsed ) {
+				if ( ! selection.rangeCount ) {
+					setContentEditableWrapper( node, false );
+					return;
+				}
+				// If selection is collapsed and we haven't used `shift+click`,
+				// end multi selection and disable the contentEditable wrapper.
+				// We have to check about `shift+click` case because elements
+				// that don't support text selection might be involved, and we might
+				// update the clientIds to multi-select blocks.
+				// For now we check if the event is a `mouse` event.
+				const isClickShift = event.shiftKey && event.type === 'mouseup';
+				if ( selection.isCollapsed && ! isClickShift ) {
 					setContentEditableWrapper( node, false );
 					return;
 				}
 
-				const clientId = getBlockClientId(
+				let startClientId = getBlockClientId(
 					extractSelectionStartNode( selection )
 				);
-				const endClientId = getBlockClientId(
+				let endClientId = getBlockClientId(
 					extractSelectionEndNode( selection )
 				);
-				const isSingularSelection = clientId === endClientId;
+				// If the selection has changed and we had pressed `shift+click`,
+				// we need to check if in an element that doesn't support
+				// text selection has been clicked.
+				if ( isClickShift ) {
+					const selectedClientId = getBlockSelectionStart();
+					const clickedClientId = getBlockClientId( event.target );
+					// `endClientId` is not defined if we end the selection by clicking a non-selectable block.
+					// We need to check if there was already a selection with a non-selectable focusNode.
+					const focusNodeIsNonSelectable =
+						clickedClientId !== endClientId;
+					if (
+						( startClientId === endClientId &&
+							selection.isCollapsed ) ||
+						! endClientId ||
+						focusNodeIsNonSelectable
+					) {
+						endClientId = clickedClientId;
+					}
+					// Handle the case when we have a non-selectable block
+					// selected and click another one.
+					if ( startClientId !== selectedClientId ) {
+						startClientId = selectedClientId;
+					}
+				}
+
+				// If the selection did not involve a block, return.
+				if (
+					startClientId === undefined &&
+					endClientId === undefined
+				) {
+					setContentEditableWrapper( node, false );
+					return;
+				}
 
+				const isSingularSelection = startClientId === endClientId;
 				if ( isSingularSelection ) {
-					selectBlock( clientId );
+					selectBlock( startClientId );
 				} else {
 					const startPath = [
-						...getBlockParents( clientId ),
-						clientId,
+						...getBlockParents( startClientId ),
+						startClientId,
 					];
 					const endPath = [
 						...getBlockParents( endClientId ),

package/src/hooks/duotone.js

@@ -60,82 +60,109 @@ export function getValuesFromColors( colors = [] ) {
  */
 
 /**
- * SVG and stylesheet needed for rendering the duotone filter.
+ * Stylesheet for rendering the duotone filter.
  *
  * @param {Object} props          Duotone props.
  * @param {string} props.selector Selector to apply the filter to.
  * @param {string} props.id       Unique id for this duotone filter.
- * @param {Values} props.values   R, G, B, and A values to filter with.
  *
  * @return {WPElement} Duotone element.
  */
-function DuotoneFilter( { selector, id, values } ) {
-	const stylesheet = `
+function DuotoneStylesheet( { selector, id } ) {
+	const css = `
 ${ selector } {
 	filter: url( #${ id } );
 }
 `;
+	return <style>{ css }</style>;
+}
 
+/**
+ * SVG for rendering the duotone filter.
+ *
+ * @param {Object} props        Duotone props.
+ * @param {string} props.id     Unique id for this duotone filter.
+ * @param {Values} props.values R, G, B, and A values to filter with.
+ *
+ * @return {WPElement} Duotone element.
+ */
+function DuotoneFilter( { id, values } ) {
 	return (
-		<>
-			<SVG
-				xmlnsXlink="http://www.w3.org/1999/xlink"
-				viewBox="0 0 0 0"
-				width="0"
-				height="0"
-				focusable="false"
-				role="none"
-				style={ {
-					visibility: 'hidden',
-					position: 'absolute',
-					left: '-9999px',
-					overflow: 'hidden',
-				} }
-			>
-				<defs>
-					<filter id={ id }>
-						<feColorMatrix
-							// Use sRGB instead of linearRGB so transparency looks correct.
-							colorInterpolationFilters="sRGB"
-							type="matrix"
-							// Use perceptual brightness to convert to grayscale.
-							values="
-								.299 .587 .114 0 0
-								.299 .587 .114 0 0
-								.299 .587 .114 0 0
-								.299 .587 .114 0 0
-							"
+		<SVG
+			xmlnsXlink="http://www.w3.org/1999/xlink"
+			viewBox="0 0 0 0"
+			width="0"
+			height="0"
+			focusable="false"
+			role="none"
+			style={ {
+				visibility: 'hidden',
+				position: 'absolute',
+				left: '-9999px',
+				overflow: 'hidden',
+			} }
+		>
+			<defs>
+				<filter id={ id }>
+					<feColorMatrix
+						// Use sRGB instead of linearRGB so transparency looks correct.
+						colorInterpolationFilters="sRGB"
+						type="matrix"
+						// Use perceptual brightness to convert to grayscale.
+						values="
+							.299 .587 .114 0 0
+							.299 .587 .114 0 0
+							.299 .587 .114 0 0
+							.299 .587 .114 0 0
+						"
+					/>
+					<feComponentTransfer
+						// Use sRGB instead of linearRGB to be consistent with how CSS gradients work.
+						colorInterpolationFilters="sRGB"
+					>
+						<feFuncR
+							type="table"
+							tableValues={ values.r.join( ' ' ) }
+						/>
+						<feFuncG
+							type="table"
+							tableValues={ values.g.join( ' ' ) }
+						/>
+						<feFuncB
+							type="table"
+							tableValues={ values.b.join( ' ' ) }
 						/>
-						<feComponentTransfer
-							// Use sRGB instead of linearRGB to be consistent with how CSS gradients work.
-							colorInterpolationFilters="sRGB"
-						>
-							<feFuncR
-								type="table"
-								tableValues={ values.r.join( ' ' ) }
-							/>
-							<feFuncG
-								type="table"
-								tableValues={ values.g.join( ' ' ) }
-							/>
-							<feFuncB
-								type="table"
-								tableValues={ values.b.join( ' ' ) }
-							/>
-							<feFuncA
-								type="table"
-								tableValues={ values.a.join( ' ' ) }
-							/>
-						</feComponentTransfer>
-						<feComposite
-							// Re-mask the image with the original transparency since the feColorMatrix above loses that information.
-							in2="SourceGraphic"
-							operator="in"
+						<feFuncA
+							type="table"
+							tableValues={ values.a.join( ' ' ) }
 						/>
-					</filter>
-				</defs>
-			</SVG>
-			<style dangerouslySetInnerHTML={ { __html: stylesheet } } />
+					</feComponentTransfer>
+					<feComposite
+						// Re-mask the image with the original transparency since the feColorMatrix above loses that information.
+						in2="SourceGraphic"
+						operator="in"
+					/>
+				</filter>
+			</defs>
+		</SVG>
+	);
+}
+
+/**
+ * SVG and stylesheet needed for rendering the duotone filter.
+ *
+ * @param {Object} props          Duotone props.
+ * @param {string} props.selector Selector to apply the filter to.
+ * @param {string} props.id       Unique id for this duotone filter.
+ * @param {Values} props.values   R, G, B, and A values to filter with.
+ *
+ * @return {WPElement} Duotone element.
+ */
+function InlineDuotone( { selector, id, values } ) {
+	return (
+		<>
+			<DuotoneFilter id={ id } values={ values } />
+			<DuotoneStylesheet id={ id } selector={ selector } />
 		</>
 	);
 }
@@ -321,7 +348,7 @@ const withDuotoneStyles = createHigherOrderComponent(
 			<>
 				{ element &&
 					createPortal(
-						<DuotoneFilter
+						<InlineDuotone
 							selector={ selectorsGroup }
 							id={ id }
 							values={ getValuesFromColors( values ) }
@@ -335,6 +362,15 @@ const withDuotoneStyles = createHigherOrderComponent(
 	'withDuotoneStyles'
 );
 
+export function PresetDuotoneFilter( { preset } ) {
+	return (
+		<DuotoneFilter
+			id={ `wp-duotone-${ preset.slug }` }
+			values={ getValuesFromColors( preset.colors ) }
+		/>
+	);
+}
+
 addFilter(
 	'blocks.registerBlockType',
 	'core/editor/duotone/add-attributes',

package/src/hooks/index.js

@@ -19,3 +19,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 { PresetDuotoneFilter } from './duotone';