@wordpress/edit-site 5.1.0 → 5.3.0

package/src/components/site-hub/index.js

@@ -17,6 +17,7 @@ import { useReducedMotion, useViewportMatch } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -29,122 +30,132 @@ import useEditedEntityRecord from '../use-edited-entity-record';
 
 const HUB_ANIMATION_DURATION = 0.3;
 
-function SiteHub( {
-	className,
-	isMobileCanvasVisible,
-	setIsMobileCanvasVisible,
-} ) {
-	const { params } = useLocation();
-	const isListPage = getIsListPage( params );
-	const isEditorPage = ! isListPage;
-	const { canvasMode, dashboardLink, entityConfig } = useSelect(
-		( select ) => {
-			select( editSiteStore ).getEditedPostType();
-			const { __unstableGetCanvasMode, getSettings, getEditedPostType } =
-				select( editSiteStore );
-			return {
-				canvasMode: __unstableGetCanvasMode(),
-				dashboardLink: getSettings().__experimentalDashboardLink,
-				entityConfig: select( coreStore ).getEntityConfig(
-					'postType',
-					getEditedPostType()
-				),
-			};
-		},
-		[]
-	);
-	const disableMotion = useReducedMotion();
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const showEditButton =
-		( isEditorPage && canvasMode === 'view' && ! isMobileViewport ) ||
-		( isMobileViewport && canvasMode === 'view' && isMobileCanvasVisible );
-	const isBackToDashboardButton =
-		( ! isMobileViewport && canvasMode === 'view' ) ||
-		( isMobileViewport && ! isMobileCanvasVisible );
-	const showLabels = canvasMode !== 'edit';
-	const siteIconButtonProps = isBackToDashboardButton
-		? {
-				href: dashboardLink || 'index.php',
-				'aria-label': __( 'Go back to the dashboard' ),
-		  }
-		: {
-				label: __( 'Open Navigation Sidebar' ),
-				onClick: () => {
-					clearSelectedBlock();
-					setIsMobileCanvasVisible( false );
-					__unstableSetCanvasMode( 'view' );
-				},
-		  };
-	const { getTitle } = useEditedEntityRecord();
+const SiteHub = forwardRef(
+	( { isMobileCanvasVisible, setIsMobileCanvasVisible, ...props }, ref ) => {
+		const { params } = useLocation();
+		const isListPage = getIsListPage( params );
+		const isEditorPage = ! isListPage;
+		const { canvasMode, dashboardLink, entityConfig } = useSelect(
+			( select ) => {
+				select( editSiteStore ).getEditedPostType();
+				const {
+					__unstableGetCanvasMode,
+					getSettings,
+					getEditedPostType,
+				} = select( editSiteStore );
+				return {
+					canvasMode: __unstableGetCanvasMode(),
+					dashboardLink: getSettings().__experimentalDashboardLink,
+					entityConfig: select( coreStore ).getEntityConfig(
+						'postType',
+						getEditedPostType()
+					),
+				};
+			},
+			[]
+		);
+		const disableMotion = useReducedMotion();
+		const isMobileViewport = useViewportMatch( 'medium', '<' );
+		const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+		const { clearSelectedBlock } = useDispatch( blockEditorStore );
+		const showEditButton =
+			( isEditorPage && canvasMode === 'view' && ! isMobileViewport ) ||
+			( isMobileViewport &&
+				canvasMode === 'view' &&
+				isMobileCanvasVisible );
+		const isBackToDashboardButton =
+			( ! isMobileViewport && canvasMode === 'view' ) ||
+			( isMobileViewport && ! isMobileCanvasVisible );
+		const showLabels = canvasMode !== 'edit';
+		const siteIconButtonProps = isBackToDashboardButton
+			? {
+					href: dashboardLink || 'index.php',
+					'aria-label': __( 'Go back to the dashboard' ),
+			  }
+			: {
+					label: __( 'Open Navigation Sidebar' ),
+					onClick: () => {
+						clearSelectedBlock();
+						setIsMobileCanvasVisible( false );
+						__unstableSetCanvasMode( 'view' );
+					},
+			  };
+		const { getTitle } = useEditedEntityRecord();
 
-	return (
-		<motion.div
-			className={ classnames( 'edit-site-site-hub', className ) }
-			layout
-			transition={ {
-				type: 'tween',
-				duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
-				ease: 'easeOut',
-			} }
-		>
-			<HStack
-				justify="flex-start"
-				className="edit-site-site-hub__text-content"
+		return (
+			<motion.div
+				ref={ ref }
+				{ ...props }
+				className={ classnames(
+					'edit-site-site-hub',
+					props.className
+				) }
+				layout
+				transition={ {
+					type: 'tween',
+					duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
+					ease: 'easeOut',
+				} }
 			>
-				<motion.div
-					className="edit-site-site-hub__view-mode-toggle-container"
-					layout
-					transition={ {
-						type: 'tween',
-						duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
-						ease: 'easeOut',
-					} }
+				<HStack
+					justify="flex-start"
+					className="edit-site-site-hub__text-content"
+					spacing="0"
 				>
+					<motion.div
+						className="edit-site-site-hub__view-mode-toggle-container"
+						layout
+						transition={ {
+							type: 'tween',
+							duration: disableMotion
+								? 0
+								: HUB_ANIMATION_DURATION,
+							ease: 'easeOut',
+						} }
+					>
+						<Button
+							{ ...siteIconButtonProps }
+							className="edit-site-layout__view-mode-toggle"
+						>
+							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+						</Button>
+					</motion.div>
+
+					{ showLabels && (
+						<VStack spacing={ 0 }>
+							<div className="edit-site-site-hub__title">
+								{ getTitle() }
+							</div>
+							<div className="edit-site-site-hub__post-type">
+								{ entityConfig?.label }
+							</div>
+						</VStack>
+					) }
+				</HStack>
+
+				{ showEditButton && (
 					<Button
-						{ ...siteIconButtonProps }
-						className="edit-site-layout__view-mode-toggle"
+						className="edit-site-site-hub__edit-button"
+						onClick={ () => {
+							__unstableSetCanvasMode( 'edit' );
+						} }
+						variant="primary"
 					>
-						<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+						{ __( 'Edit' ) }
 					</Button>
-				</motion.div>
-
-				{ showLabels && (
-					<VStack spacing={ 0 }>
-						<div className="edit-site-site-hub__title">
-							{ getTitle() }
-						</div>
-						<div className="edit-site-site-hub__post-type">
-							{ entityConfig?.label }
-						</div>
-					</VStack>
 				) }
-			</HStack>
-
-			{ showEditButton && (
-				<Button
-					className="edit-site-site-hub__edit-button"
-					label={ __( 'Open the editor' ) }
-					onClick={ () => {
-						__unstableSetCanvasMode( 'edit' );
-					} }
-					variant="primary"
-				>
-					{ __( 'Edit' ) }
-				</Button>
-			) }
 
-			{ isMobileViewport && ! isMobileCanvasVisible && (
-				<Button
-					onClick={ () => setIsMobileCanvasVisible( true ) }
-					variant="primary"
-				>
-					{ __( 'View Editor' ) }
-				</Button>
-			) }
-		</motion.div>
-	);
-}
+				{ isMobileViewport && ! isMobileCanvasVisible && (
+					<Button
+						onClick={ () => setIsMobileCanvasVisible( true ) }
+						variant="primary"
+					>
+						{ __( 'View Editor' ) }
+					</Button>
+				) }
+			</motion.div>
+		);
+	}
+);
 
 export default SiteHub;

package/src/components/site-hub/style.scss

@@ -15,10 +15,16 @@
 
 .edit-site-site-hub__view-mode-toggle-container {
 	height: $header-height;
-	width: $header-height;
+	width: $header-height + 4px;
 	flex-shrink: 0;
 }
 
+.edit-site-layout.is-edit-mode {
+	.edit-site-site-hub__view-mode-toggle-container {
+		width: $header-height;
+	}
+}
+
 .edit-site-site-hub__text-content {
 	// Necessary for the ellipsis to work.
 	overflow: hidden;

package/src/components/site-icon/index.js

@@ -41,7 +41,7 @@ function SiteIcon( { className } ) {
 	) : (
 		<Icon
 			className="edit-site-site-icon__icon"
-			size="36px"
+			size="32px"
 			icon={ wordpress }
 		/>
 	);

package/src/components/site-icon/style.scss

@@ -3,8 +3,8 @@
 }
 
 .edit-site-site-icon__image {
-	width: $button-size;
-	height: $button-size;
+	width: $grid-unit-40;
+	height: $grid-unit-40;
 	border-radius: $radius-block-ui;
 	object-fit: cover;
 }

package/src/components/style-book/index.js

@@ -19,7 +19,10 @@ import {
 	getBlockFromExample,
 	createBlock,
 } from '@wordpress/blocks';
-import { BlockPreview } from '@wordpress/block-editor';
+import {
+	BlockPreview,
+	experiments as blockEditorExperiments,
+} from '@wordpress/block-editor';
 import { closeSmall } from '@wordpress/icons';
 import { useResizeObserver } from '@wordpress/compose';
 import { useMemo, memo } from '@wordpress/element';
@@ -27,7 +30,9 @@ import { useMemo, memo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useStyle } from '../global-styles';
+import { unlock } from '../../experiments';
+
+const { useGlobalStyle } = unlock( blockEditorExperiments );
 
 const SLOT_FILL_NAME = 'EditSiteStyleBook';
 const { Slot: StyleBookSlot, Fill: StyleBookFill } =
@@ -81,8 +86,8 @@ function getExamples() {
 
 function StyleBook( { isSelected, onSelect, onClose } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
-	const [ textColor ] = useStyle( 'color.text' );
-	const [ backgroundColor ] = useStyle( 'color.background' );
+	const [ textColor ] = useGlobalStyle( 'color.text' );
+	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const examples = useMemo( getExamples, [] );
 	const tabs = useMemo(
 		() =>
@@ -171,7 +176,7 @@ const Example = memo( ( { title, blocks, isSelected, onClick } ) => (
 			<BlockPreview
 				blocks={ blocks }
 				viewportWidth={ 0 }
-				__experimentalStyles={ [
+				additionalStyles={ [
 					{
 						css:
 							'.wp-block:first-child { margin-top: 0; }' +

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

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { useLocation, useHistory } from '../routes';
+
+export default function useSyncCanvasModeWithURL() {
+	const history = useHistory();
+	const { params } = useLocation();
+	const canvasMode = useSelect(
+		( select ) => select( editSiteStore ).__unstableGetCanvasMode(),
+		[]
+	);
+	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const currentCanvasMode = useRef( canvasMode );
+	const { canvas: canvasInUrl = 'view' } = params;
+	const currentCanvasInUrl = useRef( canvasInUrl );
+	useEffect( () => {
+		currentCanvasMode.current = canvasMode;
+		if ( currentCanvasMode !== currentCanvasInUrl ) {
+			history.push( {
+				...params,
+				canvas: canvasMode,
+			} );
+		}
+	}, [ canvasMode ] );
+
+	useEffect( () => {
+		currentCanvasInUrl.current = canvasInUrl;
+		if ( canvasInUrl !== currentCanvasMode.current ) {
+			__unstableSetCanvasMode( canvasInUrl );
+		}
+	}, [ canvasInUrl ] );
+}

package/src/components/template-details/edit-template-title.js

@@ -17,6 +17,7 @@ export default function EditTemplateTitle( { template } ) {
 
 	return (
 		<TextControl
+			__nextHasNoMarginBottom
 			label={ __( 'Title' ) }
 			value={ forceEmpty ? '' : title }
 			help={

package/src/components/template-details/template-part-area-selector.js

@@ -28,6 +28,7 @@ export default function TemplatePartAreaSelector( { id } ) {
 
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
 			label={ __( 'Area' ) }
 			labelPosition="top"
 			options={ areaOptions }

package/src/components/template-part-converter/convert-to-template-part.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { kebabCase } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -24,12 +19,18 @@ import { symbolFilled } from '@wordpress/icons';
  */
 import CreateTemplatePartModal from '../create-template-part-modal';
 import { store as editSiteStore } from '../../store';
+import {
+	useExistingTemplateParts,
+	getUniqueTemplatePartTitle,
+	getCleanTemplatePartSlug,
+} from '../../utils/template-part-create';
 
 export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
+	const existingTemplateParts = useExistingTemplateParts();
 
 	const { canCreate } = useSelect( ( select ) => {
 		const { supportsTemplatePartsMode } =
@@ -44,17 +45,18 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	}
 
 	const onConvert = async ( { title, area } ) => {
-		// Currently template parts only allow latin chars.
-		// Fallback slug will receive suffix by default.
-		const cleanSlug =
-			kebabCase( title ).replace( /[^\w-]+/g, '' ) || 'wp-custom-part';
+		const uniqueTitle = getUniqueTemplatePartTitle(
+			title,
+			existingTemplateParts
+		);
+		const cleanSlug = getCleanTemplatePartSlug( uniqueTitle );
 
 		const templatePart = await saveEntityRecord(
 			'postType',
 			'wp_template_part',
 			{
 				slug: cleanSlug,
-				title,
+				title: uniqueTitle,
 				content: serialize( blocks ),
 				area,
 			}

package/src/experiments.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+		'@wordpress/edit-site'
+	);

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

@@ -11,6 +11,7 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 import {
 	InspectorAdvancedControls,
 	store as blockEditorStore,
+	experiments as blockEditorExperiments,
 } from '@wordpress/block-editor';
 import { BaseControl, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
@@ -26,11 +27,68 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import { getSupportedGlobalStylesPanels } from '../../components/global-styles/hooks';
-import { GlobalStylesContext } from '../../components/global-styles/context';
-import {
-	STYLE_PATH_TO_CSS_VAR_INFIX,
-	STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE,
-} from '../../components/global-styles/utils';
+import { unlock } from '../../experiments';
+
+const { GlobalStylesContext } = unlock( blockEditorExperiments );
+
+// TODO: Temporary duplication of constant in @wordpress/block-editor. Can be
+// removed by moving PushChangesToGlobalStylesControl to
+// @wordpress/block-editor.
+const STYLE_PATH_TO_CSS_VAR_INFIX = {
+	'color.background': 'color',
+	'color.text': 'color',
+	'elements.link.color.text': 'color',
+	'elements.link.:hover.color.text': 'color',
+	'elements.link.typography.fontFamily': 'font-family',
+	'elements.link.typography.fontSize': 'font-size',
+	'elements.button.color.text': 'color',
+	'elements.button.color.background': 'color',
+	'elements.button.typography.fontFamily': 'font-family',
+	'elements.button.typography.fontSize': 'font-size',
+	'elements.heading.color': 'color',
+	'elements.heading.color.background': 'color',
+	'elements.heading.typography.fontFamily': 'font-family',
+	'elements.heading.gradient': 'gradient',
+	'elements.heading.color.gradient': 'gradient',
+	'elements.h1.color': 'color',
+	'elements.h1.color.background': 'color',
+	'elements.h1.typography.fontFamily': 'font-family',
+	'elements.h1.color.gradient': 'gradient',
+	'elements.h2.color': 'color',
+	'elements.h2.color.background': 'color',
+	'elements.h2.typography.fontFamily': 'font-family',
+	'elements.h2.color.gradient': 'gradient',
+	'elements.h3.color': 'color',
+	'elements.h3.color.background': 'color',
+	'elements.h3.typography.fontFamily': 'font-family',
+	'elements.h3.color.gradient': 'gradient',
+	'elements.h4.color': 'color',
+	'elements.h4.color.background': 'color',
+	'elements.h4.typography.fontFamily': 'font-family',
+	'elements.h4.color.gradient': 'gradient',
+	'elements.h5.color': 'color',
+	'elements.h5.color.background': 'color',
+	'elements.h5.typography.fontFamily': 'font-family',
+	'elements.h5.color.gradient': 'gradient',
+	'elements.h6.color': 'color',
+	'elements.h6.color.background': 'color',
+	'elements.h6.typography.fontFamily': 'font-family',
+	'elements.h6.color.gradient': 'gradient',
+	'color.gradient': 'gradient',
+	'typography.fontSize': 'font-size',
+	'typography.fontFamily': 'font-family',
+};
+
+// TODO: Temporary duplication of constant in @wordpress/block-editor. Can be
+// removed by moving PushChangesToGlobalStylesControl to
+// @wordpress/block-editor.
+const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
+	'color.background': 'backgroundColor',
+	'color.text': 'textColor',
+	'color.gradient': 'gradient',
+	'typography.fontSize': 'fontSize',
+	'typography.fontFamily': 'fontFamily',
+};
 
 function getChangesToPush( name, attributes ) {
 	return getSupportedGlobalStylesPanels( name ).flatMap( ( key ) => {
@@ -97,7 +155,7 @@ function PushChangesToGlobalStylesControl( {
 		createSuccessNotice(
 			sprintf(
 				// translators: %s: Title of the block e.g. 'Heading'.
-				__( 'Pushed styles to all %s blocks.' ),
+				__( '%s styles applied.' ),
 				getBlockType( name ).title
 			),
 			{
@@ -124,7 +182,7 @@ function PushChangesToGlobalStylesControl( {
 			help={ sprintf(
 				// translators: %s: Title of the block e.g. 'Heading'.
 				__(
-					'Move this block’s typography, spacing, dimensions, and color styles to all %s blocks.'
+					'Apply this block’s typography, spacing, dimensions, and color styles to all %s blocks.'
 				),
 				getBlockType( name ).title
 			) }
@@ -137,7 +195,7 @@ function PushChangesToGlobalStylesControl( {
 				disabled={ changes.length === 0 }
 				onClick={ pushChanges }
 			>
-				{ __( 'Push changes to Global Styles' ) }
+				{ __( 'Apply globally' ) }
 			</Button>
 		</BaseControl>
 	);