@wordpress/edit-site 6.11.0 → 6.12.0

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

@@ -28,282 +28,289 @@ import { store as editSiteStore } from '../../store';
 const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 
-function useGlobalStylesOpenStylesCommands() {
-	const { openGeneralSidebar } = unlock( useDispatch( editSiteStore ) );
-	const { params } = useLocation();
-	const { canvas = 'view' } = params;
-	const history = useHistory();
-	const isBlockBasedTheme = useSelect( ( select ) => {
-		return select( coreStore ).getCurrentTheme().is_block_theme;
-	}, [] );
+const getGlobalStylesOpenStylesCommands = () =>
+	function useGlobalStylesOpenStylesCommands() {
+		const { openGeneralSidebar } = unlock( useDispatch( editSiteStore ) );
+		const { params } = useLocation();
+		const { canvas = 'view' } = params;
+		const history = useHistory();
+		const isBlockBasedTheme = useSelect( ( select ) => {
+			return select( coreStore ).getCurrentTheme().is_block_theme;
+		}, [] );
 
-	const commands = useMemo( () => {
-		if ( ! isBlockBasedTheme ) {
-			return [];
-		}
+		const commands = useMemo( () => {
+			if ( ! isBlockBasedTheme ) {
+				return [];
+			}
 
-		return [
-			{
-				name: 'core/edit-site/open-styles',
-				label: __( 'Open styles' ),
-				callback: ( { close } ) => {
-					close();
-					if ( ! params.postId ) {
-						history.push( {
-							path: '/wp_global_styles',
-							canvas: 'edit',
-						} );
-					}
-					if ( params.postId && canvas !== 'edit' ) {
-						history.push(
-							{ ...params, canvas: 'edit' },
-							undefined,
-							{
-								transition: 'canvas-mode-edit-transition',
-							}
-						);
-					}
-					openGeneralSidebar( 'edit-site/global-styles' );
+			return [
+				{
+					name: 'core/edit-site/open-styles',
+					label: __( 'Open styles' ),
+					callback: ( { close } ) => {
+						close();
+						if ( ! params.postId ) {
+							history.push( {
+								path: '/wp_global_styles',
+								canvas: 'edit',
+							} );
+						}
+						if ( params.postId && canvas !== 'edit' ) {
+							history.push(
+								{ ...params, canvas: 'edit' },
+								undefined,
+								{
+									transition: 'canvas-mode-edit-transition',
+								}
+							);
+						}
+						openGeneralSidebar( 'edit-site/global-styles' );
+					},
+					icon: styles,
 				},
-				icon: styles,
-			},
-		];
-	}, [ history, openGeneralSidebar, params, canvas, isBlockBasedTheme ] );
+			];
+		}, [ history, openGeneralSidebar, params, canvas, isBlockBasedTheme ] );
 
-	return {
-		isLoading: false,
-		commands,
+		return {
+			isLoading: false,
+			commands,
+		};
 	};
-}
 
-function useGlobalStylesToggleWelcomeGuideCommands() {
-	const { openGeneralSidebar } = unlock( useDispatch( editSiteStore ) );
-	const { params } = useLocation();
-	const { canvas = 'view' } = params;
-	const { set } = useDispatch( preferencesStore );
+const getGlobalStylesToggleWelcomeGuideCommands = () =>
+	function useGlobalStylesToggleWelcomeGuideCommands() {
+		const { openGeneralSidebar } = unlock( useDispatch( editSiteStore ) );
+		const { params } = useLocation();
+		const { canvas = 'view' } = params;
+		const { set } = useDispatch( preferencesStore );
 
-	const history = useHistory();
-	const isBlockBasedTheme = useSelect( ( select ) => {
-		return select( coreStore ).getCurrentTheme().is_block_theme;
-	}, [] );
+		const history = useHistory();
+		const isBlockBasedTheme = useSelect( ( select ) => {
+			return select( coreStore ).getCurrentTheme().is_block_theme;
+		}, [] );
 
-	const commands = useMemo( () => {
-		if ( ! isBlockBasedTheme ) {
-			return [];
-		}
+		const commands = useMemo( () => {
+			if ( ! isBlockBasedTheme ) {
+				return [];
+			}
 
-		return [
-			{
-				name: 'core/edit-site/toggle-styles-welcome-guide',
-				label: __( 'Learn about styles' ),
-				callback: ( { close } ) => {
-					close();
-					if ( ! params.postId ) {
-						history.push( {
-							path: '/wp_global_styles',
-							canvas: 'edit',
-						} );
-					}
-					if ( params.postId && canvas !== 'edit' ) {
-						history.push(
-							{
-								...params,
+			return [
+				{
+					name: 'core/edit-site/toggle-styles-welcome-guide',
+					label: __( 'Learn about styles' ),
+					callback: ( { close } ) => {
+						close();
+						if ( ! params.postId ) {
+							history.push( {
+								path: '/wp_global_styles',
 								canvas: 'edit',
-							},
-							undefined,
-							{
-								transition: 'canvas-mode-edit-transition',
-							}
-						);
-					}
-					openGeneralSidebar( 'edit-site/global-styles' );
-					set( 'core/edit-site', 'welcomeGuideStyles', true );
-					// sometimes there's a focus loss that happens after some time
-					// that closes the modal, we need to force reopening it.
-					setTimeout( () => {
+							} );
+						}
+						if ( params.postId && canvas !== 'edit' ) {
+							history.push(
+								{
+									...params,
+									canvas: 'edit',
+								},
+								undefined,
+								{
+									transition: 'canvas-mode-edit-transition',
+								}
+							);
+						}
+						openGeneralSidebar( 'edit-site/global-styles' );
 						set( 'core/edit-site', 'welcomeGuideStyles', true );
-					}, 500 );
+						// sometimes there's a focus loss that happens after some time
+						// that closes the modal, we need to force reopening it.
+						setTimeout( () => {
+							set( 'core/edit-site', 'welcomeGuideStyles', true );
+						}, 500 );
+					},
+					icon: help,
 				},
-				icon: help,
-			},
-		];
-	}, [
-		history,
-		openGeneralSidebar,
-		canvas,
-		isBlockBasedTheme,
-		set,
-		params,
-	] );
+			];
+		}, [
+			history,
+			openGeneralSidebar,
+			canvas,
+			isBlockBasedTheme,
+			set,
+			params,
+		] );
 
-	return {
-		isLoading: false,
-		commands,
+		return {
+			isLoading: false,
+			commands,
+		};
 	};
-}
 
-function useGlobalStylesResetCommands() {
-	const [ canReset, onReset ] = useGlobalStylesReset();
-	const commands = useMemo( () => {
-		if ( ! canReset ) {
-			return [];
-		}
+const getGlobalStylesResetCommands = () =>
+	function useGlobalStylesResetCommands() {
+		const [ canReset, onReset ] = useGlobalStylesReset();
+		const commands = useMemo( () => {
+			if ( ! canReset ) {
+				return [];
+			}
 
-		return [
-			{
-				name: 'core/edit-site/reset-global-styles',
-				label: __( 'Reset styles' ),
-				icon: isRTL() ? rotateRight : rotateLeft,
-				callback: ( { close } ) => {
-					close();
-					onReset();
+			return [
+				{
+					name: 'core/edit-site/reset-global-styles',
+					label: __( 'Reset styles' ),
+					icon: isRTL() ? rotateRight : rotateLeft,
+					callback: ( { close } ) => {
+						close();
+						onReset();
+					},
 				},
-			},
-		];
-	}, [ canReset, onReset ] );
+			];
+		}, [ canReset, onReset ] );
 
-	return {
-		isLoading: false,
-		commands,
+		return {
+			isLoading: false,
+			commands,
+		};
 	};
-}
 
-function useGlobalStylesOpenCssCommands() {
-	const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
-		useDispatch( editSiteStore )
-	);
-	const { params } = useLocation();
-	const { canvas = 'view' } = params;
-	const history = useHistory();
-	const { canEditCSS } = useSelect( ( select ) => {
-		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-			select( coreStore );
+const getGlobalStylesOpenCssCommands = () =>
+	function useGlobalStylesOpenCssCommands() {
+		const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
+			useDispatch( editSiteStore )
+		);
+		const { params } = useLocation();
+		const { canvas = 'view' } = params;
+		const history = useHistory();
+		const { canEditCSS } = useSelect( ( select ) => {
+			const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+				select( coreStore );
 
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+				: undefined;
 
-		return {
-			canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
-		};
-	}, [] );
+			return {
+				canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
+			};
+		}, [] );
 
-	const commands = useMemo( () => {
-		if ( ! canEditCSS ) {
-			return [];
-		}
+		const commands = useMemo( () => {
+			if ( ! canEditCSS ) {
+				return [];
+			}
 
-		return [
-			{
-				name: 'core/edit-site/open-styles-css',
-				label: __( 'Customize CSS' ),
-				icon: brush,
-				callback: ( { close } ) => {
-					close();
-					if ( ! params.postId ) {
-						history.push( {
-							path: '/wp_global_styles',
-							canvas: 'edit',
-						} );
-					}
-					if ( params.postId && canvas !== 'edit' ) {
-						history.push(
-							{
-								...params,
+			return [
+				{
+					name: 'core/edit-site/open-styles-css',
+					label: __( 'Customize CSS' ),
+					icon: brush,
+					callback: ( { close } ) => {
+						close();
+						if ( ! params.postId ) {
+							history.push( {
+								path: '/wp_global_styles',
 								canvas: 'edit',
-							},
-							undefined,
-							{
-								transition: 'canvas-mode-edit-transition',
-							}
-						);
-					}
-					openGeneralSidebar( 'edit-site/global-styles' );
-					setEditorCanvasContainerView( 'global-styles-css' );
+							} );
+						}
+						if ( params.postId && canvas !== 'edit' ) {
+							history.push(
+								{
+									...params,
+									canvas: 'edit',
+								},
+								undefined,
+								{
+									transition: 'canvas-mode-edit-transition',
+								}
+							);
+						}
+						openGeneralSidebar( 'edit-site/global-styles' );
+						setEditorCanvasContainerView( 'global-styles-css' );
+					},
 				},
-			},
-		];
-	}, [
-		history,
-		openGeneralSidebar,
-		setEditorCanvasContainerView,
-		canEditCSS,
-		canvas,
-		params,
-	] );
-	return {
-		isLoading: false,
-		commands,
+			];
+		}, [
+			history,
+			openGeneralSidebar,
+			setEditorCanvasContainerView,
+			canEditCSS,
+			canvas,
+			params,
+		] );
+		return {
+			isLoading: false,
+			commands,
+		};
 	};
-}
 
-function useGlobalStylesOpenRevisionsCommands() {
-	const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
-		useDispatch( editSiteStore )
-	);
-	const { params } = useLocation();
-	const { canvas = 'view' } = params;
-	const history = useHistory();
-	const hasRevisions = useSelect( ( select ) => {
-		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-			select( coreStore );
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
-		return !! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count;
-	}, [] );
+const getGlobalStylesOpenRevisionsCommands = () =>
+	function useGlobalStylesOpenRevisionsCommands() {
+		const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
+			useDispatch( editSiteStore )
+		);
+		const { params } = useLocation();
+		const { canvas = 'view' } = params;
+		const history = useHistory();
+		const hasRevisions = useSelect( ( select ) => {
+			const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+				select( coreStore );
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+				: undefined;
+			return !! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count;
+		}, [] );
 
-	const commands = useMemo( () => {
-		if ( ! hasRevisions ) {
-			return [];
-		}
+		const commands = useMemo( () => {
+			if ( ! hasRevisions ) {
+				return [];
+			}
 
-		return [
-			{
-				name: 'core/edit-site/open-global-styles-revisions',
-				label: __( 'Style revisions' ),
-				icon: backup,
-				callback: ( { close } ) => {
-					close();
-					if ( ! params.postId ) {
-						history.push( {
-							path: '/wp_global_styles',
-							canvas: 'edit',
-						} );
-					}
-					if ( params.postId && canvas !== 'edit' ) {
-						history.push(
-							{
-								...params,
+			return [
+				{
+					name: 'core/edit-site/open-global-styles-revisions',
+					label: __( 'Style revisions' ),
+					icon: backup,
+					callback: ( { close } ) => {
+						close();
+						if ( ! params.postId ) {
+							history.push( {
+								path: '/wp_global_styles',
 								canvas: 'edit',
-							},
-							undefined,
-							{
-								transition: 'canvas-mode-edit-transition',
-							}
+							} );
+						}
+						if ( params.postId && canvas !== 'edit' ) {
+							history.push(
+								{
+									...params,
+									canvas: 'edit',
+								},
+								undefined,
+								{
+									transition: 'canvas-mode-edit-transition',
+								}
+							);
+						}
+						openGeneralSidebar( 'edit-site/global-styles' );
+						setEditorCanvasContainerView(
+							'global-styles-revisions'
 						);
-					}
-					openGeneralSidebar( 'edit-site/global-styles' );
-					setEditorCanvasContainerView( 'global-styles-revisions' );
+					},
 				},
-			},
-		];
-	}, [
-		hasRevisions,
-		history,
-		openGeneralSidebar,
-		setEditorCanvasContainerView,
-		canvas,
-		params,
-	] );
+			];
+		}, [
+			hasRevisions,
+			history,
+			openGeneralSidebar,
+			setEditorCanvasContainerView,
+			canvas,
+			params,
+		] );
 
-	return {
-		isLoading: false,
-		commands,
+		return {
+			isLoading: false,
+			commands,
+		};
 	};
-}
 
 export function useCommonCommands() {
 	const homeUrl = useSelect( ( select ) => {
@@ -324,26 +331,26 @@ export function useCommonCommands() {
 
 	useCommandLoader( {
 		name: 'core/edit-site/open-styles',
-		hook: useGlobalStylesOpenStylesCommands,
+		hook: getGlobalStylesOpenStylesCommands(),
 	} );
 
 	useCommandLoader( {
 		name: 'core/edit-site/toggle-styles-welcome-guide',
-		hook: useGlobalStylesToggleWelcomeGuideCommands,
+		hook: getGlobalStylesToggleWelcomeGuideCommands(),
 	} );
 
 	useCommandLoader( {
 		name: 'core/edit-site/reset-global-styles',
-		hook: useGlobalStylesResetCommands,
+		hook: getGlobalStylesResetCommands(),
 	} );
 
 	useCommandLoader( {
 		name: 'core/edit-site/open-styles-css',
-		hook: useGlobalStylesOpenCssCommands,
+		hook: getGlobalStylesOpenCssCommands(),
 	} );
 
 	useCommandLoader( {
 		name: 'core/edit-site/open-styles-revisions',
-		hook: useGlobalStylesOpenRevisionsCommands,
+		hook: getGlobalStylesOpenRevisionsCommands(),
 	} );
 }

package/src/index.js

@@ -68,6 +68,7 @@ export function initializeEditor( id, settings ) {
 		allowRightClickOverrides: true,
 		distractionFree: false,
 		editorMode: 'visual',
+		editorTool: 'edit',
 		fixedToolbar: false,
 		focusMode: false,
 		inactivePanels: [],

package/src/posts.js

@@ -65,6 +65,7 @@ export function initializePostsDashboard( id, settings ) {
 		allowRightClickOverrides: true,
 		distractionFree: false,
 		editorMode: 'visual',
+		editorTool: 'edit',
 		fixedToolbar: false,
 		focusMode: false,
 		inactivePanels: [],

package/src/style.scss

@@ -1,7 +1,5 @@
 @import "../../dataviews/src/style.scss";
-@import "../../fields/src/styles.scss";
-@import "../../fields/src/fields/featured-image/style.scss";
-
+@import "../../fields/src/style.scss";
 @import "./components/add-new-template/style.scss";
 @import "./components/block-editor/style.scss";
 @import "./components/canvas-loader/style.scss";
@@ -38,6 +36,7 @@
 @import "./components/global-styles/font-library-modal/style.scss";
 @import "./components/pagination/style.scss";
 @import "./components/global-styles/variations/style.scss";
+@import "./components/sidebar-global-styles-wrapper/style.scss";
 
 /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
 ::view-transition-image-pair(root) {

package/build/components/async/index.js

@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Async = Async;
-var _element = require("@wordpress/element");
-var _priorityQueue = require("@wordpress/priority-queue");
-/**
- * WordPress dependencies
- */
-
-const blockPreviewQueue = (0, _priorityQueue.createQueue)();
-
-/**
- * Renders a component at the next idle time.
- * @param {*} props
- */
-function Async({
-  children,
-  placeholder
-}) {
-  const [shouldRender, setShouldRender] = (0, _element.useState)(false);
-
-  // In the future, we could try to use startTransition here, but currently
-  // react will batch all transitions, which means all previews will be
-  // rendered at the same time.
-  // https://react.dev/reference/react/startTransition#caveats
-  // > If there are multiple ongoing Transitions, React currently batches them
-  // > together. This is a limitation that will likely be removed in a future
-  // > release.
-
-  (0, _element.useEffect)(() => {
-    const context = {};
-    blockPreviewQueue.add(context, () => {
-      // Synchronously run all renders so it consumes timeRemaining.
-      // See https://github.com/WordPress/gutenberg/pull/48238
-      (0, _element.flushSync)(() => {
-        setShouldRender(true);
-      });
-    });
-    return () => {
-      blockPreviewQueue.cancel(context);
-    };
-  }, []);
-  if (!shouldRender) {
-    return placeholder;
-  }
-  return children;
-}
-//# sourceMappingURL=index.js.map

package/build/components/async/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_element","require","_priorityQueue","blockPreviewQueue","createQueue","Async","children","placeholder","shouldRender","setShouldRender","useState","useEffect","context","add","flushSync","cancel"],"sources":["@wordpress/edit-site/src/components/async/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState, flushSync } from '@wordpress/element';\nimport { createQueue } from '@wordpress/priority-queue';\n\nconst blockPreviewQueue = createQueue();\n\n/**\n * Renders a component at the next idle time.\n * @param {*} props\n */\nexport function Async( { children, placeholder } ) {\n\tconst [ shouldRender, setShouldRender ] = useState( false );\n\n\t// In the future, we could try to use startTransition here, but currently\n\t// react will batch all transitions, which means all previews will be\n\t// rendered at the same time.\n\t// https://react.dev/reference/react/startTransition#caveats\n\t// > If there are multiple ongoing Transitions, React currently batches them\n\t// > together. This is a limitation that will likely be removed in a future\n\t// > release.\n\n\tuseEffect( () => {\n\t\tconst context = {};\n\t\tblockPreviewQueue.add( context, () => {\n\t\t\t// Synchronously run all renders so it consumes timeRemaining.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/48238\n\t\t\tflushSync( () => {\n\t\t\t\tsetShouldRender( true );\n\t\t\t} );\n\t\t} );\n\t\treturn () => {\n\t\t\tblockPreviewQueue.cancel( context );\n\t\t};\n\t}, [] );\n\n\tif ( ! shouldRender ) {\n\t\treturn placeholder;\n\t}\n\n\treturn children;\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAIA,MAAME,iBAAiB,GAAG,IAAAC,0BAAW,EAAC,CAAC;;AAEvC;AACA;AACA;AACA;AACO,SAASC,KAAKA,CAAE;EAAEC,QAAQ;EAAEC;AAAY,CAAC,EAAG;EAClD,MAAM,CAAEC,YAAY,EAAEC,eAAe,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;;EAE3D;EACA;EACA;EACA;EACA;EACA;EACA;;EAEA,IAAAC,kBAAS,EAAE,MAAM;IAChB,MAAMC,OAAO,GAAG,CAAC,CAAC;IAClBT,iBAAiB,CAACU,GAAG,CAAED,OAAO,EAAE,MAAM;MACrC;MACA;MACA,IAAAE,kBAAS,EAAE,MAAM;QAChBL,eAAe,CAAE,IAAK,CAAC;MACxB,CAAE,CAAC;IACJ,CAAE,CAAC;IACH,OAAO,MAAM;MACZN,iBAAiB,CAACY,MAAM,CAAEH,OAAQ,CAAC;IACpC,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,IAAK,CAAEJ,YAAY,EAAG;IACrB,OAAOD,WAAW;EACnB;EAEA,OAAOD,QAAQ;AAChB","ignoreList":[]}