@wordpress/block-editor 10.4.0 → 11.0.0

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

@@ -20,6 +20,7 @@ import LinkControlSettingsDrawer from './settings-drawer';
 import LinkControlSearchInput from './search-input';
 import LinkPreview from './link-preview';
 import useCreatePage from './use-create-page';
+import useInternalInputValue from './use-internal-input-value';
 import { ViewerFill } from './viewer-slot';
 import { DEFAULT_LINK_SETTINGS } from './constants';
 
@@ -92,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.
  */
@@ -132,22 +134,19 @@ function LinkControl( {
 	const isMounting = useRef( true );
 	const wrapperNode = useRef();
 	const textInputRef = useRef();
+	const isEndingEditWithFocus = useRef( false );
+
+	const [ internalUrlInputValue, setInternalUrlInputValue ] =
+		useInternalInputValue( value?.url || '' );
+
+	const [ internalTextInputValue, setInternalTextInputValue ] =
+		useInternalInputValue( value?.title || '' );
 
-	const [ internalInputValue, setInternalInputValue ] = useState(
-		value?.url || ''
-	);
-	const [ internalTextValue, setInternalTextValue ] = useState(
-		value?.title || ''
-	);
-	const currentInputValue = propInputValue || internalInputValue;
 	const [ isEditingLink, setIsEditingLink ] = useState(
 		forceIsEditingLink !== undefined
 			? forceIsEditingLink
 			: ! value || ! value.url
 	);
-	const isEndingEditWithFocus = useRef( false );
-
-	const currentInputIsEmpty = ! currentInputValue?.trim()?.length;
 
 	const { createPage, isCreatingPage, errorMessage } =
 		useCreatePage( createSuggestion );
@@ -191,53 +190,35 @@ function LinkControl( {
 		isEndingEditWithFocus.current = false;
 	}, [ isEditingLink, isCreatingPage ] );
 
-	useEffect( () => {
-		/**
-		 * If the value's `text` property changes then sync this
-		 * back up with state.
-		 */
-		if ( value?.title && value.title !== internalTextValue ) {
-			setInternalTextValue( value.title );
-		}
-
-		/**
-		 * Update the state value internalInputValue if the url value changes
-		 * for example when clicking on another anchor
-		 */
-		if ( value?.url ) {
-			setInternalInputValue( value.url );
-		}
-	}, [ value ] );
-
 	/**
 	 * Cancels editing state and marks that focus may need to be restored after
 	 * the next render, if focus was within the wrapper when editing finished.
 	 */
-	function stopEditing() {
+	const stopEditing = () => {
 		isEndingEditWithFocus.current = !! wrapperNode.current?.contains(
 			wrapperNode.current.ownerDocument.activeElement
 		);
 
 		setIsEditingLink( false );
-	}
+	};
 
 	const handleSelectSuggestion = ( updatedValue ) => {
 		onChange( {
 			...updatedValue,
-			title: internalTextValue || updatedValue?.title,
+			title: internalTextInputValue || updatedValue?.title,
 		} );
 		stopEditing();
 	};
 
 	const handleSubmit = () => {
 		if (
-			currentInputValue !== value?.url ||
-			internalTextValue !== value?.title
+			currentUrlInputValue !== value?.url ||
+			internalTextInputValue !== value?.title
 		) {
 			onChange( {
 				...value,
-				url: currentInputValue,
-				title: internalTextValue,
+				url: currentUrlInputValue,
+				title: internalTextInputValue,
 			} );
 		}
 		stopEditing();
@@ -254,6 +235,10 @@ function LinkControl( {
 		}
 	};
 
+	const currentUrlInputValue = propInputValue || internalUrlInputValue;
+
+	const currentInputIsEmpty = ! currentUrlInputValue?.trim()?.length;
+
 	const shownUnlinkControl =
 		onRemove && value && ! isEditingLink && ! isCreatingPage;
 
@@ -289,8 +274,8 @@ function LinkControl( {
 								ref={ textInputRef }
 								className="block-editor-link-control__field block-editor-link-control__text-content"
 								label="Text"
-								value={ internalTextValue }
-								onChange={ setInternalTextValue }
+								value={ internalTextInputValue }
+								onChange={ setInternalTextInputValue }
 								onKeyDown={ handleSubmitWithEnter }
 							/>
 						) }
@@ -299,10 +284,10 @@ function LinkControl( {
 							currentLink={ value }
 							className="block-editor-link-control__field block-editor-link-control__search-input"
 							placeholder={ searchInputPlaceholder }
-							value={ currentInputValue }
+							value={ currentUrlInputValue }
 							withCreateSuggestion={ withCreateSuggestion }
 							onCreateSuggestion={ createPage }
-							onChange={ setInternalInputValue }
+							onChange={ setInternalUrlInputValue }
 							onSelect={ handleSelectSuggestion }
 							showInitialSuggestions={ showInitialSuggestions }
 							allowDirectEntry={ ! noDirectEntry }

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

@@ -81,7 +81,6 @@ const LinkControlSearchInput = forwardRef(
 				...props,
 				instanceId,
 				withCreateSuggestion,
-				currentInputValue: value,
 				createSuggestionButtonText,
 				suggestionsQuery,
 				handleSuggestionClick: ( suggestion ) => {
@@ -111,7 +110,7 @@ const LinkControlSearchInput = forwardRef(
 				allowDirectEntry ||
 				( suggestion && Object.keys( suggestion ).length >= 1 )
 			) {
-				const { id, url, ...restLinkProps } = currentLink;
+				const { id, url, ...restLinkProps } = currentLink ?? {};
 				onSelect(
 					// Some direct entries don't have types or IDs, and we still need to clear the previous ones.
 					{ ...restLinkProps, ...suggestion },