@wordpress/edit-site 5.15.0 → 5.16.0

package/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js

@@ -58,10 +58,7 @@ export default function useSyncCanvasModeWithURL() {
 
 	useEffect( () => {
 		currentCanvasInUrl.current = canvasInUrl;
-		if (
-			canvasInUrl === undefined &&
-			currentCanvasMode.current !== 'view'
-		) {
+		if ( canvasInUrl !== 'edit' && currentCanvasMode.current !== 'view' ) {
 			setCanvasMode( 'view' );
 		} else if (
 			canvasInUrl === 'edit' &&

package/src/components/table/style.scss

@@ -1,5 +1,6 @@
 .edit-site-table-wrapper {
 	width: 100%;
+	padding: $grid-unit-40;
 }
 
 .edit-site-table {

package/src/hooks/commands/use-common-commands.js

@@ -114,13 +114,68 @@ function useGlobalStylesOpenCssCommands() {
 	};
 }
 
-export function useCommonCommands() {
+function useGlobalStylesOpenRevisionsCommands() {
 	const { openGeneralSidebar, setEditorCanvasContainerView, setCanvasMode } =
 		unlock( useDispatch( editSiteStore ) );
+	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
 	const { params } = useLocation();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isListPage = getIsListPage( params, isMobileViewport );
-	const isEditorPage = ! isListPage;
+	const isEditorPage = ! getIsListPage( params, isMobileViewport );
+	const history = useHistory();
+	const hasRevisions = useSelect(
+		( select ) =>
+			select( coreStore ).getCurrentThemeGlobalStylesRevisions()?.length,
+		[]
+	);
+	const commands = useMemo( () => {
+		if ( ! hasRevisions ) {
+			return [];
+		}
+
+		return [
+			{
+				name: 'core/edit-site/open-global-styles-revisions',
+				label: __( 'Open styles revisions' ),
+				icon: backup,
+				callback: ( { close } ) => {
+					close();
+					if ( ! isEditorPage ) {
+						history.push( {
+							path: '/wp_global_styles',
+							canvas: 'edit',
+						} );
+					}
+					if ( isEditorPage && getCanvasMode() !== 'edit' ) {
+						setCanvasMode( 'edit' );
+					}
+					openGeneralSidebar( 'edit-site/global-styles' );
+					setEditorCanvasContainerView( 'global-styles-revisions' );
+				},
+			},
+		];
+	}, [
+		hasRevisions,
+		history,
+		openGeneralSidebar,
+		setEditorCanvasContainerView,
+		isEditorPage,
+		getCanvasMode,
+		setCanvasMode,
+	] );
+
+	return {
+		isLoading: false,
+		commands,
+	};
+}
+
+export function useCommonCommands() {
+	const { openGeneralSidebar, setCanvasMode } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const { params } = useLocation();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const isEditorPage = ! getIsListPage( params, isMobileViewport );
 	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
 	const { set } = useDispatch( preferencesStore );
 	const { createInfoNotice } = useDispatch( noticesStore );
@@ -139,26 +194,6 @@ export function useCommonCommands() {
 		};
 	}, [] );
 
-	useCommand( {
-		name: 'core/edit-site/open-global-styles-revisions',
-		label: __( 'Open styles revisions' ),
-		icon: backup,
-		callback: ( { close } ) => {
-			close();
-			if ( ! isEditorPage ) {
-				history.push( {
-					path: '/wp_global_styles',
-					canvas: 'edit',
-				} );
-			}
-			if ( isEditorPage && getCanvasMode() !== 'edit' ) {
-				setCanvasMode( 'edit' );
-			}
-			openGeneralSidebar( 'edit-site/global-styles' );
-			setEditorCanvasContainerView( 'global-styles-revisions' );
-		},
-	} );
-
 	useCommand( {
 		name: 'core/edit-site/open-styles',
 		label: __( 'Open styles' ),
@@ -228,4 +263,9 @@ export function useCommonCommands() {
 		name: 'core/edit-site/open-styles-css',
 		hook: useGlobalStylesOpenCssCommands,
 	} );
+
+	useCommandLoader( {
+		name: 'core/edit-site/open-styles-revisions',
+		hook: useGlobalStylesOpenRevisionsCommands,
+	} );
 }

package/src/hooks/commands/use-edit-mode-commands.js

@@ -2,10 +2,11 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { __, isRTL } from '@wordpress/i18n';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
 import {
 	trash,
-	backup,
+	rotateLeft,
+	rotateRight,
 	layout,
 	page,
 	drawerLeft,
@@ -13,12 +14,14 @@ import {
 	blockDefault,
 	cog,
 	code,
-	keyboardClose,
+	keyboard,
 } from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
+import { decodeEntities } from '@wordpress/html-entities';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as interfaceStore } from '@wordpress/interface';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -34,6 +37,7 @@ import { unlock } from '../../lock-unlock';
 const { useHistory } = unlock( routerPrivateApis );
 
 function usePageContentFocusCommands() {
+	const { record: template } = useEditedEntityRecord();
 	const { isPage, canvasMode, hasPageContentFocus } = useSelect(
 		( select ) => ( {
 			isPage: select( editSiteStore ).isPage(),
@@ -53,7 +57,11 @@ function usePageContentFocusCommands() {
 	if ( hasPageContentFocus ) {
 		commands.push( {
 			name: 'core/switch-to-template-focus',
-			label: __( 'Edit template' ),
+			/* translators: %1$s: template title */
+			label: sprintf(
+				'Edit template: %s',
+				decodeEntities( template.title )
+			),
 			icon: layout,
 			callback: ( { close } ) => {
 				setHasPageContentFocus( false );
@@ -93,12 +101,20 @@ function useManipulateDocumentCommands() {
 	if ( isTemplateRevertable( template ) && ! hasPageContentFocus ) {
 		const label =
 			template.type === 'wp_template'
-				? __( 'Reset template' )
-				: __( 'Reset template part' );
+				? /* translators: %1$s: template title */
+				  sprintf(
+						'Reset template: %s',
+						decodeEntities( template.title )
+				  )
+				: /* translators: %1$s: template part title */
+				  sprintf(
+						'Reset template part: %s',
+						decodeEntities( template.title )
+				  );
 		commands.push( {
 			name: 'core/reset-template',
 			label,
-			icon: backup,
+			icon: isRTL() ? rotateRight : rotateLeft,
 			callback: ( { close } ) => {
 				revertTemplate( template );
 				close();
@@ -109,8 +125,16 @@ function useManipulateDocumentCommands() {
 	if ( isTemplateRemovable( template ) && ! hasPageContentFocus ) {
 		const label =
 			template.type === 'wp_template'
-				? __( 'Delete template' )
-				: __( 'Delete template part' );
+				? /* translators: %1$s: template title */
+				  sprintf(
+						'Delete template: %s',
+						decodeEntities( template.title )
+				  )
+				: /* translators: %1$s: template part title */
+				  sprintf(
+						'Delete template part: %s',
+						decodeEntities( template.title )
+				  );
 		const path =
 			template.type === 'wp_template'
 				? '/wp_template'
@@ -137,20 +161,32 @@ function useManipulateDocumentCommands() {
 }
 
 function useEditUICommands() {
-	const { openGeneralSidebar, closeGeneralSidebar, switchEditorMode } =
-		useDispatch( editSiteStore );
-	const { canvasMode, editorMode, activeSidebar } = useSelect(
-		( select ) => ( {
-			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
-			editorMode: select( editSiteStore ).getEditorMode(),
-			activeSidebar: select( interfaceStore ).getActiveComplementaryArea(
-				editSiteStore.name
-			),
-		} ),
-		[]
-	);
+	const {
+		openGeneralSidebar,
+		closeGeneralSidebar,
+		setIsInserterOpened,
+		setIsListViewOpened,
+		switchEditorMode,
+	} = useDispatch( editSiteStore );
+	const { canvasMode, editorMode, activeSidebar, showBlockBreadcrumbs } =
+		useSelect(
+			( select ) => ( {
+				canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
+				editorMode: select( editSiteStore ).getEditorMode(),
+				activeSidebar: select(
+					interfaceStore
+				).getActiveComplementaryArea( editSiteStore.name ),
+				showBlockBreadcrumbs: select( preferencesStore ).get(
+					'core/edit-site',
+					'showBlockBreadcrumbs'
+				),
+			} ),
+			[]
+		);
 	const { openModal } = useDispatch( interfaceStore );
-	const { toggle } = useDispatch( preferencesStore );
+	const { get: getPreference } = useSelect( preferencesStore );
+	const { set: setPreference, toggle } = useDispatch( preferencesStore );
+	const { createInfoNotice } = useDispatch( noticesStore );
 
 	if ( canvasMode !== 'edit' ) {
 		return { isLoading: false, commands: [] };
@@ -196,6 +232,29 @@ function useEditUICommands() {
 		},
 	} );
 
+	commands.push( {
+		name: 'core/toggle-distraction-free',
+		label: __( 'Toggle distraction free' ),
+		icon: cog,
+		callback: ( { close } ) => {
+			setPreference( 'core/edit-site', 'fixedToolbar', false );
+			setIsInserterOpened( false );
+			setIsListViewOpened( false );
+			closeGeneralSidebar();
+			toggle( 'core/edit-site', 'distractionFree' );
+			createInfoNotice(
+				getPreference( 'core/edit-site', 'distractionFree' )
+					? __( 'Distraction free mode turned on.' )
+					: __( 'Distraction free mode turned off.' ),
+				{
+					id: 'core/edit-site/distraction-free-mode/notice',
+					type: 'snackbar',
+				}
+			);
+			close();
+		},
+	} );
+
 	commands.push( {
 		name: 'core/toggle-top-toolbar',
 		label: __( 'Toggle top toolbar' ),
@@ -228,12 +287,24 @@ function useEditUICommands() {
 	commands.push( {
 		name: 'core/open-shortcut-help',
 		label: __( 'Open keyboard shortcuts' ),
-		icon: keyboardClose,
+		icon: keyboard,
 		callback: () => {
 			openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
 		},
 	} );
 
+	commands.push( {
+		name: 'core/toggle-breadcrumbs',
+		label: showBlockBreadcrumbs
+			? __( 'Hide block breadcrumbs' )
+			: __( 'Show block breadcrumbs' ),
+		icon: cog,
+		callback: ( { close } ) => {
+			toggle( 'core/edit-site', 'showBlockBreadcrumbs' );
+			close();
+		},
+	} );
+
 	return {
 		isLoading: false,
 		commands,

package/src/hooks/push-changes-to-global-styles/index.js

@@ -25,9 +25,12 @@ import { store as noticesStore } from '@wordpress/notices';
 import { useSupportedStyles } from '../../components/global-styles/hooks';
 import { unlock } from '../../lock-unlock';
 
-const { GlobalStylesContext, useBlockEditingMode } = unlock(
-	blockEditorPrivateApis
-);
+const {
+	GlobalStylesContext,
+	useBlockEditingMode,
+	__experimentalUseGlobalBehaviors: useGlobalBehaviors,
+	__experimentalUseHasBehaviorsPanel: useHasBehaviorsPanel,
+} = unlock( blockEditorPrivateApis );
 
 // TODO: Temporary duplication of constant in @wordpress/block-editor. Can be
 // removed by moving PushChangesToGlobalStylesControl to
@@ -121,7 +124,7 @@ function useChangesToPush( name, attributes ) {
 					: getValueFromObjectPath( attributes.style, path );
 				return value ? [ { path, value } ] : [];
 			} ),
-		[ supports, name, attributes ]
+		[ supports, attributes ]
 	);
 }
 
@@ -176,6 +179,9 @@ function PushChangesToGlobalStylesControl( {
 } ) {
 	const changes = useChangesToPush( name, attributes );
 
+	const hasBehaviorsPanel = useHasBehaviorsPanel( attributes, name, {
+		blockSupportOnly: true,
+	} );
 	const { user: userConfig, setUserConfig } =
 		useContext( GlobalStylesContext );
 
@@ -183,55 +189,86 @@ function PushChangesToGlobalStylesControl( {
 		useDispatch( blockEditorStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 
+	const { inheritedBehaviors, setBehavior } = useGlobalBehaviors( name );
+
+	const userHasEditedBehaviors =
+		attributes.hasOwnProperty( 'behaviors' ) && hasBehaviorsPanel;
+
 	const pushChanges = useCallback( () => {
-		if ( changes.length === 0 ) {
+		if ( changes.length === 0 && ! userHasEditedBehaviors ) {
 			return;
 		}
+		if ( changes.length > 0 ) {
+			const { style: blockStyles } = attributes;
 
-		const { style: blockStyles } = attributes;
+			const newBlockStyles = cloneDeep( blockStyles );
+			const newUserConfig = cloneDeep( userConfig );
 
-		const newBlockStyles = cloneDeep( blockStyles );
-		const newUserConfig = cloneDeep( userConfig );
+			for ( const { path, value } of changes ) {
+				setNestedValue( newBlockStyles, path, undefined );
+				setNestedValue(
+					newUserConfig,
+					[ 'styles', 'blocks', name, ...path ],
+					value
+				);
+			}
 
-		for ( const { path, value } of changes ) {
-			setNestedValue( newBlockStyles, path, undefined );
-			setNestedValue(
-				newUserConfig,
-				[ 'styles', 'blocks', name, ...path ],
-				value
+			// @wordpress/core-data doesn't support editing multiple entity types in
+			// a single undo level. So for now, we disable @wordpress/core-data undo
+			// tracking and implement our own Undo button in the snackbar
+			// notification.
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( { style: newBlockStyles } );
+			setUserConfig( () => newUserConfig, { undoIgnore: true } );
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: Title of the block e.g. 'Heading'.
+					__( '%s styles applied.' ),
+					getBlockType( name ).title
+				),
+				{
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick() {
+								__unstableMarkNextChangeAsNotPersistent();
+								setAttributes( { style: blockStyles } );
+								setUserConfig( () => userConfig, {
+									undoIgnore: true,
+								} );
+							},
+						},
+					],
+				}
 			);
 		}
-
-		// @wordpress/core-data doesn't support editing multiple entity types in
-		// a single undo level. So for now, we disable @wordpress/core-data undo
-		// tracking and implement our own Undo button in the snackbar
-		// notification.
-		__unstableMarkNextChangeAsNotPersistent();
-		setAttributes( { style: newBlockStyles } );
-		setUserConfig( () => newUserConfig, { undoIgnore: true } );
-
-		createSuccessNotice(
-			sprintf(
-				// translators: %s: Title of the block e.g. 'Heading'.
-				__( '%s styles applied.' ),
-				getBlockType( name ).title
-			),
-			{
-				type: 'snackbar',
-				actions: [
-					{
-						label: __( 'Undo' ),
-						onClick() {
-							__unstableMarkNextChangeAsNotPersistent();
-							setAttributes( { style: blockStyles } );
-							setUserConfig( () => userConfig, {
-								undoIgnore: true,
-							} );
+		if ( userHasEditedBehaviors ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			setBehavior( attributes.behaviors );
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: Title of the block e.g. 'Heading'.
+					__( '%s behaviors applied.' ),
+					getBlockType( name ).title
+				),
+				{
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick() {
+								__unstableMarkNextChangeAsNotPersistent();
+								setBehavior( inheritedBehaviors );
+								setUserConfig( () => userConfig, {
+									undoIgnore: true,
+								} );
+							},
 						},
-					},
-				],
-			}
-		);
+					],
+				}
+			);
+		}
 	}, [ changes, attributes, userConfig, name ] );
 
 	return (
@@ -240,7 +277,7 @@ function PushChangesToGlobalStylesControl( {
 			help={ sprintf(
 				// translators: %s: Title of the block e.g. 'Heading'.
 				__(
-					'Apply this block’s typography, spacing, dimensions, and color styles to all %s blocks.'
+					'Apply this block’s typography, spacing, dimensions, color styles, and behaviors to all %s blocks.'
 				),
 				getBlockType( name ).title
 			) }
@@ -250,7 +287,7 @@ function PushChangesToGlobalStylesControl( {
 			</BaseControl.VisualLabel>
 			<Button
 				variant="primary"
-				disabled={ changes.length === 0 }
+				disabled={ changes.length === 0 && ! userHasEditedBehaviors }
 				onClick={ pushChanges }
 			>
 				{ __( 'Apply globally' ) }

package/src/store/private-actions.js

@@ -18,11 +18,15 @@ export const setCanvasMode =
 			mode,
 		} );
 		// Check if the block list view should be open by default.
+		// If `distractionFree` mode is enabled, the block list view should not be open.
 		if (
 			mode === 'edit' &&
 			registry
 				.select( preferencesStore )
-				.get( 'core/edit-site', 'showListViewByDefault' )
+				.get( 'core/edit-site', 'showListViewByDefault' ) &&
+			! registry
+				.select( preferencesStore )
+				.get( 'core/edit-site', 'distractionFree' )
 		) {
 			dispatch.setIsListViewOpened( true );
 		}

package/src/utils/use-debounced-input.js

@@ -6,12 +6,13 @@ import { useDebounce } from '@wordpress/compose';
 
 export default function useDebouncedInput( defaultValue = '' ) {
 	const [ input, setInput ] = useState( defaultValue );
-	const [ debounced, setter ] = useState( defaultValue );
-	const setDebounced = useDebounce( setter, 250 );
+	const [ debouncedInput, setDebouncedState ] = useState( defaultValue );
+
+	const setDebouncedInput = useDebounce( setDebouncedState, 250 );
+
 	useEffect( () => {
-		if ( debounced !== input ) {
-			setDebounced( input );
-		}
-	}, [ debounced, input ] );
-	return [ input, setInput, debounced ];
+		setDebouncedInput( input );
+	}, [ input ] );
+
+	return [ input, setInput, debouncedInput ];
 }