@wordpress/block-editor 10.5.0 → 11.0.0

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

package/src/components/link-control/README.md

@@ -322,10 +322,10 @@ The following properties are provided by URLInput:
 -   suggestions
 -   selectedSuggestion
 -   suggestionsListProps
+-   currentInputValue
 
 The following extra properties are provided by LinkControlSearchInput:
 
--   currentInputValue
 -   createSuggestionButtonText
 -   handleSuggestionClick
 -   instanceId

package/src/components/link-control/index.js

@@ -93,6 +93,7 @@ import { DEFAULT_LINK_SETTINGS } from './constants';
  * @property {boolean=}                   withCreateSuggestion       Whether to allow creation of link value from suggestion.
  * @property {Object=}                    suggestionsQuery           Query parameters to pass along to wp.blockEditor.__experimentalFetchLinkSuggestions.
  * @property {boolean=}                   noURLSuggestion            Whether to add a fallback suggestion which treats the search query as a URL.
+ * @property {boolean=}                   hasTextControl             Whether to add a text field to the UI to update the value.title.
  * @property {string|Function|undefined}  createSuggestionButtonText The text to use in the button that calls createSuggestion.
  * @property {Function}                   renderControlBottom        Optional controls to be rendered at the bottom of the component.
  */

package/src/components/link-control/search-input.js

@@ -81,7 +81,6 @@ const LinkControlSearchInput = forwardRef(
 				...props,
 				instanceId,
 				withCreateSuggestion,
-				currentInputValue: value,
 				createSuggestionButtonText,
 				suggestionsQuery,
 				handleSuggestionClick: ( suggestion ) => {