@wordpress/block-editor 11.1.0 → 11.2.0

package/src/components/off-canvas-editor/block.js

@@ -6,11 +6,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { createBlock, hasBlockSupport } from '@wordpress/blocks';
+import { hasBlockSupport } from '@wordpress/blocks';
 import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
-	MenuItem,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { moreVertical } from '@wordpress/icons';
@@ -86,8 +85,7 @@ function ListViewBlock( {
 		( isSelected &&
 			selectedClientIds[ selectedClientIds.length - 1 ] === clientId );
 
-	const { insertBlock, replaceBlock, toggleBlockHighlight } =
-		useDispatch( blockEditorStore );
+	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const block = useSelect(
@@ -128,7 +126,8 @@ function ListViewBlock( {
 		[ selectBlock ]
 	);
 
-	const { isTreeGridMounted, expand, collapse } = useListViewContext();
+	const { isTreeGridMounted, expand, collapse, LeafMoreMenu } =
+		useListViewContext();
 
 	const toggleExpanded = useCallback(
 		( event ) => {
@@ -237,6 +236,10 @@ function ListViewBlock( {
 		? selectedClientIds
 		: [ clientId ];
 
+	const MoreMenuComponent = LeafMoreMenu
+		? LeafMoreMenu
+		: BlockSettingsDropdown;
+
 	return (
 		<ListViewLeaf
 			className={ classes }
@@ -352,61 +355,26 @@ function ListViewBlock( {
 						colSpan={ isEditable ? 1 : 2 } // When an item is not editable then we don't output the cell for the edit button, so we need to adjust the colspan so that the HTML is valid.
 					>
 						{ ( { ref, tabIndex, onFocus } ) => (
-							<BlockSettingsDropdown
-								clientIds={ dropdownClientIds }
-								icon={ moreVertical }
-								label={ settingsAriaLabel }
-								toggleProps={ {
-									ref,
-									className:
-										'block-editor-list-view-block__menu',
-									tabIndex,
-									onFocus,
-								} }
-								disableOpenOnArrowDown
-								__experimentalSelectBlock={ updateSelection }
-							>
-								{ ( { onClose } ) => (
-									<MenuItem
-										onClick={ () => {
-											const newLink = createBlock(
-												'core/navigation-link'
-											);
-											if (
-												block.name ===
-												'core/navigation-submenu'
-											) {
-												const updateSelectionOnInsert = false;
-												insertBlock(
-													newLink,
-													block.innerBlocks.length,
-													clientId,
-													updateSelectionOnInsert
-												);
-											} else {
-												// Convert to a submenu if the block currently isn't one.
-												const newSubmenu = createBlock(
-													'core/navigation-submenu',
-													block.attributes,
-													block.innerBlocks
-														? [
-																...block.innerBlocks,
-																newLink,
-														  ]
-														: [ newLink ]
-												);
-												replaceBlock(
-													clientId,
-													newSubmenu
-												);
-											}
-											onClose();
-										} }
-									>
-										{ __( 'Add submenu item' ) }
-									</MenuItem>
-								) }
-							</BlockSettingsDropdown>
+							<>
+								<MoreMenuComponent
+									clientIds={ dropdownClientIds }
+									block={ block }
+									clientId={ clientId }
+									icon={ moreVertical }
+									label={ settingsAriaLabel }
+									toggleProps={ {
+										ref,
+										className:
+											'block-editor-list-view-block__menu',
+										tabIndex,
+										onFocus,
+									} }
+									disableOpenOnArrowDown
+									__experimentalSelectBlock={
+										updateSelection
+									}
+								/>
+							</>
 						) }
 					</TreeGridCell>
 				</>

package/src/components/off-canvas-editor/index.js

@@ -60,7 +60,8 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  * @param {Array}   props.blocks              Custom subset of block client IDs to be used instead of the default hierarchy.
  * @param {boolean} props.showBlockMovers     Flag to enable block movers
  * @param {boolean} props.isExpanded          Flag to determine whether nested levels are expanded by default.
- * @param {boolean} props.selectBlockInCanvas Flag to determine whether the list view should be a block selection mechanism,.
+ * @param {boolean} props.selectBlockInCanvas Flag to determine whether the list view should be a block selection mechanism.
+ * @param {Object}  props.LeafMoreMenu        Optional more menu substitution.
  * @param {Object}  ref                       Forwarded ref
  */
 function __ExperimentalOffCanvasEditor(
@@ -70,6 +71,7 @@ function __ExperimentalOffCanvasEditor(
 		showBlockMovers = false,
 		isExpanded = false,
 		selectBlockInCanvas = true,
+		LeafMoreMenu,
 	},
 	ref
 ) {
@@ -188,8 +190,16 @@ function __ExperimentalOffCanvasEditor(
 			expandedState,
 			expand,
 			collapse,
+			LeafMoreMenu,
 		} ),
-		[ isMounted.current, draggedClientIds, expandedState, expand, collapse ]
+		[
+			isMounted.current,
+			draggedClientIds,
+			expandedState,
+			expand,
+			collapse,
+			LeafMoreMenu,
+		]
 	);
 
 	return (

package/src/components/provider/index.js

@@ -19,7 +19,10 @@ function BlockEditorProvider( props ) {
 
 	const { updateSettings } = useDispatch( blockEditorStore );
 	useEffect( () => {
-		updateSettings( settings );
+		updateSettings( {
+			...settings,
+			__internalIsInitialized: true,
+		} );
 	}, [ settings ] );
 
 	// Syncs the entity provider with changes in the block-editor store.

package/src/components/rich-text/use-enter.js

@@ -28,6 +28,10 @@ export function useEnter( props ) {
 				return;
 			}
 
+			if ( event.keyCode !== ENTER ) {
+				return;
+			}
+
 			const {
 				removeEditorOnlyFormats,
 				value,
@@ -40,10 +44,6 @@ export function useEnter( props ) {
 				onSplitAtEnd,
 			} = propsRef.current;
 
-			if ( event.keyCode !== ENTER ) {
-				return;
-			}
-
 			event.preventDefault();
 
 			const _value = { ...value };

package/src/components/url-input/README.md

@@ -160,6 +160,10 @@ When hiding the URLInput using CSS (as is sometimes done for accessibility purpo
 
 This prop allows the suggestions list to be programmatically not rendered by passing a boolean—it can be `true` to make sure suggestions aren't rendered, or `false`/`undefined` to fall back to the default behaviour of showing suggestions when matching autocompletion items are found.
 
+### `__nextHasNoMarginBottom: Boolean`
+
+Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
+
 ## Example
 
 {% codetabs %}
@@ -217,6 +221,7 @@ registerBlockType( /* ... */, {
 	edit( { className, attributes, setAttributes } ) {
 		return (
 			<URLInput
+				__nextHasNoMarginBottom
 				className={ className }
 				value={ attributes.url }
 				onChange={ ( url, post ) => setAttributes( { url, text: (post && post.title) || 'Click here' } ) }

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

@@ -57,6 +57,7 @@ class URLInputButton extends Component {
 								onClick={ this.toggle }
 							/>
 							<URLInput
+								__nextHasNoMarginBottom
 								value={ url || '' }
 								onChange={ onChange }
 							/>

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

@@ -7,6 +7,7 @@ import scrollIntoView from 'dom-scroll-into-view';
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { __, sprintf, _n } from '@wordpress/i18n';
 import { Component, createRef } from '@wordpress/element';
 import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
@@ -424,6 +425,8 @@ class URLInput extends Component {
 
 	renderControl() {
 		const {
+			/** Start opting into the new margin-free styles that will become the default in a future version. */
+			__nextHasNoMarginBottom = false,
 			label = null,
 			className,
 			isFullWidth,
@@ -477,8 +480,19 @@ class URLInput extends Component {
 			return renderControl( controlProps, inputProps, loading );
 		}
 
+		if ( ! __nextHasNoMarginBottom ) {
+			deprecated( 'Bottom margin styles for wp.blockEditor.URLInput', {
+				since: '6.2',
+				version: '6.5',
+				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',
+			} );
+		}
+
 		return (
-			<BaseControl { ...controlProps }>
+			<BaseControl
+				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+				{ ...controlProps }
+			>
 				<input { ...inputProps } />
 				{ loading && <Spinner /> }
 			</BaseControl>

package/src/components/url-popover/link-editor.js

@@ -31,6 +31,7 @@ export default function LinkEditor( {
 			{ ...props }
 		>
 			<URLInput
+				__nextHasNoMarginBottom
 				value={ value }
 				onChange={ onChangeInputValue }
 				autocompleteRef={ autocompleteRef }

package/src/components/use-paste-styles/index.js

@@ -0,0 +1,230 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { getBlockType, parse } from '@wordpress/blocks';
+import { useDispatch, useRegistry } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import {
+	hasAlignSupport,
+	hasBorderSupport,
+	hasBackgroundColorSupport,
+	hasTextColorSupport,
+	hasGradientSupport,
+	hasCustomClassNameSupport,
+	hasFontFamilySupport,
+	hasFontSizeSupport,
+	hasLayoutSupport,
+	hasStyleSupport,
+} from '../../hooks/supports';
+
+/**
+ * Determine if the copied text looks like serialized blocks or not.
+ * Since plain text will always get parsed into a freeform block,
+ * we check that if the parsed blocks is anything other than that.
+ *
+ * @param {string} text The copied text.
+ * @return {boolean} True if the text looks like serialized blocks, false otherwise.
+ */
+function hasSerializedBlocks( text ) {
+	try {
+		const blocks = parse( text, {
+			__unstableSkipMigrationLogs: true,
+			__unstableSkipAutop: true,
+		} );
+		if ( blocks.length === 1 && blocks[ 0 ].name === 'core/freeform' ) {
+			// It's likely that the text is just plain text and not serialized blocks.
+			return false;
+		}
+		return true;
+	} catch ( err ) {
+		// Parsing error, the text is not serialized blocks.
+		// (Even though that it technically won't happen)
+		return false;
+	}
+}
+
+/**
+ * Style attributes are attributes being added in `block-editor/src/hooks/*`.
+ * (Except for some unrelated to style like `anchor` or `settings`.)
+ * They generally represent the default block supports.
+ */
+const STYLE_ATTRIBUTES = {
+	align: hasAlignSupport,
+	borderColor: ( nameOrType ) => hasBorderSupport( nameOrType, 'color' ),
+	backgroundColor: hasBackgroundColorSupport,
+	textColor: hasTextColorSupport,
+	gradient: hasGradientSupport,
+	className: hasCustomClassNameSupport,
+	fontFamily: hasFontFamilySupport,
+	fontSize: hasFontSizeSupport,
+	layout: hasLayoutSupport,
+	style: hasStyleSupport,
+};
+
+/**
+ * Get the "style attributes" from a given block to a target block.
+ *
+ * @param {WPBlock} sourceBlock The source block.
+ * @param {WPBlock} targetBlock The target block.
+ * @return {Object} the filtered attributes object.
+ */
+function getStyleAttributes( sourceBlock, targetBlock ) {
+	return Object.entries( STYLE_ATTRIBUTES ).reduce(
+		( attributes, [ attributeKey, hasSupport ] ) => {
+			// Only apply the attribute if both blocks support it.
+			if (
+				hasSupport( sourceBlock.name ) &&
+				hasSupport( targetBlock.name )
+			) {
+				// Override attributes that are not present in the block to their defaults.
+				attributes[ attributeKey ] =
+					sourceBlock.attributes[ attributeKey ];
+			}
+			return attributes;
+		},
+		{}
+	);
+}
+
+/**
+ * Update the target blocks with style attributes recursively.
+ *
+ * @param {WPBlock[]} targetBlocks          The target blocks to be updated.
+ * @param {WPBlock[]} sourceBlocks          The source blocks to get th style attributes from.
+ * @param {Function}  updateBlockAttributes The function to update the attributes.
+ */
+function recursivelyUpdateBlockAttributes(
+	targetBlocks,
+	sourceBlocks,
+	updateBlockAttributes
+) {
+	for (
+		let index = 0;
+		index < Math.min( sourceBlocks.length, targetBlocks.length );
+		index += 1
+	) {
+		updateBlockAttributes(
+			targetBlocks[ index ].clientId,
+			getStyleAttributes( sourceBlocks[ index ], targetBlocks[ index ] )
+		);
+
+		recursivelyUpdateBlockAttributes(
+			targetBlocks[ index ].innerBlocks,
+			sourceBlocks[ index ].innerBlocks,
+			updateBlockAttributes
+		);
+	}
+}
+
+/**
+ * A hook to return a pasteStyles event function for handling pasting styles to blocks.
+ *
+ * @return {Function} A function to update the styles to the blocks.
+ */
+export default function usePasteStyles() {
+	const registry = useRegistry();
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const { createSuccessNotice, createWarningNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	return useCallback(
+		async ( targetBlocks ) => {
+			let html = '';
+			try {
+				// `http:` sites won't have the clipboard property on navigator.
+				// (with the exception of localhost.)
+				if ( ! window.navigator.clipboard ) {
+					createErrorNotice(
+						__(
+							'Unable to paste styles. This feature is only available on secure (https) sites in supporting browsers.'
+						),
+						{ type: 'snackbar' }
+					);
+					return;
+				}
+
+				html = await window.navigator.clipboard.readText();
+			} catch ( error ) {
+				// Possibly the permission is denied.
+				createErrorNotice(
+					__(
+						'Unable to paste styles. Please allow browser clipboard permissions before continuing.'
+					),
+					{
+						type: 'snackbar',
+					}
+				);
+				return;
+			}
+
+			// Abort if the copied text is empty or doesn't look like serialized blocks.
+			if ( ! html || ! hasSerializedBlocks( html ) ) {
+				createWarningNotice(
+					__(
+						"Unable to paste styles. Block styles couldn't be found within the copied content."
+					),
+					{
+						type: 'snackbar',
+					}
+				);
+				return;
+			}
+
+			const copiedBlocks = parse( html );
+
+			if ( copiedBlocks.length === 1 ) {
+				// Apply styles of the block to all the target blocks.
+				registry.batch( () => {
+					recursivelyUpdateBlockAttributes(
+						targetBlocks,
+						targetBlocks.map( () => copiedBlocks[ 0 ] ),
+						updateBlockAttributes
+					);
+				} );
+			} else {
+				registry.batch( () => {
+					recursivelyUpdateBlockAttributes(
+						targetBlocks,
+						copiedBlocks,
+						updateBlockAttributes
+					);
+				} );
+			}
+
+			if ( targetBlocks.length === 1 ) {
+				const title = getBlockType( targetBlocks[ 0 ].name )?.title;
+				createSuccessNotice(
+					sprintf(
+						// Translators: Name of the block being pasted, e.g. "Paragraph".
+						__( 'Pasted styles to %s.' ),
+						title
+					),
+					{ type: 'snackbar' }
+				);
+			} else {
+				createSuccessNotice(
+					sprintf(
+						// Translators: The number of the blocks.
+						__( 'Pasted styles to %d blocks.' ),
+						targetBlocks.length
+					),
+					{ type: 'snackbar' }
+				);
+			}
+		},
+		[
+			registry.batch,
+			updateBlockAttributes,
+			createSuccessNotice,
+			createWarningNotice,
+			createErrorNotice,
+		]
+	);
+}

package/src/components/writing-flow/use-arrow-nav.js

@@ -167,6 +167,12 @@ export default function useArrowNav() {
 		}
 
 		function onKeyDown( event ) {
+			// Abort if navigation has already been handled (e.g. RichText
+			// inline boundaries).
+			if ( event.defaultPrevented ) {
+				return;
+			}
+
 			const { keyCode, target, shiftKey, ctrlKey, altKey, metaKey } =
 				event;
 			const isUp = keyCode === UP;
@@ -182,24 +188,20 @@ export default function useArrowNav() {
 			const { ownerDocument } = node;
 			const { defaultView } = ownerDocument;
 
+			if ( ! isNav ) {
+				return;
+			}
+
 			// If there is a multi-selection, the arrow keys should collapse the
 			// selection to the start or end of the selection.
 			if ( hasMultiSelection() ) {
-				// Only handle if we have a full selection (not a native partial
-				// selection).
-				if ( ! __unstableIsFullySelected() ) {
-					return;
-				}
-
-				if ( event.defaultPrevented ) {
-					return;
-				}
-
-				if ( ! isNav ) {
+				if ( shiftKey ) {
 					return;
 				}
 
-				if ( shiftKey ) {
+				// Only handle if we have a full selection (not a native partial
+				// selection).
+				if ( ! __unstableIsFullySelected() ) {
 					return;
 				}
 
@@ -214,6 +216,12 @@ export default function useArrowNav() {
 				return;
 			}
 
+			// Abort if our current target is not a candidate for navigation
+			// (e.g. preserve native input behaviors).
+			if ( ! isNavigationCandidate( target, keyCode, hasModifier ) ) {
+				return;
+			}
+
 			// When presing any key other than up or down, the initial vertical
 			// position must ALWAYS be reset. The vertical position is saved so
 			// it can be restored as well as possible on sebsequent vertical
@@ -227,22 +235,6 @@ export default function useArrowNav() {
 				verticalRect = computeCaretRect( defaultView );
 			}
 
-			// Abort if navigation has already been handled (e.g. RichText
-			// inline boundaries).
-			if ( event.defaultPrevented ) {
-				return;
-			}
-
-			if ( ! isNav ) {
-				return;
-			}
-
-			// Abort if our current target is not a candidate for navigation
-			// (e.g. preserve native input behaviors).
-			if ( ! isNavigationCandidate( target, keyCode, hasModifier ) ) {
-				return;
-			}
-
 			// In the case of RTL scripts, right means previous and left means
 			// next, which is the exact reverse of LTR.
 			const isReverseDir = isRTL( target ) ? ! isReverse : isReverse;

package/src/content.scss

@@ -3,6 +3,7 @@
 @import "./components/block-content-overlay/content.scss";
 @import "./components/block-draggable/content.scss";
 @import "./components/block-preview/content.scss";
+@import "./components/button-block-appender/content.scss";
 @import "./components/default-block-appender/content.scss";
 @import "./components/inner-blocks/content.scss";
 @import "./components/media-placeholder/content.scss";

package/src/hooks/index.js

@@ -14,6 +14,7 @@ import './color';
 import './duotone';
 import './font-size';
 import './border';
+import './position';
 import './layout';
 import './content-lock-ui';
 import './metadata';

package/src/hooks/metadata.js

@@ -27,8 +27,7 @@ export function addMetaAttribute( blockTypeSettings ) {
 
 	const supportsBlockNaming = hasBlockMetadataSupport(
 		blockTypeSettings,
-		'name',
-		false
+		'name'
 	);
 
 	if ( supportsBlockNaming ) {