@wordpress/block-editor 11.2.0 → 11.3.1

package/src/components/inserter/stories/index.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import BlockLibrary from '../library';
-import BlockEditorProvider from '../../provider';
+import { ExperimentalBlockEditorProvider } from '../../provider';
 import { patternCategories, patterns, reusableBlocks } from './utils/fixtures';
 import Inserter from '../';
 
@@ -16,11 +16,11 @@ export const libraryWithoutPatterns = () => {
 		display: 'inline-block',
 	};
 	return (
-		<BlockEditorProvider>
+		<ExperimentalBlockEditorProvider>
 			<div style={ wrapperStyle }>
 				<BlockLibrary showInserterHelpPanel />
 			</div>
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 };
 
@@ -32,7 +32,7 @@ export const libraryWithPatterns = () => {
 		display: 'inline-block',
 	};
 	return (
-		<BlockEditorProvider
+		<ExperimentalBlockEditorProvider
 			settings={ {
 				__experimentalBlockPatternCategories: patternCategories,
 				__experimentalBlockPatterns: patterns,
@@ -41,7 +41,7 @@ export const libraryWithPatterns = () => {
 			<div style={ wrapperStyle }>
 				<BlockLibrary showInserterHelpPanel />
 			</div>
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 };
 
@@ -53,7 +53,7 @@ export const libraryWithPatternsAndReusableBlocks = () => {
 		display: 'inline-block',
 	};
 	return (
-		<BlockEditorProvider
+		<ExperimentalBlockEditorProvider
 			settings={ {
 				__experimentalBlockPatternCategories: patternCategories,
 				__experimentalBlockPatterns: patterns,
@@ -63,7 +63,7 @@ export const libraryWithPatternsAndReusableBlocks = () => {
 			<div style={ wrapperStyle }>
 				<BlockLibrary showInserterHelpPanel />
 			</div>
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 };
 
@@ -75,7 +75,7 @@ export const quickInserter = () => {
 		display: 'inline-block',
 	};
 	return (
-		<BlockEditorProvider
+		<ExperimentalBlockEditorProvider
 			settings={ {
 				__experimentalBlockPatternCategories: patternCategories,
 				__experimentalBlockPatterns: patterns,
@@ -85,6 +85,6 @@ export const quickInserter = () => {
 			<div style={ wrapperStyle }>
 				<Inserter __experimentalIsQuick />
 			</div>
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 };

package/src/components/inserter/style.scss

@@ -564,8 +564,10 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__media-panel {
-	height: 100%;
+	min-height: 100%;
 	padding: 0 $grid-unit-20;
+	display: flex;
+	flex-direction: column;
 
 	@include break-medium {
 		padding: 0;
@@ -576,6 +578,7 @@ $block-inserter-tabs-height: 44px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		flex: 1;
 	}
 
 	.block-editor-inserter__media-panel-search {
@@ -583,13 +586,19 @@ $block-inserter-tabs-height: 44px;
 			input[type="search"].components-search-control__input {
 				background: $white;
 			}
+			button.components-button {
+				min-width: auto;
+				padding-left: $grid-unit-05 * 0.5;
+				padding-right: $grid-unit-05 * 0.5;
+			}
 		}
 	}
 }
 
 .block-editor-inserter__media-list {
 	margin-top: $grid-unit-20;
-	&__list-item {
+	.block-editor-inserter__media-list__list-item {
+		position: relative;
 		cursor: pointer;
 		margin-bottom: $grid-unit-30;
 
@@ -600,16 +609,52 @@ $block-inserter-tabs-height: 44px;
 		&[draggable="true"] .block-editor-block-preview__container {
 			cursor: grab;
 		}
+
+		&.is-hovered {
+			.block-editor-inserter__media-list__item-preview {
+				box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
+			}
+
+			.block-editor-inserter__media-list__item-preview-options > button {
+				display: block;
+			}
+		}
+
+		.block-editor-inserter__media-list__item-preview-options {
+			position: absolute;
+			right: $grid-unit-10;
+			top: $grid-unit-10;
+
+			> button {
+				background: $white;
+				border-radius: $radius-block-ui;
+				display: none;
+
+				// These styles are important so as focus isn't lost
+				// when the button is focused and we hover away.
+				&.is-opened,
+				&:focus {
+					display: block;
+				}
+
+				&:hover {
+					box-shadow: inset 0 0 0 2px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+					// Windows High Contrast mode will show this outline, but not the box-shadow.
+					outline: 2px solid transparent;
+				}
+			}
+		}
 	}
 
-	&__item {
+	.block-editor-inserter__media-list__item {
 		height: 100%;
 
-		&-preview {
+		.block-editor-inserter__media-list__item-preview {
 			display: flex;
 			align-items: center;
 			overflow: hidden;
-			border-radius: 4px;
+			border-radius: 2px;
 
 			> * {
 				margin: 0 auto;
@@ -617,12 +662,8 @@ $block-inserter-tabs-height: 44px;
 			}
 		}
 
-		&:hover &-preview {
-			box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
-		}
-
-		&:focus &-preview {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		&:focus .block-editor-inserter__media-list__item-preview {
+			box-shadow: inset 0 0 0 2px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 
 			// Windows High Contrast mode will show this outline, but not the box-shadow.
 			outline: 2px solid transparent;
@@ -630,6 +671,12 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
+.block-editor-inserter__media-list__item-preview-options__popover {
+	.components-menu-item__button .components-menu-item__item {
+		min-width: auto;
+	}
+}
+
 
 .block-editor-inserter__mobile-tab-navigation {
 	padding: $grid-unit-20;

package/src/components/inserter-list-item/index.js

@@ -107,12 +107,6 @@ function InserterListItem( {
 								onHover( null );
 							}
 						} }
-						onFocus={ () => {
-							if ( isDragging.current ) {
-								return;
-							}
-							onHover( item );
-						} }
 						onMouseEnter={ () => {
 							if ( isDragging.current ) {
 								return;
@@ -120,7 +114,6 @@ function InserterListItem( {
 							onHover( item );
 						} }
 						onMouseLeave={ () => onHover( null ) }
-						onBlur={ () => onHover( null ) }
 						{ ...props }
 					>
 						<span

package/src/components/inspector-controls/README.md

@@ -188,9 +188,7 @@ Inspector Advanced Controls appear under the _Advanced_ panel of a block's [Insp
 ### Usage
 
 ```js
-import {
-	TextControl,
-} from '@wordpress/components';
+import { TextControl } from '@wordpress/components';
 import {
 	InspectorControls,
 	InspectorAdvancedControls,
@@ -199,11 +197,9 @@ import {
 function MyBlockEdit( { attributes, setAttributes } ) {
 	return (
 		<>
-			<div>
-				{ /* Block markup goes here */ }
-			</div
+			<div>{ /* Block markup goes here */ }</div>
 			<InspectorControls>
-				{ /* Regular control goes here */
+				{ /* Regular control goes here */ }
 			</InspectorControls>
 			<InspectorAdvancedControls>
 				<TextControl

package/src/components/inspector-controls/fill.js

@@ -11,6 +11,7 @@ import {
 	__experimentalToolsPanelContext as ToolsPanelContext,
 } from '@wordpress/components';
 import warning from '@wordpress/warning';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -19,9 +20,22 @@ import useDisplayBlockControls from '../use-display-block-controls';
 import groups from './groups';
 
 export default function InspectorControlsFill( {
-	__experimentalGroup: group = 'default',
 	children,
+	group = 'default',
+	__experimentalGroup,
 } ) {
+	if ( __experimentalGroup ) {
+		deprecated(
+			'`__experimentalGroup` property in `InspectorControlsFill`',
+			{
+				since: '6.2',
+				version: '6.4',
+				alternative: '`group`',
+			}
+		);
+		group = __experimentalGroup;
+	}
+
 	const isDisplayed = useDisplayBlockControls();
 	const Fill = groups[ group ]?.Fill;
 	if ( ! Fill ) {

package/src/components/inspector-controls/fill.native.js

@@ -9,6 +9,7 @@ import { View } from 'react-native';
 import { Children } from '@wordpress/element';
 import { BottomSheetConsumer } from '@wordpress/components';
 import warning from '@wordpress/warning';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -19,9 +20,21 @@ import { BlockSettingsButton } from '../block-settings';
 
 export default function InspectorControlsFill( {
 	children,
-	__experimentalGroup: group = 'default',
+	group = 'default',
+	__experimentalGroup,
 	...props
 } ) {
+	if ( __experimentalGroup ) {
+		deprecated(
+			'`__experimentalGroup` property in `InspectorControlsFill`',
+			{
+				since: '6.2',
+				version: '6.4',
+				alternative: '`group`',
+			}
+		);
+		group = __experimentalGroup;
+	}
 	const isDisplayed = useDisplayBlockControls();
 
 	const Fill = groups[ group ]?.Fill;

package/src/components/inspector-controls/groups.js

@@ -15,6 +15,7 @@ const InspectorControlsTypography = createSlotFill(
 	'InspectorControlsTypography'
 );
 const InspectorControlsListView = createSlotFill( 'InspectorControlsListView' );
+const InspectorControlsStyles = createSlotFill( 'InspectorControlsStyles' );
 
 const groups = {
 	default: InspectorControlsDefault,
@@ -23,6 +24,8 @@ const groups = {
 	color: InspectorControlsColor,
 	dimensions: InspectorControlsDimensions,
 	list: InspectorControlsListView,
+	settings: InspectorControlsDefault, // Alias for default.
+	styles: InspectorControlsStyles,
 	typography: InspectorControlsTypography,
 	position: InspectorControlsPosition,
 };

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

@@ -10,14 +10,10 @@ InspectorControls.Slot = InspectorControlsSlot;
 
 // This is just here for backward compatibility.
 export const InspectorAdvancedControls = ( props ) => {
-	return (
-		<InspectorControlsFill { ...props } __experimentalGroup="advanced" />
-	);
+	return <InspectorControlsFill { ...props } group="advanced" />;
 };
 InspectorAdvancedControls.Slot = ( props ) => {
-	return (
-		<InspectorControlsSlot { ...props } __experimentalGroup="advanced" />
-	);
+	return <InspectorControlsSlot { ...props } group="advanced" />;
 };
 InspectorAdvancedControls.slotName = 'InspectorAdvancedControls';
 

package/src/components/inspector-controls/slot.js

@@ -6,6 +6,7 @@ import {
 	__experimentalUseSlotFills as useSlotFills,
 } from '@wordpress/components';
 import warning from '@wordpress/warning';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -15,10 +16,22 @@ import BlockSupportSlotContainer from './block-support-slot-container';
 import groups from './groups';
 
 export default function InspectorControlsSlot( {
-	__experimentalGroup: group = 'default',
+	__experimentalGroup,
+	group = 'default',
 	label,
 	...props
 } ) {
+	if ( __experimentalGroup ) {
+		deprecated(
+			'`__experimentalGroup` property in `InspectorControlsSlot`',
+			{
+				since: '6.2',
+				version: '6.4',
+				alternative: '`group`',
+			}
+		);
+		group = __experimentalGroup;
+	}
 	const Slot = groups[ group ]?.Slot;
 	const slot = useSlot( Slot?.__unstableName );
 	const fills = useSlotFills( Slot?.__unstableName );

package/src/components/inspector-controls/slot.native.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import warning from '@wordpress/warning';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -9,9 +10,21 @@ import warning from '@wordpress/warning';
 import groups from './groups';
 
 export default function InspectorControlsSlot( {
-	__experimentalGroup: group = 'default',
+	__experimentalGroup,
+	group = 'default',
 	...props
 } ) {
+	if ( __experimentalGroup ) {
+		deprecated(
+			'`__experimentalGroup` property in `InspectorControlsSlot`',
+			{
+				since: '6.2',
+				version: '6.4',
+				alternative: '`group`',
+			}
+		);
+		group = __experimentalGroup;
+	}
 	const Slot = groups[ group ]?.Slot;
 	if ( ! Slot ) {
 		warning( `Unknown InspectorControl group "${ group }" provided.` );

package/src/components/inspector-controls-tabs/advanced-controls-panel.js

@@ -29,7 +29,7 @@ const AdvancedControls = () => {
 			title={ __( 'Advanced' ) }
 			initialOpen={ false }
 		>
-			<InspectorControls.Slot __experimentalGroup="advanced" />
+			<InspectorControls.Slot group="advanced" />
 		</PanelBody>
 	);
 };

package/src/components/inspector-controls-tabs/index.js

@@ -20,7 +20,7 @@ export default function InspectorControlsTabs( {
 } ) {
 	// The tabs panel will mount before fills are rendered to the list view
 	// slot. This means the list view tab isn't initially included in the
-	// available tabs so the panel defaults selection to the styles tab
+	// available tabs so the panel defaults selection to the settings tab
 	// which at the time is the first tab. This check allows blocks known to
 	// include the list view tab to set it as the tab selected by default.
 	const initialTabName = ! useIsListViewTabDisabled( blockName )
@@ -52,9 +52,7 @@ export default function InspectorControlsTabs( {
 				}
 
 				if ( tab.name === TAB_LIST_VIEW.name ) {
-					return (
-						<InspectorControls.Slot __experimentalGroup="list" />
-					);
+					return <InspectorControls.Slot group="list" />;
 				}
 			} }
 		</TabPanel>

package/src/components/inspector-controls-tabs/position-controls-panel.js

@@ -29,7 +29,7 @@ const PositionControls = () => {
 			title={ __( 'Position' ) }
 			initialOpen={ false }
 		>
-			<InspectorControls.Slot __experimentalGroup="position" />
+			<InspectorControls.Slot group="position" />
 		</PanelBody>
 	);
 };

package/src/components/inspector-controls-tabs/styles-tab.js

@@ -28,22 +28,20 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
 				</div>
 			) }
 			<InspectorControls.Slot
-				__experimentalGroup="color"
+				group="color"
 				label={ __( 'Color' ) }
 				className="color-block-support-panel__inner-wrapper"
 			/>
 			<InspectorControls.Slot
-				__experimentalGroup="typography"
+				group="typography"
 				label={ __( 'Typography' ) }
 			/>
 			<InspectorControls.Slot
-				__experimentalGroup="dimensions"
+				group="dimensions"
 				label={ __( 'Dimensions' ) }
 			/>
-			<InspectorControls.Slot
-				__experimentalGroup="border"
-				label={ __( 'Border' ) }
-			/>
+			<InspectorControls.Slot group="border" label={ __( 'Border' ) } />
+			<InspectorControls.Slot group="styles" />
 		</>
 	);
 };

package/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js

@@ -38,16 +38,14 @@ export default function useInspectorControlsTabs( blockName ) {
 		dimensions: dimensionsGroup,
 		list: listGroup,
 		position: positionGroup,
+		styles: stylesGroup,
 		typography: typographyGroup,
 	} = InspectorControlsGroups;
 
 	// List View Tab: If there are any fills for the list group add that tab.
 	const listViewDisabled = useIsListViewTabDisabled( blockName );
 	const listFills = useSlotFills( listGroup.Slot.__unstableName );
-
-	if ( ! listViewDisabled && !! listFills && listFills.length ) {
-		tabs.push( TAB_LIST_VIEW );
-	}
+	const hasListFills = ! listViewDisabled && !! listFills && listFills.length;
 
 	// Styles Tab: Add this tab if there are any fills for block supports
 	// e.g. border, color, spacing, typography, etc.
@@ -55,25 +53,38 @@ export default function useInspectorControlsTabs( blockName ) {
 		...( useSlotFills( borderGroup.Slot.__unstableName ) || [] ),
 		...( useSlotFills( colorGroup.Slot.__unstableName ) || [] ),
 		...( useSlotFills( dimensionsGroup.Slot.__unstableName ) || [] ),
+		...( useSlotFills( stylesGroup.Slot.__unstableName ) || [] ),
 		...( useSlotFills( typographyGroup.Slot.__unstableName ) || [] ),
 	];
+	const hasStyleFills = styleFills.length;
 
-	if ( styleFills.length ) {
-		tabs.push( TAB_STYLES );
-	}
+	// Settings Tab: If we don't have multiple tabs to display
+	// (i.e. both list view and styles), check only the default and position
+	// InspectorControls slots. If we have multiple tabs, we'll need to check
+	// the advanced controls slot as well to ensure they are rendered.
+	const advancedFills =
+		useSlotFills( InspectorAdvancedControls.slotName ) || [];
 
-	// Settings Tab: If there are any fills for the general InspectorControls
-	// or Advanced Controls slot, then add this tab.
 	const settingsFills = [
 		...( useSlotFills( defaultGroup.Slot.__unstableName ) || [] ),
 		...( useSlotFills( positionGroup.Slot.__unstableName ) || [] ),
-		...( useSlotFills( InspectorAdvancedControls.slotName ) || [] ),
+		...( hasListFills && hasStyleFills > 1 ? advancedFills : [] ),
 	];
 
+	// Add the tabs in the order that they will default to if available.
+	// List View > Settings > Styles.
+	if ( hasListFills ) {
+		tabs.push( TAB_LIST_VIEW );
+	}
+
 	if ( settingsFills.length ) {
 		tabs.push( TAB_SETTINGS );
 	}
 
+	if ( hasStyleFills ) {
+		tabs.push( TAB_STYLES );
+	}
+
 	const tabSettings = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().blockInspectorTabs;
 	}, [] );

package/src/components/justify-content-control/ui.js

@@ -7,6 +7,7 @@ import {
 	justifyCenter,
 	justifyRight,
 	justifySpaceBetween,
+	justifyStretch,
 } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
@@ -15,6 +16,7 @@ const icons = {
 	center: justifyCenter,
 	right: justifyRight,
 	'space-between': justifySpaceBetween,
+	stretch: justifyStretch,
 };
 
 function JustifyContentUI( {
@@ -66,6 +68,13 @@ function JustifyContentUI( {
 			isActive: 'space-between' === value,
 			onClick: () => handleClick( 'space-between' ),
 		},
+		{
+			name: 'stretch',
+			icon: justifyStretch,
+			title: __( 'Stretch items' ),
+			isActive: 'stretch' === value,
+			onClick: () => handleClick( 'stretch' ),
+		},
 	];
 
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;