@wordpress/block-editor 10.5.0 → 11.1.0

package/src/components/inserter/style.scss

@@ -107,10 +107,6 @@ $block-inserter-tabs-height: 44px;
 	.components-search-control__icon {
 		right: $grid-unit-10 + ($grid-unit-60 - $icon-size) * 0.5;
 	}
-
-	.components-base-control__field {
-		margin-bottom: 0;
-	}
 }
 
 .block-editor-inserter__tabs {
@@ -125,6 +121,12 @@ $block-inserter-tabs-height: 44px;
 		.components-tab-panel__tabs-item {
 			flex-grow: 1;
 			margin-bottom: -$border-width;
+			&[id$="reusable"] {
+				flex-grow: inherit;
+				// These are to align the `reusable` icon with the search icon.
+				padding-left: $grid-unit-20;
+				padding-right: $grid-unit-20;
+			}
 		}
 	}
 
@@ -279,13 +281,13 @@ $block-inserter-tabs-height: 44px;
 	padding: $grid-unit-20;
 	overflow-y: auto;
 	height: 100%;
+	// Push the listitem wrapping the "explore" button to the bottom of the panel.
+	div[role="listitem"]:last-child {
+		margin-top: auto;
+	}
 }
 
-.block-editor-inserter__patterns-fill-space {
-	flex-grow: 1;
-}
-
-.block-editor-inserter__patterns-category-panel {
+.block-editor-inserter__patterns-category-dialog {
 	background: $gray-100;
 	border-left: $border-width solid $gray-200;
 	border-right: $border-width solid $gray-200;
@@ -314,9 +316,13 @@ $block-inserter-tabs-height: 44px;
 			box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
 		}
 	}
+}
 
-	.block-editor-block-patterns-list__item-title {
-		display: none;
+.block-editor-inserter__patterns-category-panel {
+	padding: 0 $grid-unit-20;
+
+	@include break-medium {
+		padding: 0;
 	}
 }
 
@@ -474,3 +480,162 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__patterns-category-panel-title {
 	font-size: calc(1.25 * 13px);
 }
+
+.block-editor-inserter__media-tabs-container {
+	height: 100%;
+
+	nav {
+		height: 100%;
+	}
+
+	.block-editor-inserter__media-library-button {
+		padding: $grid-unit-20;
+		justify-content: center;
+		margin-top: $grid-unit-20;
+		width: 100%;
+	}
+}
+
+.block-editor-inserter__media-tabs {
+	display: flex;
+	flex-direction: column;
+	padding: $grid-unit-20;
+	overflow-y: auto;
+	height: 100%;
+
+	// Push the listitem wrapping the "open media library" button to the bottom of the panel.
+	div[role="listitem"]:last-child {
+		margin-top: auto;
+	}
+
+	&__media-category {
+		&.is-selected {
+			color: var(--wp-admin-theme-color);
+			position: relative;
+
+			.components-flex-item {
+				filter: brightness(0.95);
+			}
+
+			svg {
+				fill: var(--wp-admin-theme-color);
+			}
+
+			&::after {
+				content: "";
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				border-radius: $radius-block-ui;
+				opacity: 0.04;
+				background: var(--wp-admin-theme-color);
+			}
+		}
+	}
+}
+
+.block-editor-inserter__media-dialog {
+	background: $gray-100;
+	border-left: $border-width solid $gray-200;
+	border-right: $border-width solid $gray-200;
+	position: absolute;
+	padding: $grid-unit-20 $grid-unit-30;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	overflow-y: auto;
+	scrollbar-gutter: stable both-edges;
+
+	@include break-medium {
+		left: 100%;
+		display: block;
+		width: 300px;
+	}
+
+	.block-editor-block-preview__container {
+		box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
+		&:hover {
+			box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
+		}
+	}
+}
+
+.block-editor-inserter__media-panel {
+	height: 100%;
+	padding: 0 $grid-unit-20;
+
+	@include break-medium {
+		padding: 0;
+	}
+
+	.block-editor-inserter__media-panel-spinner {
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.block-editor-inserter__media-panel-search {
+		&.components-search-control {
+			input[type="search"].components-search-control__input {
+				background: $white;
+			}
+		}
+	}
+}
+
+.block-editor-inserter__media-list {
+	margin-top: $grid-unit-20;
+	&__list-item {
+		cursor: pointer;
+		margin-bottom: $grid-unit-30;
+
+		&.is-placeholder {
+			min-height: 100px;
+		}
+
+		&[draggable="true"] .block-editor-block-preview__container {
+			cursor: grab;
+		}
+	}
+
+	&__item {
+		height: 100%;
+
+		&-preview {
+			display: flex;
+			align-items: center;
+			overflow: hidden;
+			border-radius: 4px;
+
+			> * {
+				margin: 0 auto;
+				max-width: 100%;
+			}
+		}
+
+		&: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);
+
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 2px solid transparent;
+		}
+	}
+}
+
+
+.block-editor-inserter__mobile-tab-navigation {
+	padding: $grid-unit-20;
+	height: 100%;
+
+	> * {
+		height: 100%;
+	}
+}

package/src/components/inserter/tabs.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { symbol as reusableBlockIcon } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
 import { TabPanel } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -19,12 +20,19 @@ const reusableBlocksTab = {
 	name: 'reusable',
 	/* translators: Reusable blocks tab title in the block inserter. */
 	title: __( 'Reusable' ),
+	icon: reusableBlockIcon,
+};
+const mediaTab = {
+	name: 'media',
+	/* translators: Media tab title in the block inserter. */
+	title: __( 'Media' ),
 };
 
 function InserterTabs( {
 	children,
 	showPatterns = false,
 	showReusableBlocks = false,
+	showMedia = false,
 	onSelect,
 	prioritizePatterns,
 } ) {
@@ -37,10 +45,12 @@ function InserterTabs( {
 		if ( ! prioritizePatterns && showPatterns ) {
 			tempTabs.push( patternsTab );
 		}
+		if ( showMedia ) {
+			tempTabs.push( mediaTab );
+		}
 		if ( showReusableBlocks ) {
 			tempTabs.push( reusableBlocksTab );
 		}
-
 		return tempTabs;
 	}, [
 		prioritizePatterns,
@@ -48,6 +58,7 @@ function InserterTabs( {
 		showPatterns,
 		patternsTab,
 		showReusableBlocks,
+		showMedia,
 		reusableBlocksTab,
 	] );
 

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

@@ -10,6 +10,8 @@ import { useMemo, useRef, memo } from '@wordpress/element';
 import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
+	isReusableBlock,
+	isTemplatePart,
 } from '@wordpress/blocks';
 import { __experimentalTruncate as Truncate } from '@wordpress/components';
 import { ENTER, isAppleOS } from '@wordpress/keycodes';
@@ -47,6 +49,8 @@ function InserterListItem( {
 		];
 	}, [ item.name, item.initialAttributes, item.initialAttributes ] );
 
+	const isSynced = isReusableBlock( item ) || isTemplatePart( item );
+
 	return (
 		<InserterDraggableBlocks
 			isEnabled={ isDraggable && ! item.disabled }
@@ -55,7 +59,13 @@ function InserterListItem( {
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
 				<div
-					className="block-editor-block-types-list__list-item"
+					className={ classnames(
+						'block-editor-block-types-list__list-item',
+
+						{
+							'is-synced': isSynced,
+						}
+					) }
 					draggable={ draggable }
 					onDragStart={ ( event ) => {
 						isDragging.current = true;

package/src/components/inserter-list-item/style.scss

@@ -1,8 +1,34 @@
+
 .block-editor-block-types-list__list-item {
 	display: block;
 	width: 33.33%;
 	padding: 0;
 	margin: 0;
+
+	&.is-synced {
+		.components-button.block-editor-block-types-list__item {
+			&:not(:disabled) {
+				.block-editor-block-icon.has-colors {
+					color: var(--wp-block-synced-color);
+				}
+
+				&:hover {
+					.block-editor-block-types-list__item-title {
+						color: var(--wp-block-synced-color) !important;
+						filter: brightness(0.95);
+					}
+
+					svg {
+						color: var(--wp-block-synced-color) !important;
+					}
+				}
+
+				&::after {
+					background: var(--wp-block-synced-color);
+				}
+			}
+		}
+	}
 }
 
 .components-button.block-editor-block-types-list__item {

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

@@ -13,6 +13,7 @@ const InspectorControlsDimensions = createSlotFill(
 const InspectorControlsTypography = createSlotFill(
 	'InspectorControlsTypography'
 );
+const InspectorControlsListView = createSlotFill( 'InspectorControlsListView' );
 
 const groups = {
 	default: InspectorControlsDefault,
@@ -20,6 +21,7 @@ const groups = {
 	border: InspectorControlsBorder,
 	color: InspectorControlsColor,
 	dimensions: InspectorControlsDimensions,
+	list: InspectorControlsListView,
 	typography: InspectorControlsTypography,
 };
 

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

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	__experimentalUseSlotFills as useSlotFills,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import {
+	default as InspectorControls,
+	InspectorAdvancedControls,
+} from '../inspector-controls';
+
+const AdvancedControls = () => {
+	const fills = useSlotFills( InspectorAdvancedControls.slotName );
+	const hasFills = Boolean( fills && fills.length );
+
+	if ( ! hasFills ) {
+		return null;
+	}
+
+	return (
+		<PanelBody
+			className="block-editor-block-inspector__advanced"
+			title={ __( 'Advanced' ) }
+			initialOpen={ false }
+		>
+			<InspectorControls.Slot __experimentalGroup="advanced" />
+		</PanelBody>
+	);
+};
+
+export default AdvancedControls;

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

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { TabPanel } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { TAB_SETTINGS, TAB_STYLES, TAB_LIST_VIEW } from './utils';
+import SettingsTab from './settings-tab';
+import StylesTab from './styles-tab';
+import InspectorControls from '../inspector-controls';
+import useIsListViewTabDisabled from './use-is-list-view-tab-disabled';
+
+export default function InspectorControlsTabs( {
+	blockName,
+	clientId,
+	hasBlockStyles,
+	tabs,
+} ) {
+	// 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
+	// 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 )
+		? TAB_LIST_VIEW.name
+		: undefined;
+
+	return (
+		<TabPanel
+			className="block-editor-block-inspector__tabs"
+			tabs={ tabs }
+			initialTabName={ initialTabName }
+			key={ clientId }
+		>
+			{ ( tab ) => {
+				if ( tab.name === TAB_SETTINGS.name ) {
+					return (
+						<SettingsTab showAdvancedControls={ !! blockName } />
+					);
+				}
+
+				if ( tab.name === TAB_STYLES.name ) {
+					return (
+						<StylesTab
+							blockName={ blockName }
+							clientId={ clientId }
+							hasBlockStyles={ hasBlockStyles }
+						/>
+					);
+				}
+
+				if ( tab.name === TAB_LIST_VIEW.name ) {
+					return (
+						<InspectorControls.Slot __experimentalGroup="list" />
+					);
+				}
+			} }
+		</TabPanel>
+	);
+}

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

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import AdvancedControls from './advanced-controls-panel';
+import { default as InspectorControls } from '../inspector-controls';
+
+const SettingsTab = ( { showAdvancedControls = false } ) => (
+	<>
+		<InspectorControls.Slot />
+		{ showAdvancedControls && (
+			<div>
+				<AdvancedControls />
+			</div>
+		) }
+	</>
+);
+
+export default SettingsTab;

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

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { hasBlockSupport } from '@wordpress/blocks';
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import BlockStyles from '../block-styles';
+import DefaultStylePicker from '../default-style-picker';
+import InspectorControls from '../inspector-controls';
+
+const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
+	return (
+		<>
+			{ hasBlockStyles && (
+				<div>
+					<PanelBody title={ __( 'Styles' ) }>
+						<BlockStyles clientId={ clientId } />
+						{ hasBlockSupport(
+							blockName,
+							'defaultStylePicker',
+							true
+						) && <DefaultStylePicker blockName={ blockName } /> }
+					</PanelBody>
+				</div>
+			) }
+			<InspectorControls.Slot
+				__experimentalGroup="color"
+				label={ __( 'Color' ) }
+				className="color-block-support-panel__inner-wrapper"
+			/>
+			<InspectorControls.Slot
+				__experimentalGroup="typography"
+				label={ __( 'Typography' ) }
+			/>
+			<InspectorControls.Slot
+				__experimentalGroup="dimensions"
+				label={ __( 'Dimensions' ) }
+			/>
+			<InspectorControls.Slot
+				__experimentalGroup="border"
+				label={ __( 'Border' ) }
+			/>
+		</>
+	);
+};
+
+export default StylesTab;

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

@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControlsGroups from '../inspector-controls/groups';
+import useIsListViewTabDisabled from './use-is-list-view-tab-disabled';
+import { InspectorAdvancedControls } from '../inspector-controls';
+import { TAB_LIST_VIEW, TAB_SETTINGS, TAB_STYLES } from './utils';
+import { store as blockEditorStore } from '../../store';
+
+const EMPTY_ARRAY = [];
+
+function getShowTabs( blockName, tabSettings = {} ) {
+	// Don't allow settings to force the display of tabs if the block inspector
+	// tabs experiment hasn't been opted into.
+	if ( ! window?.__experimentalEnableBlockInspectorTabs ) {
+		return false;
+	}
+
+	// Block specific setting takes precedence over generic default.
+	if ( tabSettings[ blockName ] !== undefined ) {
+		return tabSettings[ blockName ];
+	}
+
+	// Use generic default if set over the Gutenberg experiment option.
+	if ( tabSettings.default !== undefined ) {
+		return tabSettings.default;
+	}
+
+	return true;
+}
+
+export default function useInspectorControlsTabs( blockName ) {
+	const tabs = [];
+	const {
+		border: borderGroup,
+		color: colorGroup,
+		default: defaultGroup,
+		dimensions: dimensionsGroup,
+		list: listGroup,
+		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 );
+	}
+
+	// Styles Tab: Add this tab if there are any fills for block supports
+	// e.g. border, color, spacing, typography, etc.
+	const styleFills = [
+		...( useSlotFills( borderGroup.Slot.__unstableName ) || [] ),
+		...( useSlotFills( colorGroup.Slot.__unstableName ) || [] ),
+		...( useSlotFills( dimensionsGroup.Slot.__unstableName ) || [] ),
+		...( useSlotFills( typographyGroup.Slot.__unstableName ) || [] ),
+	];
+
+	if ( styleFills.length ) {
+		tabs.push( TAB_STYLES );
+	}
+
+	// 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( InspectorAdvancedControls.slotName ) || [] ),
+	];
+
+	if ( settingsFills.length ) {
+		tabs.push( TAB_SETTINGS );
+	}
+
+	const tabSettings = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSettings()
+			.__experimentalBlockInspectorTabs;
+	}, [] );
+
+	const showTabs = getShowTabs( blockName, tabSettings );
+
+	return showTabs ? tabs : EMPTY_ARRAY;
+}

package/src/components/inspector-controls-tabs/use-is-list-view-tab-disabled.js

@@ -0,0 +1,9 @@
+// List view tab restricts the blocks that may render to it via the
+// allowlist below.
+const allowlist = [ 'core/navigation' ];
+
+export const useIsListViewTabDisabled = ( blockName ) => {
+	return ! allowlist.includes( blockName );
+};
+
+export default useIsListViewTabDisabled;

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

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { cog, styles, listView } from '@wordpress/icons';
+
+export const TAB_SETTINGS = {
+	name: 'settings',
+	title: 'Settings',
+	value: 'settings',
+	icon: cog,
+	className: 'block-editor-block-inspector__tab-item',
+};
+
+export const TAB_STYLES = {
+	name: 'styles',
+	title: 'Styles',
+	value: 'styles',
+	icon: styles,
+	className: 'block-editor-block-inspector__tab-item',
+};
+
+export const TAB_LIST_VIEW = {
+	name: 'list',
+	title: 'List View',
+	value: 'list-view',
+	icon: listView,
+	className: 'block-editor-block-inspector__tab-item',
+};

package/src/components/line-height-control/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -30,7 +30,7 @@ describe( 'LineHeightControl', () => {
 	it( 'should immediately step up from the default value if up-arrowed from an unset state', () => {
 		render( <ControlledLineHeightControl /> );
 		const input = screen.getByRole( 'spinbutton' );
-		input.focus();
+		act( () => input.focus() );
 		fireEvent.keyDown( input, { keyCode: UP } );
 		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + STEP );
 	} );
@@ -38,7 +38,7 @@ describe( 'LineHeightControl', () => {
 	it( 'should immediately step down from the default value if down-arrowed from an unset state', () => {
 		render( <ControlledLineHeightControl /> );
 		const input = screen.getByRole( 'spinbutton' );
-		input.focus();
+		act( () => input.focus() );
 		fireEvent.keyDown( input, { keyCode: DOWN } );
 		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - STEP );
 	} );
@@ -46,7 +46,7 @@ describe( 'LineHeightControl', () => {
 	it( 'should immediately step up from the default value if spin button up was clicked from an unset state', () => {
 		render( <ControlledLineHeightControl /> );
 		const input = screen.getByRole( 'spinbutton' );
-		input.focus();
+		act( () => input.focus() );
 		fireEvent.change( input, { target: { value: 0.1 } } ); // simulates click on spin button up
 		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + STEP );
 	} );
@@ -54,7 +54,7 @@ describe( 'LineHeightControl', () => {
 	it( 'should immediately step down from the default value if spin button down was clicked from an unset state', () => {
 		render( <ControlledLineHeightControl /> );
 		const input = screen.getByRole( 'spinbutton' );
-		input.focus();
+		act( () => input.focus() );
 		fireEvent.change( input, { target: { value: 0 } } ); // simulates click on spin button down
 		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - STEP );
 	} );