@wordpress/block-editor 11.3.5 → 11.3.7

package/build-style/style-rtl.css

@@ -1699,6 +1699,7 @@
   width: calc(100% - 32px);
   display: block;
   padding: 11px 16px;
+  padding-left: 36px;
   margin: 0;
   position: relative;
   border: 1px solid #ddd;
@@ -1738,10 +1739,20 @@
 }
 
 .block-editor-link-control__search-actions {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: flex-start;
-  gap: 8px;
+  position: absolute;
+  /*
+   * Actions must be positioned on top of URLInput, since the input will grow
+   * when suggestions are rendered.
+   *
+   * Compensate for:
+   *  - Border (1px)
+   *  - Vertically, for the difference in height between the input (40px) and
+   *    the icon buttons.
+   *  - Horizontally, pad to the minimum of: default input padding, or the
+   *    equivalent of the vertical padding.
+   */
+  top: 3px;
+  left: 19px;
 }
 
 .components-button .block-editor-link-control__search-submit .has-icon {
@@ -2026,10 +2037,9 @@
   padding: 10px;
 }
 
-.block-editor-link-control__drawer {
+.block-editor-link-control__tools {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   border-top: 1px solid #ddd;
   margin: 0;
   padding: 16px;
@@ -2065,8 +2075,14 @@
   position: absolute;
   right: auto;
   bottom: auto;
+  /*
+   * Position spinner to the left of the actions.
+   *
+   * Compensate for:
+   *  - Input padding right ($button-size)
+   */
   top: calc(50% - 16px / 2);
-  left: 16px;
+  left: 36px;
 }
 
 .block-editor-link-control__search-item-action {
@@ -3276,6 +3292,7 @@
 .block-editor-inserter__popover.is-quick .components-popover__content {
   border: none;
   outline: none;
+  box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1);
 }
 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > * {
   border-right: 1px solid #ccc;
@@ -3283,9 +3300,11 @@
 }
 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:first-child {
   border-top: 1px solid #ccc;
+  border-radius: 2px 2px 0 0;
 }
 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:last-child {
   border-bottom: 1px solid #ccc;
+  border-radius: 0 0 2px 2px;
 }
 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *.components-button {
   border: 1px solid #1e1e1e;
@@ -3841,6 +3860,16 @@
   margin: 0 auto;
   max-width: 100%;
 }
+.block-editor-inserter__media-list .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview .block-editor-inserter__media-list__item-preview-spinner {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.7);
+  align-items: center;
+  pointer-events: none;
+}
 .block-editor-inserter__media-list .block-editor-inserter__media-list__item:focus .block-editor-inserter__media-list__item-preview {
   box-shadow: inset 0 0 0 2px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
@@ -3858,6 +3887,15 @@
   height: 100%;
 }
 
+@media (min-width: 600px) {
+  .block-editor-inserter-media-tab-media-preview-inserter-external-image-modal {
+    max-width: 480px;
+  }
+}
+.block-editor-inserter-media-tab-media-preview-inserter-external-image-modal p {
+  margin: 0;
+}
+
 .block-editor-post-preview__dropdown {
   padding: 0;
 }
@@ -4019,7 +4057,7 @@
 .component-spacing-sizes-control .components-range-control__marks :first-child {
   display: none;
 }
-.component-spacing-sizes-control [class*=ThumbWrapper-thumbColor] {
+.component-spacing-sizes-control .components-range-control__thumb-wrapper {
   z-index: 3;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-select-control {

package/build-style/style.css

@@ -1699,6 +1699,7 @@
   width: calc(100% - 32px);
   display: block;
   padding: 11px 16px;
+  padding-right: 36px;
   margin: 0;
   position: relative;
   border: 1px solid #ddd;
@@ -1738,10 +1739,20 @@
 }
 
 .block-editor-link-control__search-actions {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: flex-start;
-  gap: 8px;
+  position: absolute;
+  /*
+   * Actions must be positioned on top of URLInput, since the input will grow
+   * when suggestions are rendered.
+   *
+   * Compensate for:
+   *  - Border (1px)
+   *  - Vertically, for the difference in height between the input (40px) and
+   *    the icon buttons.
+   *  - Horizontally, pad to the minimum of: default input padding, or the
+   *    equivalent of the vertical padding.
+   */
+  top: 3px;
+  right: 19px;
 }
 
 .components-button .block-editor-link-control__search-submit .has-icon {
@@ -2026,10 +2037,9 @@
   padding: 10px;
 }
 
-.block-editor-link-control__drawer {
+.block-editor-link-control__tools {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   border-top: 1px solid #ddd;
   margin: 0;
   padding: 16px;
@@ -2065,8 +2075,14 @@
   position: absolute;
   left: auto;
   bottom: auto;
+  /*
+   * Position spinner to the left of the actions.
+   *
+   * Compensate for:
+   *  - Input padding right ($button-size)
+   */
   top: calc(50% - 16px / 2);
-  right: 16px;
+  right: 36px;
 }
 
 .block-editor-link-control__search-item-action {
@@ -3276,6 +3292,7 @@
 .block-editor-inserter__popover.is-quick .components-popover__content {
   border: none;
   outline: none;
+  box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1);
 }
 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > * {
   border-left: 1px solid #ccc;
@@ -3283,9 +3300,11 @@
 }
 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:first-child {
   border-top: 1px solid #ccc;
+  border-radius: 2px 2px 0 0;
 }
 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:last-child {
   border-bottom: 1px solid #ccc;
+  border-radius: 0 0 2px 2px;
 }
 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *.components-button {
   border: 1px solid #1e1e1e;
@@ -3841,6 +3860,16 @@
   margin: 0 auto;
   max-width: 100%;
 }
+.block-editor-inserter__media-list .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview .block-editor-inserter__media-list__item-preview-spinner {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.7);
+  align-items: center;
+  pointer-events: none;
+}
 .block-editor-inserter__media-list .block-editor-inserter__media-list__item:focus .block-editor-inserter__media-list__item-preview {
   box-shadow: inset 0 0 0 2px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
@@ -3858,6 +3887,15 @@
   height: 100%;
 }
 
+@media (min-width: 600px) {
+  .block-editor-inserter-media-tab-media-preview-inserter-external-image-modal {
+    max-width: 480px;
+  }
+}
+.block-editor-inserter-media-tab-media-preview-inserter-external-image-modal p {
+  margin: 0;
+}
+
 .block-editor-post-preview__dropdown {
   padding: 0;
 }
@@ -4019,7 +4057,7 @@
 .component-spacing-sizes-control .components-range-control__marks :first-child {
   display: none;
 }
-.component-spacing-sizes-control [class*=ThumbWrapper-thumbColor] {
+.component-spacing-sizes-control .components-range-control__thumb-wrapper {
   z-index: 3;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-select-control {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "11.3.5",
+	"version": "11.3.7",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,7 +37,7 @@
 		"@wordpress/api-fetch": "^6.23.1",
 		"@wordpress/blob": "^3.26.1",
 		"@wordpress/blocks": "^12.3.3",
-		"@wordpress/components": "^23.3.4",
+		"@wordpress/components": "^23.3.5",
 		"@wordpress/compose": "^6.3.3",
 		"@wordpress/data": "^8.3.3",
 		"@wordpress/date": "^4.26.2",
@@ -53,7 +53,7 @@
 		"@wordpress/keyboard-shortcuts": "^4.3.3",
 		"@wordpress/keycodes": "^3.26.2",
 		"@wordpress/notices": "^3.26.3",
-		"@wordpress/preferences": "^3.3.4",
+		"@wordpress/preferences": "^3.3.5",
 		"@wordpress/private-apis": "^0.8.1",
 		"@wordpress/rich-text": "^6.3.3",
 		"@wordpress/shortcode": "^3.26.1",
@@ -83,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1e2b2f680c6378f789d6660bc04b30e35e3a33a3"
+	"gitHead": "8ce158f9e03a25797be5a6f16edd7509d62e90e4"
 }

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

@@ -36,6 +36,7 @@ import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
 import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 import PositionControls from '../inspector-controls-tabs/position-controls-panel';
+import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
 
 function useContentBlocks( blockTypes, block ) {
 	const contentBlocksObjectAux = useMemo( () => {
@@ -56,7 +57,7 @@ function useContentBlocks( blockTypes, block ) {
 		( blockName ) => {
 			return !! contentBlocksObjectAux[ blockName ];
 		},
-		[ blockTypes ]
+		[ contentBlocksObjectAux ]
 	);
 	return useMemo( () => {
 		return getContentBlocks( [ block ], isContentBlock );
@@ -173,19 +174,15 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 	const availableTabs = useInspectorControlsTabs( blockType?.name );
 	const showTabs = availableTabs?.length > 1;
 
-	const blockInspectorAnimationSettings = useSelect(
-		( select ) => {
-			if ( blockType ) {
-				const globalBlockInspectorAnimationSettings =
-					select( blockEditorStore ).getSettings()
-						.blockInspectorAnimation;
-				return globalBlockInspectorAnimationSettings?.[
-					blockType.name
-				];
-			}
-			return null;
-		},
-		[ selectedBlockClientId, blockType ]
+	// The block inspector animation settings will be completely
+	// removed in the future to create an API which allows the block
+	// inspector to transition between what it
+	// displays based on the relationship between the selected block
+	// and its parent, and only enable it if the parent is controlling
+	// its children blocks.
+	const blockInspectorAnimationSettings = useBlockInspectorAnimationSettings(
+		blockType,
+		selectedBlockClientId
 	);
 
 	if ( count > 1 ) {

package/src/components/block-inspector/useBlockInspectorAnimationSettings.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export default function useBlockInspectorAnimationSettings(
+	blockType,
+	selectedBlockClientId
+) {
+	return useSelect(
+		( select ) => {
+			if ( blockType ) {
+				const globalBlockInspectorAnimationSettings =
+					select( blockEditorStore ).getSettings()
+						.blockInspectorAnimation;
+
+				// Get the name of the block that will allow it's children to be animated.
+				const animationParent =
+					globalBlockInspectorAnimationSettings?.animationParent;
+
+				// Determine whether the animationParent block is a parent of the selected block.
+				const { getSelectedBlockClientId, getBlockParentsByBlockName } =
+					select( blockEditorStore );
+				const _selectedBlockClientId = getSelectedBlockClientId();
+				const animationParentBlockClientId = getBlockParentsByBlockName(
+					_selectedBlockClientId,
+					animationParent,
+					true
+				)[ 0 ];
+
+				// If the selected block is not a child of the animationParent block,
+				// and not an animationParent block itself, don't animate.
+				if (
+					! animationParentBlockClientId &&
+					blockType.name !== animationParent
+				) {
+					return null;
+				}
+
+				return globalBlockInspectorAnimationSettings?.[
+					blockType.name
+				];
+			}
+			return null;
+		},
+		[ selectedBlockClientId, blockType ]
+	);
+}

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -147,7 +147,9 @@ export function BlockSettingsDropdown( {
 		__experimentalSelectBlock
 			? () => {
 					const blockToSelect =
-						previousBlockClientId || nextBlockClientId;
+						previousBlockClientId ||
+						nextBlockClientId ||
+						firstParentClientId;
 
 					if (
 						blockToSelect &&
@@ -166,6 +168,7 @@ export function BlockSettingsDropdown( {
 			__experimentalSelectBlock,
 			previousBlockClientId,
 			nextBlockClientId,
+			firstParentClientId,
 			selectedBlockClientIds,
 		]
 	);

package/src/components/inserter/index.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { speak } from '@wordpress/a11y';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { Dropdown, Button } from '@wordpress/components';
-import { Component } from '@wordpress/element';
+import { forwardRef, Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, ifCondition } from '@wordpress/compose';
 import { createBlock, store as blocksStore } from '@wordpress/blocks';
@@ -31,21 +31,26 @@ const defaultRenderToggle = ( {
 	toggleProps = {},
 	prioritizePatterns,
 } ) => {
-	let label;
-	if ( hasSingleBlockType ) {
+	const {
+		as: Wrapper = Button,
+		label: labelProp,
+		onClick,
+		...rest
+	} = toggleProps;
+
+	let label = labelProp;
+	if ( ! label && hasSingleBlockType ) {
 		label = sprintf(
 			// translators: %s: the name of the block when there is only one
 			_x( 'Add %s', 'directly add the only allowed block' ),
 			blockTitle
 		);
-	} else if ( prioritizePatterns ) {
+	} else if ( ! label && prioritizePatterns ) {
 		label = __( 'Add pattern' );
-	} else {
+	} else if ( ! label ) {
 		label = _x( 'Add block', 'Generic label for block inserter button' );
 	}
 
-	const { onClick, ...rest } = toggleProps;
-
 	// Handle both onClick functions from the toggle and the parent component.
 	function handleClick( event ) {
 		if ( onToggle ) {
@@ -57,7 +62,7 @@ const defaultRenderToggle = ( {
 	}
 
 	return (
-		<Button
+		<Wrapper
 			icon={ plus }
 			label={ label }
 			tooltipPosition="bottom"
@@ -71,7 +76,7 @@ const defaultRenderToggle = ( {
 	);
 };
 
-class Inserter extends Component {
+class PrivateInserter extends Component {
 	constructor() {
 		super( ...arguments );
 
@@ -145,6 +150,7 @@ class Inserter extends Component {
 			prioritizePatterns,
 			onSelectOrClose,
 			selectBlockOnInsert,
+			orderInitialBlockItems,
 		} = this.props;
 
 		if ( isQuick ) {
@@ -168,6 +174,7 @@ class Inserter extends Component {
 					isAppender={ isAppender }
 					prioritizePatterns={ prioritizePatterns }
 					selectBlockOnInsert={ selectBlockOnInsert }
+					orderInitialBlockItems={ orderInitialBlockItems }
 				/>
 			);
 		}
@@ -219,7 +226,7 @@ class Inserter extends Component {
 	}
 }
 
-export default compose( [
+export const ComposedPrivateInserter = compose( [
 	withSelect(
 		( select, { clientId, rootClientId, shouldDirectInsert = true } ) => {
 			const {
@@ -416,4 +423,16 @@ export default compose( [
 		( { hasItems, isAppender, rootClientId, clientId } ) =>
 			hasItems || ( ! isAppender && ! rootClientId && ! clientId )
 	),
-] )( Inserter );
+] )( PrivateInserter );
+
+const Inserter = forwardRef( ( props, ref ) => {
+	return (
+		<ComposedPrivateInserter
+			ref={ ref }
+			{ ...props }
+			orderInitialBlockItems={ undefined }
+		/>
+	);
+} );
+
+export default Inserter;

package/src/components/inserter/media-tab/hooks.js

@@ -98,13 +98,6 @@ function useInserterMediaCategories() {
 			) {
 				return false;
 			}
-			// When a category has set `isExternalResource` to `true`, we
-			// don't need to check for allowed mime types, as they are used
-			// for restricting uploads for this media type and not for
-			// inserting media from external sources.
-			if ( category.isExternalResource ) {
-				return true;
-			}
 			return Object.values( allowedMimeTypes ).some( ( mimeType ) =>
 				mimeType.startsWith( `${ category.mediaType }/` )
 			);
@@ -156,7 +149,15 @@ export function useMediaCategories( rootClientId ) {
 						if ( category.isExternalResource ) {
 							return [ category.name, true ];
 						}
-						const results = await category.fetch( { per_page: 1 } );
+						let results = [];
+						try {
+							results = await category.fetch( {
+								per_page: 1,
+							} );
+						} catch ( e ) {
+							// If the request fails, we shallow the error and just don't show
+							// the category, in order to not break the media tab.
+						}
 						return [ category.name, !! results.length ];
 					} )
 				)

package/src/components/inserter/media-tab/media-list.js

@@ -1,129 +1,16 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import {
 	__unstableComposite as Composite,
 	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
-	Tooltip,
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { useMemo, useCallback, useState } from '@wordpress/element';
-import { cloneBlock } from '@wordpress/blocks';
-import { moreVertical, external } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import InserterDraggableBlocks from '../../inserter-draggable-blocks';
-import { getBlockAndPreviewFromMedia } from './utils';
-
-const MAXIMUM_TITLE_LENGTH = 25;
-const MEDIA_OPTIONS_POPOVER_PROPS = {
-	position: 'bottom left',
-	className:
-		'block-editor-inserter__media-list__item-preview-options__popover',
-};
-
-function MediaPreviewOptions( { category, media } ) {
-	if ( ! category.getReportUrl ) {
-		return null;
-	}
-	const reportUrl = category.getReportUrl( media );
-	return (
-		<DropdownMenu
-			className="block-editor-inserter__media-list__item-preview-options"
-			label={ __( 'Options' ) }
-			popoverProps={ MEDIA_OPTIONS_POPOVER_PROPS }
-			icon={ moreVertical }
-		>
-			{ () => (
-				<MenuGroup>
-					<MenuItem
-						onClick={ () =>
-							window.open( reportUrl, '_blank' ).focus()
-						}
-						icon={ external }
-					>
-						{ sprintf(
-							/* translators: %s: The media type to report e.g: "image", "video", "audio" */
-							__( 'Report %s' ),
-							category.mediaType
-						) }
-					</MenuItem>
-				</MenuGroup>
-			) }
-		</DropdownMenu>
-	);
-}
-
-function MediaPreview( { media, onClick, composite, category } ) {
-	const [ isHovered, setIsHovered ] = useState( false );
-	const [ block, preview ] = useMemo(
-		() => getBlockAndPreviewFromMedia( media, category.mediaType ),
-		[ media, category.mediaType ]
-	);
-	const title = media.title?.rendered || media.title;
-	let truncatedTitle;
-	if ( title.length > MAXIMUM_TITLE_LENGTH ) {
-		const omission = '...';
-		truncatedTitle =
-			title.slice( 0, MAXIMUM_TITLE_LENGTH - omission.length ) + omission;
-	}
-	const onMouseEnter = useCallback( () => setIsHovered( true ), [] );
-	const onMouseLeave = useCallback( () => setIsHovered( false ), [] );
-	return (
-		<InserterDraggableBlocks isEnabled={ true } blocks={ [ block ] }>
-			{ ( { draggable, onDragStart, onDragEnd } ) => (
-				<div
-					className={ classnames(
-						'block-editor-inserter__media-list__list-item',
-						{
-							'is-hovered': isHovered,
-						}
-					) }
-					draggable={ draggable }
-					onDragStart={ onDragStart }
-					onDragEnd={ onDragEnd }
-				>
-					<Tooltip text={ truncatedTitle || title }>
-						{ /* Adding `is-hovered` class to the wrapper element is needed
-							because the options Popover is rendered outside of this node. */ }
-						<div
-							onMouseEnter={ onMouseEnter }
-							onMouseLeave={ onMouseLeave }
-						>
-							<CompositeItem
-								role="option"
-								as="div"
-								{ ...composite }
-								className="block-editor-inserter__media-list__item"
-								onClick={ () => onClick( block ) }
-								aria-label={ title }
-							>
-								<div className="block-editor-inserter__media-list__item-preview">
-									{ preview }
-								</div>
-							</CompositeItem>
-							<MediaPreviewOptions
-								category={ category }
-								media={ media }
-							/>
-						</div>
-					</Tooltip>
-				</div>
-			) }
-		</InserterDraggableBlocks>
-	);
-}
+import { MediaPreview } from './media-preview';
 
 function MediaList( {
 	mediaList,
@@ -132,12 +19,6 @@ function MediaList( {
 	label = __( 'Media List' ),
 } ) {
 	const composite = useCompositeState();
-	const onPreviewClick = useCallback(
-		( block ) => {
-			onClick( cloneBlock( block ) );
-		},
-		[ onClick ]
-	);
 	return (
 		<Composite
 			{ ...composite }
@@ -150,7 +31,7 @@ function MediaList( {
 					key={ media.id || media.sourceId || index }
 					media={ media }
 					category={ category }
-					onClick={ onPreviewClick }
+					onClick={ onClick }
 					composite={ composite }
 				/>
 			) ) }