@wordpress/block-editor 12.13.0 → 12.15.0

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

@@ -0,0 +1,127 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
+
+/**
+ * Internal dependencies
+ */
+import BlockSelectionButton from './block-selection-button';
+import BlockContextualToolbar from './block-contextual-toolbar';
+import { store as blockEditorStore } from '../../store';
+import BlockPopover from '../block-popover';
+import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
+import useSelectedBlockToolProps from './use-selected-block-tool-props';
+import { useShouldContextualToolbarShow } from '../../utils/use-should-contextual-toolbar-show';
+
+export default function SelectedBlockTools( {
+	clientId,
+	showEmptyBlockSideInserter,
+	__unstableContentRef,
+} ) {
+	const {
+		capturingClientId,
+		isInsertionPointVisible,
+		lastClientId,
+		rootClientId,
+	} = useSelectedBlockToolProps( clientId );
+
+	const { shouldShowBreadcrumb } = useSelect( ( select ) => {
+		const { hasMultiSelection, __unstableGetEditorMode } =
+			select( blockEditorStore );
+
+		const editorMode = __unstableGetEditorMode();
+
+		return {
+			shouldShowBreadcrumb:
+				! hasMultiSelection() &&
+				( editorMode === 'navigation' || editorMode === 'zoom-out' ),
+		};
+	}, [] );
+
+	const isToolbarForced = useRef( false );
+	const { shouldShowContextualToolbar, canFocusHiddenToolbar } =
+		useShouldContextualToolbarShow();
+
+	const { stopTyping } = useDispatch( blockEditorStore );
+
+	useShortcut(
+		'core/block-editor/focus-toolbar',
+		() => {
+			isToolbarForced.current = true;
+			stopTyping( true );
+		},
+		{
+			isDisabled: ! canFocusHiddenToolbar,
+		}
+	);
+
+	useEffect( () => {
+		isToolbarForced.current = false;
+	} );
+
+	// Stores the active toolbar item index so the block toolbar can return focus
+	// to it when re-mounting.
+	const initialToolbarItemIndexRef = useRef();
+
+	useEffect( () => {
+		// Resets the index whenever the active block changes so this is not
+		// persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
+		initialToolbarItemIndexRef.current = undefined;
+	}, [ clientId ] );
+
+	const popoverProps = useBlockToolbarPopoverProps( {
+		contentElement: __unstableContentRef?.current,
+		clientId,
+	} );
+
+	if ( showEmptyBlockSideInserter ) {
+		return null;
+	}
+
+	if ( shouldShowBreadcrumb || shouldShowContextualToolbar ) {
+		return (
+			<BlockPopover
+				clientId={ capturingClientId || clientId }
+				bottomClientId={ lastClientId }
+				className={ classnames(
+					'block-editor-block-list__block-popover',
+					{
+						'is-insertion-point-visible': isInsertionPointVisible,
+					}
+				) }
+				resize={ false }
+				{ ...popoverProps }
+			>
+				{ shouldShowContextualToolbar && (
+					<BlockContextualToolbar
+						// If the toolbar is being shown because of being forced
+						// it should focus the toolbar right after the mount.
+						focusOnMount={ isToolbarForced.current }
+						__experimentalInitialIndex={
+							initialToolbarItemIndexRef.current
+						}
+						__experimentalOnIndexChange={ ( index ) => {
+							initialToolbarItemIndexRef.current = index;
+						} }
+					/>
+				) }
+				{ shouldShowBreadcrumb && (
+					<BlockSelectionButton
+						clientId={ clientId }
+						rootClientId={ rootClientId }
+					/>
+				) }
+			</BlockPopover>
+		);
+	}
+
+	return null;
+}

package/src/components/block-tools/style.scss

@@ -118,16 +118,6 @@
 		}
 	}
 
-	// Add a scrim to the right of the collapsed button.
-	&.is-collapsed::after {
-		content: "";
-		position: absolute;
-		left: 100%;
-		width: $grid-unit-60;
-		height: 100%;
-		background: linear-gradient(to right, $white, transparent);
-	}
-
 	@include break-medium() {
 		&.is-fixed {
 			& > .block-editor-block-toolbar {

package/src/components/block-tools/use-selected-block-tool-props.js

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * Returns props for the selected block tools and empty block inserter.
+ *
+ * @param {string} clientId Selected block client ID.
+ */
+export default function useSelectedBlockToolProps( clientId ) {
+	const selectedBlockProps = useSelect(
+		( select ) => {
+			const {
+				getBlockRootClientId,
+				getBlockParents,
+				__experimentalGetBlockListSettingsForBlocks,
+				isBlockInsertionPointVisible,
+				getBlockInsertionPoint,
+				getBlockOrder,
+				hasMultiSelection,
+				getLastMultiSelectedBlockClientId,
+			} = select( blockEditorStore );
+
+			const blockParentsClientIds = getBlockParents( clientId );
+
+			// Get Block List Settings for all ancestors of the current Block clientId.
+			const parentBlockListSettings =
+				__experimentalGetBlockListSettingsForBlocks(
+					blockParentsClientIds
+				);
+
+			// Get the clientId of the topmost parent with the capture toolbars setting.
+			const capturingClientId = blockParentsClientIds.find(
+				( parentClientId ) =>
+					parentBlockListSettings[ parentClientId ]
+						?.__experimentalCaptureToolbars
+			);
+
+			let isInsertionPointVisible = false;
+			if ( isBlockInsertionPointVisible() ) {
+				const insertionPoint = getBlockInsertionPoint();
+				const order = getBlockOrder( insertionPoint.rootClientId );
+				isInsertionPointVisible =
+					order[ insertionPoint.index ] === clientId;
+			}
+
+			return {
+				capturingClientId,
+				isInsertionPointVisible,
+				lastClientId: hasMultiSelection()
+					? getLastMultiSelectedBlockClientId()
+					: null,
+				rootClientId: getBlockRootClientId( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+
+	return selectedBlockProps;
+}

package/src/components/block-types-list/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -25,11 +26,10 @@ function BlockTypesList( {
 	label,
 	isDraggable = true,
 } ) {
+	const className = 'block-editor-block-types-list';
+	const listId = useInstanceId( BlockTypesList, className );
 	return (
-		<InserterListboxGroup
-			className="block-editor-block-types-list"
-			aria-label={ label }
-		>
+		<InserterListboxGroup className={ className } aria-label={ label }>
 			{ chunk( items, 3 ).map( ( row, i ) => (
 				<InserterListboxRow key={ i }>
 					{ row.map( ( item, j ) => (
@@ -43,6 +43,7 @@ function BlockTypesList( {
 							onHover={ onHover }
 							isDraggable={ isDraggable && ! item.isDisabled }
 							isFirst={ i === 0 && j === 0 }
+							rowId={ `${ listId }-${ i }` }
 						/>
 					) ) }
 				</InserterListboxRow>

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

@@ -39,8 +39,8 @@
 	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
 	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > &,
 	// 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 > & {
+	.block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > &,
+	.block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > & {
 		pointer-events: none;
 
 		&::after {

package/src/components/date-format-picker/index.js

@@ -78,12 +78,19 @@ function NonDefaultControls( { format, onChange } ) {
 	// formats.
 	const suggestedFormats = [
 		...new Set( [
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			'Y-m-d',
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'n/j/Y', 'short date format' ),
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'n/j/Y g:i A', 'short date format with time' ),
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'M j, Y', 'medium date format' ),
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'M j, Y g:i A', 'medium date format with time' ),
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'F j, Y', 'long date format' ),
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'M j', 'short date format without the year' ),
 		] ),
 	];

package/src/components/editable-text/README.md

@@ -47,40 +47,6 @@ _Optional._ Called when the block can be removed. `forward` is true when the sel
 
 ## Example
 
-{% codetabs %}
-{% ES5 %}
-
-```js
-wp.blocks.registerBlockType( /* ... */, {
-	// ...
-
-	attributes: {
-		content: {
-			source: 'html',
-			selector: 'div',
-		},
-	},
-
-	edit: function( props ) {
-		return React.createElement( wp.editor.EditableText, {
-			className: props.className,
-			value: props.attributes.content,
-			onChange: function( content ) {
-				props.setAttributes( { content: content } );
-			}
-		} );
-	},
-
-	save: function( props ) {
-		return React.createElement( wp.editor.EditableText.Content, {
-			value: props.attributes.content
-		} );
-	}
-} );
-```
-
-{% ESNext %}
-
 ```js
 const { registerBlockType } = wp.blocks;
 const { EditableText } = wp.editor;
@@ -110,5 +76,3 @@ registerBlockType( /* ... */, {
 	}
 } );
 ```
-
-{% end %}

package/src/components/editable-text/index.js

@@ -9,14 +9,7 @@ import { forwardRef } from '@wordpress/element';
 import RichText from '../rich-text';
 
 const EditableText = forwardRef( ( props, ref ) => {
-	return (
-		<RichText
-			ref={ ref }
-			{ ...props }
-			__unstableDisableFormats
-			preserveWhiteSpace
-		/>
-	);
+	return <RichText ref={ ref } { ...props } __unstableDisableFormats />;
 } );
 
 EditableText.Content = ( { value = '', tagName: Tag = 'div', ...props } ) => {

package/src/components/global-styles/advanced-panel.js

@@ -30,7 +30,7 @@ export default function AdvancedPanel( {
 		} );
 		if ( cssError ) {
 			const [ transformed ] = transformStyles(
-				[ { css: value } ],
+				[ { css: newValue } ],
 				'.editor-styles-wrapper'
 			);
 			if ( transformed ) {

package/src/components/iframe/index.js

@@ -73,12 +73,13 @@ function bubbleEvent( event, Constructor, frame ) {
  * @param {Document} iframeDocument Document to attach listeners to.
  */
 function useBubbleEvents( iframeDocument ) {
-	return useRefEffect( ( body ) => {
+	return useRefEffect( () => {
 		const { defaultView } = iframeDocument;
 		if ( ! defaultView ) {
 			return;
 		}
 		const { frameElement } = defaultView;
+		const html = iframeDocument.documentElement;
 		const eventTypes = [ 'dragover', 'mousemove' ];
 		const handlers = {};
 		for ( const name of eventTypes ) {
@@ -88,12 +89,12 @@ function useBubbleEvents( iframeDocument ) {
 				const Constructor = window[ constructorName ];
 				bubbleEvent( event, Constructor, frameElement );
 			};
-			body.addEventListener( name, handlers[ name ] );
+			html.addEventListener( name, handlers[ name ] );
 		}
 
 		return () => {
 			for ( const name of eventTypes ) {
-				body.removeEventListener( name, handlers[ name ] );
+				html.removeEventListener( name, handlers[ name ] );
 			}
 		};
 	} );

package/src/components/image-size-control/index.js

@@ -8,7 +8,6 @@ import {
 	__experimentalNumberControl as NumberControl,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -31,11 +30,6 @@ export default function ImageSizeControl( {
 	onChange,
 	onChangeImage = noop,
 } ) {
-	deprecated( 'wp.blockEditor.__experimentalImageSizeControl', {
-		since: '6.3',
-		alternative:
-			'wp.blockEditor.privateApis.DimensionsTool and wp.blockEditor.privateApis.ResolutionTool',
-	} );
 	const { currentHeight, currentWidth, updateDimension, updateDimensions } =
 		useDimensionHandler( height, width, imageHeight, imageWidth, onChange );
 

package/src/components/inner-blocks/index.js

@@ -169,8 +169,11 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => {
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md
  */
 export function useInnerBlocksProps( props = {}, options = {} ) {
-	const { __unstableDisableLayoutClassNames, __unstableDisableDropZone } =
-		options;
+	const {
+		__unstableDisableLayoutClassNames,
+		__unstableDisableDropZone,
+		dropZoneElement,
+	} = options;
 	const {
 		clientId,
 		layout = null,
@@ -211,6 +214,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	);
 
 	const blockDropZoneRef = useBlockDropZone( {
+		dropZoneElement,
 		rootClientId: clientId,
 	} );
 

package/src/components/inner-blocks/warning-max-depth-exceeded.native.js

@@ -8,7 +8,7 @@ import { TouchableWithoutFeedback, View } from 'react-native';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -18,54 +18,71 @@ import UnsupportedBlockDetails from '../unsupported-block-details';
 import { store as blockEditorStore } from '../../store';
 import { MAX_NESTING_DEPTH } from './constants';
 import useUnsupportedBlockEditor from '../use-unsupported-block-editor';
+import {
+	useConvertToGroupButtons,
+	useConvertToGroupButtonProps,
+} from '../convert-to-group-buttons';
+
+const EMPTY_ARRAY = [];
 
 const WarningMaxDepthExceeded = ( { clientId } ) => {
 	const [ showDetails, setShowDetails ] = useState( false );
 
-	const { isSelected, innerBlocks } = useSelect(
-		( select ) => {
-			const { getBlock, isBlockSelected } = select( blockEditorStore );
-			return {
-				innerBlocks: getBlock( clientId )?.innerBlocks || [],
-				isSelected: isBlockSelected( clientId ),
-			};
-		},
+	const isSelected = useSelect(
+		( select ) => select( blockEditorStore ).isBlockSelected( clientId ),
 		[ clientId ]
 	);
-	const { replaceBlocks } = useDispatch( blockEditorStore );
+
+	// We rely on the logic related to the Group/Ungroup buttons used in the block options to
+	// determine whether to use the Ungroup action.
+	const convertToGroupButtonProps = useConvertToGroupButtonProps( [
+		clientId,
+	] );
+	const { isUngroupable } = convertToGroupButtonProps;
+	const convertToGroupButtons = useConvertToGroupButtons( {
+		...convertToGroupButtonProps,
+	} );
+	const onUngroup = convertToGroupButtons.ungroup.onSelect;
 
 	const {
 		isUnsupportedBlockEditorSupported,
 		canEnableUnsupportedBlockEditor,
 	} = useUnsupportedBlockEditor( clientId );
 
-	const onUngroup = () => {
-		if ( ! innerBlocks.length ) {
-			return;
-		}
-
-		replaceBlocks( clientId, innerBlocks );
-	};
-
-	let description;
-	// When UBE can't be used, the description mentions using the web browser to edit the block.
+	/* translators: Warning related to having blocks deeply nested. %d: The deepest nesting level. */
+	const descriptionFormat = __(
+		'Blocks nested deeper than %d levels may not render properly in the mobile editor.'
+	);
+	let description = sprintf( descriptionFormat, MAX_NESTING_DEPTH );
 	if (
 		! isUnsupportedBlockEditorSupported &&
 		! canEnableUnsupportedBlockEditor
 	) {
-		/* translators: Warning related to having blocks deeply nested. %d: The deepest nesting level. */
-		const descriptionFormat = __(
-			'Blocks nested deeper than %d levels may not render properly in the mobile editor. For this reason, we recommend flattening the content by ungrouping the block or editing the block using your web browser.'
-		);
-		description = sprintf( descriptionFormat, MAX_NESTING_DEPTH );
+		// When UBE can't be used, the description mentions using the web browser to edit the block.
+		description +=
+			' ' +
+			/* translators: Recommendation included in a warning related to having blocks deeply nested. */
+			__(
+				'For this reason, we recommend editing the block using your web browser.'
+			);
 	}
 	// Otherwise, the description mentions using the web editor (i.e. UBE).
 	else {
-		/* translators: Warning related to having blocks deeply nested. %d: The deepest nesting level. */
-		const descriptionFormat = __(
-			'Blocks nested deeper than %d levels may not render properly in the mobile editor. For this reason, we recommend flattening the content by ungrouping the block or editing the block using the web editor.'
-		);
-		description = sprintf( descriptionFormat, MAX_NESTING_DEPTH );
+		description +=
+			' ' +
+			/* translators: Recommendation included in a warning related to having blocks deeply nested. */
+			__(
+				'For this reason, we recommend editing the block using the web editor.'
+			);
+	}
+	// If the block can be flattened, we also suggest to ungroup the block.
+	if ( isUngroupable ) {
+		description +=
+			' ' +
+			/* translators: Alternative option included in a warning related to having blocks deeply nested. */
+			__(
+				'Alternatively, you can flatten the content by ungrouping the block.'
+			);
 	}
 
 	return (
@@ -88,9 +105,16 @@ const WarningMaxDepthExceeded = ( { clientId } ) => {
 					onCloseSheet={ () => setShowDetails( false ) }
 					title={ __( 'Deeply nested block' ) }
 					description={ description }
-					customActions={ [
-						{ label: __( 'Ungroup block' ), onPress: onUngroup },
-					] }
+					customActions={
+						isUngroupable
+							? [
+									{
+										label: __( 'Ungroup block' ),
+										onPress: onUngroup,
+									},
+							  ]
+							: EMPTY_ARRAY
+					}
 				/>
 			</View>
 		</TouchableWithoutFeedback>

package/src/components/inserter/block-patterns-explorer/{explorer.js → index.js}

@@ -8,9 +8,9 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import PatternExplorerSidebar from './sidebar';
-import PatternList from './patterns-list';
-import { usePatternsCategories } from '../block-patterns-tab';
+import PatternExplorerSidebar from './pattern-explorer-sidebar';
+import PatternList from './pattern-list';
+import { usePatternCategories } from '../block-patterns-tab/use-pattern-categories';
 
 function PatternsExplorer( { initialCategory, rootClientId } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
@@ -20,7 +20,7 @@ function PatternsExplorer( { initialCategory, rootClientId } ) {
 		initialCategory?.name
 	);
 
-	const patternCategories = usePatternsCategories(
+	const patternCategories = usePatternCategories(
 		rootClientId,
 		patternSourceFilter
 	);

package/src/components/inserter/block-patterns-explorer/{patterns-list.js → pattern-list.js}

@@ -17,7 +17,11 @@ import InserterListbox from '../../inserter-listbox';
 import { searchItems } from '../search-items';
 import BlockPatternsPaging from '../../block-patterns-paging';
 import usePatternsPaging from '../hooks/use-patterns-paging';
-import { allPatternsCategory, myPatternsCategory } from '../block-patterns-tab';
+import {
+	PATTERN_TYPES,
+	allPatternsCategory,
+	myPatternsCategory,
+} from '../block-patterns-tab/utils';
 
 function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
 	if ( ! filterValue ) {
@@ -67,7 +71,10 @@ function PatternList( { searchValue, selectedCategory, patternCategories } ) {
 			if ( selectedCategory === allPatternsCategory.name ) {
 				return true;
 			}
-			if ( selectedCategory === myPatternsCategory.name && pattern.id ) {
+			if (
+				selectedCategory === myPatternsCategory.name &&
+				pattern.type === PATTERN_TYPES.user
+			) {
 				return true;
 			}
 			if ( selectedCategory === 'uncategorized' ) {