@wordpress/editor 14.1.0 → 14.3.0

package/src/components/global-styles-provider/index.js

@@ -7,17 +7,15 @@ import { isPlainObject } from 'is-plain-object';
 /**
  * WordPress dependencies
  */
-import { registerBlockStyle, store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useMemo, useCallback } from '@wordpress/element';
+import { useMemo, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import setNestedValue from '../../utils/set-nested-value';
 
 const { GlobalStylesContext, cleanEmptyObject } = unlock(
 	blockEditorPrivateApis
@@ -32,85 +30,6 @@ export function mergeBaseAndUserConfigs( base, user ) {
 	} );
 }
 
-/**
- * Resolves shared block style variation definitions from the user origin
- * under their respective block types and registers the block style if required.
- *
- * @param {Object} userConfig Current user origin global styles data.
- * @return {Object} Updated global styles data.
- */
-function useResolvedBlockStyleVariationsConfig( userConfig ) {
-	const { getBlockStyles } = useSelect( blocksStore );
-	const sharedVariations = userConfig?.styles?.blocks?.variations;
-
-	// Collect block style variation definitions to merge and unregistered
-	// block styles for automatic registration.
-	const [ userConfigToMerge, unregisteredStyles ] = useMemo( () => {
-		if ( ! sharedVariations ) {
-			return [];
-		}
-
-		const variationsConfigToMerge = {};
-		const unregisteredBlockStyles = [];
-
-		Object.entries( sharedVariations ).forEach(
-			( [ variationName, variation ] ) => {
-				if ( ! variation?.blockTypes?.length ) {
-					return;
-				}
-
-				variation.blockTypes.forEach( ( blockName ) => {
-					const blockStyles = getBlockStyles( blockName );
-					const registeredBlockStyle = blockStyles.find(
-						( { name } ) => name === variationName
-					);
-
-					if ( ! registeredBlockStyle ) {
-						unregisteredBlockStyles.push( [
-							blockName,
-							{
-								name: variationName,
-								label: variationName,
-							},
-						] );
-					}
-
-					const path = [
-						'styles',
-						'blocks',
-						blockName,
-						'variations',
-						variationName,
-					];
-					setNestedValue( variationsConfigToMerge, path, variation );
-				} );
-			}
-		);
-
-		return [ variationsConfigToMerge, unregisteredBlockStyles ];
-	}, [ sharedVariations, getBlockStyles ] );
-
-	// Automatically register missing block styles from variations.
-	useEffect(
-		() =>
-			unregisteredStyles?.forEach( ( unregisteredStyle ) =>
-				registerBlockStyle( ...unregisteredStyle )
-			),
-		[ unregisteredStyles ]
-	);
-
-	// Merge shared block style variation definitions into overall user config.
-	const updatedConfig = useMemo( () => {
-		if ( ! userConfigToMerge ) {
-			return userConfig;
-		}
-
-		return deepmerge( userConfigToMerge, userConfig );
-	}, [ userConfigToMerge, userConfig ] );
-
-	return updatedConfig;
-}
-
 function useGlobalStylesUserConfig() {
 	const { globalStylesId, isReady, settings, styles, _links } = useSelect(
 		( select ) => {
@@ -199,7 +118,7 @@ function useGlobalStylesUserConfig() {
 				options
 			);
 		},
-		[ globalStylesId ]
+		[ globalStylesId, editEntityRecord, getEditedEntityRecord ]
 	);
 
 	return [ isReady, config, setConfig ];
@@ -219,28 +138,26 @@ export function useGlobalStylesContext() {
 	const [ isUserConfigReady, userConfig, setUserConfig ] =
 		useGlobalStylesUserConfig();
 	const [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();
-	const userConfigWithVariations =
-		useResolvedBlockStyleVariationsConfig( userConfig );
 
 	const mergedConfig = useMemo( () => {
-		if ( ! baseConfig || ! userConfigWithVariations ) {
+		if ( ! baseConfig || ! userConfig ) {
 			return {};
 		}
 
-		return mergeBaseAndUserConfigs( baseConfig, userConfigWithVariations );
-	}, [ userConfigWithVariations, baseConfig ] );
+		return mergeBaseAndUserConfigs( baseConfig, userConfig );
+	}, [ userConfig, baseConfig ] );
 
 	const context = useMemo( () => {
 		return {
 			isReady: isUserConfigReady && isBaseConfigReady,
-			user: userConfigWithVariations,
+			user: userConfig,
 			base: baseConfig,
 			merged: mergedConfig,
 			setUserConfig,
 		};
 	}, [
 		mergedConfig,
-		userConfigWithVariations,
+		userConfig,
 		baseConfig,
 		setUserConfig,
 		isUserConfigReady,

package/src/components/header/index.js

@@ -51,6 +51,7 @@ function Header( {
 	forceDisableBlockTools,
 	setEntitiesSavedStatesCallback,
 	title,
+	icon,
 } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -116,7 +117,7 @@ function Header( {
 							! isBlockToolsCollapsed && hasTopToolbar,
 					} ) }
 				>
-					{ ! title ? <DocumentBar /> : title }
+					<DocumentBar title={ title } icon={ icon } />
 				</div>
 			</motion.div>
 			<motion.div

package/src/components/index.js

@@ -105,12 +105,21 @@ export { default as CharacterCount } from './character-count';
 export { default as EditorProvider } from './provider';
 
 export * from './deprecated';
+
+/**
+ * Handles the keyboard shortcuts for the editor.
+ *
+ * It provides functionality for various keyboard shortcuts such as toggling editor mode,
+ * toggling distraction-free mode, undo/redo, saving the post, toggling list view,
+ * and toggling the sidebar.
+ */
 export const VisualEditorGlobalKeyboardShortcuts = EditorKeyboardShortcuts;
 
 /**
- * Component handles the global keyboard shortcuts for the Text editor.
+ * Handles the keyboard shortcuts for the editor.
  *
  * It provides functionality for various keyboard shortcuts such as toggling editor mode,
- * toggling distraction-free mode, undo/redo.
+ * toggling distraction-free mode, undo/redo, saving the post, toggling list view,
+ * and toggling the sidebar.
  */
 export const TextEditorGlobalKeyboardShortcuts = EditorKeyboardShortcuts;

package/src/components/inserter-sidebar/index.js

@@ -6,10 +6,7 @@ import {
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import {
-	useViewportMatch,
-	__experimentalUseDialog as useDialog,
-} from '@wordpress/compose';
+import { useViewportMatch } from '@wordpress/compose';
 import { useCallback, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { ESCAPE } from '@wordpress/keycodes';
@@ -63,10 +60,6 @@ export default function InserterSidebar() {
 	const { disableComplementaryArea } = useDispatch( interfaceStore );
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
-		onClose: () => setIsInserterOpened( false ),
-		focusOnMount: true,
-	} );
 	const libraryRef = useRef();
 
 	// When closing the inserter, focus should return to the toggle button.
@@ -95,6 +88,7 @@ export default function InserterSidebar() {
 					blockSectionRootClientId ?? insertionPoint.rootClientId
 				}
 				__experimentalInsertionIndex={ insertionPoint.insertionIndex }
+				onSelect={ insertionPoint.onSelect }
 				__experimentalInitialTab={ insertionPoint.tab }
 				__experimentalInitialCategory={ insertionPoint.category }
 				__experimentalFilterValue={ insertionPoint.filterValue }
@@ -109,23 +103,9 @@ export default function InserterSidebar() {
 		</div>
 	);
 
-	if ( window.__experimentalEnableZoomedOutPatternsTab ) {
-		return (
-			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-			<div
-				onKeyDown={ closeOnEscape }
-				className="editor-inserter-sidebar"
-			>
-				{ inserterContents }
-			</div>
-		);
-	}
 	return (
-		<div
-			ref={ inserterDialogRef }
-			{ ...inserterDialogProps }
-			className="editor-inserter-sidebar"
-		>
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div onKeyDown={ closeOnEscape } className="editor-inserter-sidebar">
 			{ inserterContents }
 		</div>
 	);

package/src/components/list-view-sidebar/index.js

@@ -1,17 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalListView as ListView } from '@wordpress/block-editor';
 import {
-	Button,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+	__experimentalListView as ListView,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { focus } from '@wordpress/dom';
 import { useCallback, useRef, useState } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import { closeSmall } from '@wordpress/icons';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { ESCAPE } from '@wordpress/keycodes';
 
@@ -22,7 +20,7 @@ import ListViewOutline from './list-view-outline';
 import { unlock } from '../../lock-unlock';
 import { store as editorStore } from '../../store';
 
-const { Tabs } = unlock( componentsPrivateApis );
+const { TabbedSidebar } = unlock( blockEditorPrivateApis );
 
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editorStore );
@@ -120,64 +118,38 @@ export default function ListViewSidebar() {
 			onKeyDown={ closeOnEscape }
 			ref={ sidebarRef }
 		>
-			<Tabs
+			<TabbedSidebar
+				tabs={ [
+					{
+						name: 'list-view',
+						title: _x( 'List View', 'Post overview' ),
+						panel: (
+							<div className="editor-list-view-sidebar__list-view-container">
+								<div className="editor-list-view-sidebar__list-view-panel-content">
+									<ListView
+										dropZoneElement={ dropZoneElement }
+									/>
+								</div>
+							</div>
+						),
+						panelRef: listViewContainerRef,
+					},
+					{
+						name: 'outline',
+						title: _x( 'Outline', 'Post overview' ),
+						panel: (
+							<div className="editor-list-view-sidebar__list-view-container">
+								<ListViewOutline />
+							</div>
+						),
+					},
+				] }
+				onClose={ closeListView }
 				onSelect={ ( tabName ) => setTab( tabName ) }
-				selectOnMove={ false }
-				// The initial tab value is set explicitly to avoid an initial
-				// render where no tab is selected. This ensures that the
-				// tabpanel height is correct so the relevant scroll container
-				// can be rendered internally.
 				defaultTabId="list-view"
-			>
-				<div className="editor-list-view-sidebar__header">
-					<Button
-						className="editor-list-view-sidebar__close-button"
-						icon={ closeSmall }
-						label={ __( 'Close' ) }
-						onClick={ closeListView }
-						size="small"
-					/>
-					<Tabs.TabList
-						className="editor-list-view-sidebar__tabs-tablist"
-						ref={ tabsRef }
-					>
-						<Tabs.Tab
-							className="editor-list-view-sidebar__tabs-tab"
-							tabId="list-view"
-						>
-							{ _x( 'List View', 'Post overview' ) }
-						</Tabs.Tab>
-						<Tabs.Tab
-							className="editor-list-view-sidebar__tabs-tab"
-							tabId="outline"
-						>
-							{ _x( 'Outline', 'Post overview' ) }
-						</Tabs.Tab>
-					</Tabs.TabList>
-				</div>
-
-				<Tabs.TabPanel
-					ref={ listViewContainerRef }
-					className="editor-list-view-sidebar__tabs-tabpanel"
-					tabId="list-view"
-					focusable={ false }
-				>
-					<div className="editor-list-view-sidebar__list-view-container">
-						<div className="editor-list-view-sidebar__list-view-panel-content">
-							<ListView dropZoneElement={ dropZoneElement } />
-						</div>
-					</div>
-				</Tabs.TabPanel>
-				<Tabs.TabPanel
-					className="editor-list-view-sidebar__tabs-tabpanel"
-					tabId="outline"
-					focusable={ false }
-				>
-					<div className="editor-list-view-sidebar__list-view-container">
-						<ListViewOutline />
-					</div>
-				</Tabs.TabPanel>
-			</Tabs>
+				ref={ tabsRef }
+				closeButtonLabel={ __( 'Close' ) }
+			/>
 		</div>
 	);
 }

package/src/components/list-view-sidebar/style.scss

@@ -1,39 +1,5 @@
 .editor-list-view-sidebar {
 	height: 100%;
-	display: flex;
-	flex-direction: column;
-
-	@include break-medium() {
-		// Same width as the Inserter.
-		// @see packages/block-editor/src/components/inserter/style.scss
-		width: 350px;
-	}
-	.editor-list-view-sidebar__header {
-		display: flex;
-		border-bottom: $border-width solid $gray-300;
-	}
-	.editor-list-view-sidebar__close-button {
-		background: $white;
-		/* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/59013 is fixed. */
-		order: 1;
-		align-self: center;
-		margin-right: $grid-unit-15;
-	}
-}
-
-.editor-list-view-sidebar__tabs-tablist {
-	box-sizing: border-box;
-	flex-grow: 1;
-
-}
-
-.editor-list-view-sidebar__tabs-tab {
-	width: 50%;
-	margin-bottom: -$border-width;
-}
-
-.editor-list-view-sidebar__tabs-tabpanel {
-	height: calc(100% - #{$grid-unit-60 - $border-width});
 }
 
 .editor-list-view-sidebar__list-view-panel-content,

package/src/components/page-attributes/parent.js

@@ -249,9 +249,12 @@ export function ParentRow() {
 							onClose={ onClose }
 						/>
 						<div>
-							{ __(
-								"Child pages inherit characteristics from their parent, such as URL structure. For instance, if 'Web Design' is a child of 'Services,' its URL would be mysite.com/services/web-design."
-							) }
+							{
+								/* translators: The domain name should be a reserved domain name to prevent linking to third party sites outside the WordPress project's control. You may also wish to use wordpress.org or a wordpress.org sub-domain. */
+								__(
+									"Child pages inherit characteristics from their parent, such as URL structure. For instance, if 'Web Design' is a child of 'Services', its URL would be example.org/services/web-design."
+								)
+							}
 							<p>
 								{ __(
 									'They also show up as sub-items in the default navigation menu. '