@wordpress/edit-site 5.2.0 → 5.3.1

package/src/components/sidebar-edit-mode/global-styles-sidebar.js

@@ -1,34 +1,28 @@
 /**
  * WordPress dependencies
  */
-import {
-	DropdownMenu,
-	FlexItem,
-	FlexBlock,
-	Flex,
-	Button,
-} from '@wordpress/components';
+import { FlexItem, FlexBlock, Flex, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { styles, moreVertical, seen } from '@wordpress/icons';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { store as preferencesStore } from '@wordpress/preferences';
+import { styles, seen } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+
 import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import DefaultSidebar from './default-sidebar';
-import { GlobalStylesUI, useGlobalStylesReset } from '../global-styles';
+import { GlobalStylesUI } from '../global-styles';
 import { store as editSiteStore } from '../../store';
+import { GlobalStylesMenuSlot } from '../global-styles/ui';
 
 export default function GlobalStylesSidebar() {
-	const [ canReset, onReset ] = useGlobalStylesReset();
-	const { toggle } = useDispatch( preferencesStore );
 	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( false );
 	const editorMode = useSelect(
 		( select ) => select( editSiteStore ).getEditorMode(),
 		[]
 	);
+
 	useEffect( () => {
 		if ( editorMode !== 'visual' ) {
 			setIsStyleBookOpened( false );
@@ -63,25 +57,7 @@ export default function GlobalStylesSidebar() {
 						/>
 					</FlexItem>
 					<FlexItem>
-						<DropdownMenu
-							icon={ moreVertical }
-							label={ __( 'More Styles actions' ) }
-							controls={ [
-								{
-									title: __( 'Reset to defaults' ),
-									onClick: onReset,
-									isDisabled: ! canReset,
-								},
-								{
-									title: __( 'Welcome Guide' ),
-									onClick: () =>
-										toggle(
-											'core/edit-site',
-											'welcomeGuideStyles'
-										),
-								},
-							] }
-						/>
+						<GlobalStylesMenuSlot />
 					</FlexItem>
 				</Flex>
 			}

package/src/components/sidebar-edit-mode/index.js

@@ -14,7 +14,6 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  */
 import DefaultSidebar from './default-sidebar';
 import GlobalStylesSidebar from './global-styles-sidebar';
-import NavigationMenuSidebar from './navigation-menu-sidebar';
 import { STORE_NAME } from '../../store/constants';
 import SettingsHeader from './settings-header';
 import TemplateCard from './template-card';
@@ -64,15 +63,6 @@ export function SidebarComplementaryAreaFills() {
 		sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;
 	}
 
-	// Conditionally include NavMenu sidebar in Plugin only.
-	// Optimise for dead code elimination.
-	// See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination.
-	let MaybeNavigationMenuSidebar = Fragment;
-
-	if ( window?.__experimentalEnableOffCanvasNavigationEditor === true ) {
-		MaybeNavigationMenuSidebar = NavigationMenuSidebar;
-	}
-
 	return (
 		<>
 			<DefaultSidebar
@@ -93,7 +83,6 @@ export function SidebarComplementaryAreaFills() {
 				) }
 			</DefaultSidebar>
 			{ supportsGlobalStyles && <GlobalStylesSidebar /> }
-			<MaybeNavigationMenuSidebar />
 		</>
 	);
 }

package/src/components/sidebar-edit-mode/settings-header/style.scss

@@ -42,6 +42,7 @@
 	&:focus:not(:disabled) {
 		position: relative;
 		box-shadow: none;
+		outline: none;
 	}
 
 	// Tab indicator
@@ -66,6 +67,10 @@
 	// Active.
 	&.is-active::after {
 		height: calc(1 * var(--wp-admin-border-width-focus));
+
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
+		outline-offset: -1px;
 	}
 
 	// Focus.
@@ -89,5 +94,8 @@
 
 	&:focus-visible::before {
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
 	}
 }

package/src/components/sidebar-navigation-item/style.scss

@@ -3,15 +3,40 @@
 	border-width: $border-width-tab;
 
 	&:hover,
-	&:focus {
+	&:focus,
+	&[aria-current] {
 		color: $white;
 		background: $gray-800;
 		border-width: $border-width-tab;
 	}
 
 	&[aria-current] {
-		color: $white;
 		background: var(--wp-admin-theme-color);
-		border-width: $border-width-tab;
 	}
 }
+
+.edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .components-button {
+	color: $gray-600;
+	&:hover,
+	&:focus,
+	&[aria-current] {
+		color: $white;
+	}
+}
+
+.edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .offcanvas-editor-list-view-leaf {
+	&:hover,
+	&:focus,
+	&[aria-current] {
+		background: $gray-800;
+	}
+	.block-editor-list-view-block__menu {
+		margin-left: -$grid-unit-10;
+	}
+}
+
+.edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
+	cursor: grab;
+	width: calc(100% - #{ $border-width-focus });
+	padding: $grid-unit-10;
+}

package/src/components/sidebar-navigation-screen/index.js

@@ -14,6 +14,7 @@ export default function SidebarNavigationScreen( {
 	path,
 	parentTitle,
 	title,
+	actions,
 	content,
 } ) {
 	return (
@@ -40,10 +41,10 @@ export default function SidebarNavigationScreen( {
 					) : (
 						<div className="edit-site-sidebar-navigation-screen__icon-placeholder" />
 					) }
-
-					<div className="edit-site-sidebar-navigation-screen__title">
+					<h2 className="edit-site-sidebar-navigation-screen__title">
 						{ title }
-					</div>
+					</h2>
+					{ actions }
 				</HStack>
 
 				<nav className="edit-site-sidebar-navigation-screen__content">

package/src/components/sidebar-navigation-screen/style.scss

@@ -24,6 +24,8 @@
 	font-size: calc(1.56 * 13px);
 	font-weight: 500;
 	flex-grow: 1;
+	color: $white;
+	margin: 0;
 }
 
 .edit-site-sidebar-navigation-screen__back {

package/src/components/sidebar-navigation-screen-main/index.js

@@ -6,7 +6,9 @@ import {
 	__experimentalNavigatorButton as NavigatorButton,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { layout, symbolFilled } from '@wordpress/icons';
+import { layout, symbolFilled, navigation } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -15,12 +17,32 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 
 export default function SidebarNavigationScreenMain() {
+	const { navigationMenus } = useSelect( ( select ) => {
+		const { getEntityRecords } = select( coreStore );
+		return {
+			navigationMenus: getEntityRecords( 'postType', 'wp_navigation', {
+				per_page: -1,
+				status: 'publish',
+			} ),
+		};
+	} );
+
 	return (
 		<SidebarNavigationScreen
 			path="/"
 			title={ __( 'Design' ) }
 			content={
 				<ItemGroup>
+					{ !! navigationMenus && navigationMenus.length > 0 && (
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/navigation"
+							withChevron
+							icon={ navigation }
+						>
+							{ __( 'Navigation' ) }
+						</NavigatorButton>
+					) }
 					<NavigatorButton
 						as={ SidebarNavigationItem }
 						path="/templates"

package/src/components/sidebar-navigation-screen-navigation-menus/index.js

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import NavigationInspector from '../navigation-inspector';
+import { useHistory } from '../routes';
+
+export default function SidebarNavigationScreenNavigationMenus() {
+	const history = useHistory();
+	const onSelect = useCallback(
+		( selectedBlock ) => {
+			const { attributes } = selectedBlock;
+			if (
+				attributes.kind === 'post-type' &&
+				attributes.id &&
+				attributes.type &&
+				history
+			) {
+				history.push( {
+					postType: attributes.type,
+					postId: attributes.id,
+				} );
+			}
+		},
+		[ history ]
+	);
+	return (
+		<SidebarNavigationScreen
+			path="/navigation"
+			parentTitle={ __( 'Design' ) }
+			title={ __( 'Navigation' ) }
+			content={
+				<div className="edit-site-sidebar-navigation-screen-navigation-menus">
+					<NavigationInspector onSelect={ onSelect } />
+				</div>
+			}
+		/>
+	);
+}

package/src/components/sidebar-navigation-screen-navigation-menus/style.scss

@@ -0,0 +1,12 @@
+.edit-site-sidebar-navigation-screen-navigation-menus {
+	.block-editor-list-view-block__menu-edit,
+	.edit-site-navigation-inspector__select-menu {
+		display: none;
+	}
+	.offcanvas-editor-list-view-leaf {
+		max-width: calc(100% - #{ $grid-unit-05 });
+	}
+	.block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
+		width: 100%;
+	}
+}

package/src/components/sidebar-navigation-screen-templates/index.js

@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useEntityRecords } from '@wordpress/core-data';
@@ -119,21 +116,17 @@ export default function SidebarNavigationScreenTemplates( {
 		<SidebarNavigationScreen
 			path={ config[ postType ].path }
 			parentTitle={ __( 'Design' ) }
-			title={
-				<HStack justify="space-between">
-					<div style={ { flexShrink: 0 } }>
-						{ config[ postType ].labels.title }
-					</div>
-					{ ! isMobileViewport && (
-						<AddNewTemplate
-							templateType={ postType }
-							toggleProps={ {
-								className:
-									'edit-site-sidebar-navigation-screen-templates__add-button',
-							} }
-						/>
-					) }
-				</HStack>
+			title={ config[ postType ].labels.title }
+			actions={
+				! isMobileViewport && (
+					<AddNewTemplate
+						templateType={ postType }
+						toggleProps={ {
+							className:
+								'edit-site-sidebar-navigation-screen-templates__add-button',
+						} }
+					/>
+				)
 			}
 			content={
 				<>

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

@@ -27,6 +27,7 @@ import { useLocation } from '../routes';
 import getIsListPage from '../../utils/get-is-list-page';
 import SiteIcon from '../site-icon';
 import useEditedEntityRecord from '../use-edited-entity-record';
+import { unlock } from '../../experiments';
 
 const HUB_ANIMATION_DURATION = 0.3;
 
@@ -38,13 +39,10 @@ const SiteHub = forwardRef(
 		const { canvasMode, dashboardLink, entityConfig } = useSelect(
 			( select ) => {
 				select( editSiteStore ).getEditedPostType();
-				const {
-					__unstableGetCanvasMode,
-					getSettings,
-					getEditedPostType,
-				} = select( editSiteStore );
+				const { getCanvasMode, getSettings, getEditedPostType } =
+					unlock( select( editSiteStore ) );
 				return {
-					canvasMode: __unstableGetCanvasMode(),
+					canvasMode: getCanvasMode(),
 					dashboardLink: getSettings().__experimentalDashboardLink,
 					entityConfig: select( coreStore ).getEntityConfig(
 						'postType',
@@ -56,7 +54,7 @@ const SiteHub = forwardRef(
 		);
 		const disableMotion = useReducedMotion();
 		const isMobileViewport = useViewportMatch( 'medium', '<' );
-		const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+		const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 		const { clearSelectedBlock } = useDispatch( blockEditorStore );
 		const showEditButton =
 			( isEditorPage && canvasMode === 'view' && ! isMobileViewport ) ||
@@ -77,7 +75,7 @@ const SiteHub = forwardRef(
 					onClick: () => {
 						clearSelectedBlock();
 						setIsMobileCanvasVisible( false );
-						__unstableSetCanvasMode( 'view' );
+						setCanvasMode( 'view' );
 					},
 			  };
 		const { getTitle } = useEditedEntityRecord();
@@ -100,6 +98,7 @@ const SiteHub = forwardRef(
 				<HStack
 					justify="flex-start"
 					className="edit-site-site-hub__text-content"
+					spacing="0"
 				>
 					<motion.div
 						className="edit-site-site-hub__view-mode-toggle-container"
@@ -135,9 +134,8 @@ const SiteHub = forwardRef(
 				{ showEditButton && (
 					<Button
 						className="edit-site-site-hub__edit-button"
-						label={ __( 'Open the editor' ) }
 						onClick={ () => {
-							__unstableSetCanvasMode( 'edit' );
+							setCanvasMode( 'edit' );
 						} }
 						variant="primary"
 					>

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

@@ -9,15 +9,16 @@ import { useSelect, useDispatch } from '@wordpress/data';
  */
 import { store as editSiteStore } from '../../store';
 import { useLocation, useHistory } from '../routes';
+import { unlock } from '../../experiments';
 
 export default function useSyncCanvasModeWithURL() {
 	const history = useHistory();
 	const { params } = useLocation();
 	const canvasMode = useSelect(
-		( select ) => select( editSiteStore ).__unstableGetCanvasMode(),
+		( select ) => unlock( select( editSiteStore ) ).getCanvasMode(),
 		[]
 	);
-	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const currentCanvasMode = useRef( canvasMode );
 	const { canvas: canvasInUrl = 'view' } = params;
 	const currentCanvasInUrl = useRef( canvasInUrl );
@@ -34,7 +35,7 @@ export default function useSyncCanvasModeWithURL() {
 	useEffect( () => {
 		currentCanvasInUrl.current = canvasInUrl;
 		if ( canvasInUrl !== currentCanvasMode.current ) {
-			__unstableSetCanvasMode( canvasInUrl );
+			setCanvasMode( canvasInUrl );
 		}
 	}, [ canvasInUrl ] );
 }

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 ) => {