@wordpress/block-editor 11.3.4 → 11.3.6

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 {
@@ -3841,6 +3857,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 +3884,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 +4054,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 {
@@ -3841,6 +3857,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 +3884,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 +4054,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.4",
+	"version": "11.3.6",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,26 +36,26 @@
 		"@wordpress/a11y": "^3.26.1",
 		"@wordpress/api-fetch": "^6.23.1",
 		"@wordpress/blob": "^3.26.1",
-		"@wordpress/blocks": "^12.3.2",
-		"@wordpress/components": "^23.3.3",
-		"@wordpress/compose": "^6.3.2",
-		"@wordpress/data": "^8.3.2",
+		"@wordpress/blocks": "^12.3.3",
+		"@wordpress/components": "^23.3.5",
+		"@wordpress/compose": "^6.3.3",
+		"@wordpress/data": "^8.3.3",
 		"@wordpress/date": "^4.26.2",
 		"@wordpress/deprecated": "^3.26.1",
 		"@wordpress/dom": "^3.26.1",
-		"@wordpress/element": "^5.3.1",
+		"@wordpress/element": "^5.3.2",
 		"@wordpress/escape-html": "^2.26.1",
 		"@wordpress/hooks": "^3.26.1",
 		"@wordpress/html-entities": "^3.26.1",
 		"@wordpress/i18n": "^4.26.1",
-		"@wordpress/icons": "^9.17.1",
+		"@wordpress/icons": "^9.17.2",
 		"@wordpress/is-shallow-equal": "^4.26.1",
-		"@wordpress/keyboard-shortcuts": "^4.3.2",
+		"@wordpress/keyboard-shortcuts": "^4.3.3",
 		"@wordpress/keycodes": "^3.26.2",
-		"@wordpress/notices": "^3.26.2",
-		"@wordpress/preferences": "^3.3.3",
+		"@wordpress/notices": "^3.26.3",
+		"@wordpress/preferences": "^3.3.5",
 		"@wordpress/private-apis": "^0.8.1",
-		"@wordpress/rich-text": "^6.3.2",
+		"@wordpress/rich-text": "^6.3.3",
 		"@wordpress/shortcode": "^3.26.1",
 		"@wordpress/style-engine": "^1.9.1",
 		"@wordpress/token-list": "^2.26.1",
@@ -83,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ccabeeffe1fe117c3934ec7705c15d52857d9a87"
+	"gitHead": "35f10c183655e9196d4ea12b8fa499a8ecbb7b6a"
 }

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/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 }
 				/>
 			) ) }