@wordpress/edit-site 5.3.5 → 5.3.6

package/build-style/style-rtl.css

@@ -618,9 +618,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 
-.edit-site-custom-template-modal__suggestions_list {
-  margin-top: 16px;
-}
 @media (min-width: 600px) {
   .edit-site-custom-template-modal__suggestions_list {
     height: 232px;
@@ -671,8 +668,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   border: 1px solid #ccc;
   border-radius: 2px;
   padding: 16px;
-  margin-bottom: 0;
-  margin-top: 16px;
 }
 
 @media (min-width: 782px) {
@@ -719,7 +714,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   height: 100%;
   display: block;
   overflow: hidden;
-  background-color: #2f2f2f;
+  background-color: #1e1e1e;
   align-items: center;
   /*
   	Temporary to hide the contextual toolbar in view mode.
@@ -1530,7 +1525,6 @@ body.is-fullscreen-mode .edit-site-list-header {
 .edit-site-list-added-by__icon {
   display: flex;
   flex-shrink: 0;
-  position: relative;
   align-items: center;
   justify-content: center;
   width: 32px;
@@ -1541,17 +1535,6 @@ body.is-fullscreen-mode .edit-site-list-header {
 .edit-site-list-added-by__icon svg {
   fill: #fff;
 }
-.edit-site-list-added-by__icon.is-customized::after {
-  position: absolute;
-  content: "";
-  background: var(--wp-admin-theme-color);
-  height: 8px;
-  width: 8px;
-  outline: 2px solid #fff;
-  border-radius: 100%;
-  top: -1px;
-  left: -1px;
-}
 
 .edit-site-list-added-by__avatar {
   flex-shrink: 0;
@@ -1579,6 +1562,11 @@ body.is-fullscreen-mode .edit-site-list-header {
   opacity: 1;
 }
 
+.edit-site-list-added-by__customized-info {
+  display: block;
+  color: #757575;
+}
+
 @keyframes loadingpulse {
   0% {
     opacity: 1;
@@ -2390,6 +2378,22 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   padding: 0 12px;
 }
 
+.edit-site-sidebar-button {
+  color: #e0e0e0;
+  flex-shrink: 0;
+}
+.edit-site-sidebar-button:focus:not(:disabled) {
+  box-shadow: none;
+  outline: none;
+}
+.edit-site-sidebar-button:focus-visible:not(:disabled) {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  outline: 3px solid transparent;
+}
+.edit-site-sidebar-button:hover, .edit-site-sidebar-button:focus-visible, .edit-site-sidebar-button:focus, .edit-site-sidebar-button:not([aria-disabled=true]):active {
+  color: #fff;
+}
+
 .edit-site-sidebar-navigation-item.components-item {
   color: #949494;
   border-width: 1.5px;
@@ -2448,29 +2452,18 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 
 .edit-site-sidebar-navigation-screen__title {
   font-size: calc(1.56 * 13px);
+  line-height: normal;
   font-weight: 500;
   flex-grow: 1;
   color: #fff;
   margin: 0;
 }
 
-.edit-site-sidebar-navigation-screen__back {
-  color: #e0e0e0;
-}
-.edit-site-sidebar-navigation-screen__back:hover, .edit-site-sidebar-navigation-screen__back:focus, .edit-site-sidebar-navigation-screen__back:not([aria-disabled=true]):active {
-  color: #fff;
-}
-
 .edit-site-sidebar-navigation-screen-templates__see-all {
   /* Overrides the margin that comes from the Item component */
   margin-top: 16px !important;
 }
 
-.edit-site-sidebar-navigation-screen-templates__add-button {
-  /* Overrides the color for all states of the button */
-  color: inherit !important;
-}
-
 .edit-site-site-hub {
   display: flex;
   align-items: center;

package/build-style/style.css

@@ -618,9 +618,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 
-.edit-site-custom-template-modal__suggestions_list {
-  margin-top: 16px;
-}
 @media (min-width: 600px) {
   .edit-site-custom-template-modal__suggestions_list {
     height: 232px;
@@ -671,8 +668,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   border: 1px solid #ccc;
   border-radius: 2px;
   padding: 16px;
-  margin-bottom: 0;
-  margin-top: 16px;
 }
 
 @media (min-width: 782px) {
@@ -719,7 +714,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   height: 100%;
   display: block;
   overflow: hidden;
-  background-color: #2f2f2f;
+  background-color: #1e1e1e;
   align-items: center;
   /*
   	Temporary to hide the contextual toolbar in view mode.
@@ -1530,7 +1525,6 @@ body.is-fullscreen-mode .edit-site-list-header {
 .edit-site-list-added-by__icon {
   display: flex;
   flex-shrink: 0;
-  position: relative;
   align-items: center;
   justify-content: center;
   width: 32px;
@@ -1541,17 +1535,6 @@ body.is-fullscreen-mode .edit-site-list-header {
 .edit-site-list-added-by__icon svg {
   fill: #fff;
 }
-.edit-site-list-added-by__icon.is-customized::after {
-  position: absolute;
-  content: "";
-  background: var(--wp-admin-theme-color);
-  height: 8px;
-  width: 8px;
-  outline: 2px solid #fff;
-  border-radius: 100%;
-  top: -1px;
-  right: -1px;
-}
 
 .edit-site-list-added-by__avatar {
   flex-shrink: 0;
@@ -1579,6 +1562,11 @@ body.is-fullscreen-mode .edit-site-list-header {
   opacity: 1;
 }
 
+.edit-site-list-added-by__customized-info {
+  display: block;
+  color: #757575;
+}
+
 @keyframes loadingpulse {
   0% {
     opacity: 1;
@@ -2390,6 +2378,22 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   padding: 0 12px;
 }
 
+.edit-site-sidebar-button {
+  color: #e0e0e0;
+  flex-shrink: 0;
+}
+.edit-site-sidebar-button:focus:not(:disabled) {
+  box-shadow: none;
+  outline: none;
+}
+.edit-site-sidebar-button:focus-visible:not(:disabled) {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  outline: 3px solid transparent;
+}
+.edit-site-sidebar-button:hover, .edit-site-sidebar-button:focus-visible, .edit-site-sidebar-button:focus, .edit-site-sidebar-button:not([aria-disabled=true]):active {
+  color: #fff;
+}
+
 .edit-site-sidebar-navigation-item.components-item {
   color: #949494;
   border-width: 1.5px;
@@ -2448,29 +2452,18 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 
 .edit-site-sidebar-navigation-screen__title {
   font-size: calc(1.56 * 13px);
+  line-height: normal;
   font-weight: 500;
   flex-grow: 1;
   color: #fff;
   margin: 0;
 }
 
-.edit-site-sidebar-navigation-screen__back {
-  color: #e0e0e0;
-}
-.edit-site-sidebar-navigation-screen__back:hover, .edit-site-sidebar-navigation-screen__back:focus, .edit-site-sidebar-navigation-screen__back:not([aria-disabled=true]):active {
-  color: #fff;
-}
-
 .edit-site-sidebar-navigation-screen-templates__see-all {
   /* Overrides the margin that comes from the Item component */
   margin-top: 16px !important;
 }
 
-.edit-site-sidebar-navigation-screen-templates__add-button {
-  /* Overrides the color for all states of the button */
-  color: inherit !important;
-}
-
 .edit-site-site-hub {
   display: flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.3.5",
+	"version": "5.3.6",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,33 +29,33 @@
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/a11y": "^3.26.1",
 		"@wordpress/api-fetch": "^6.23.1",
-		"@wordpress/block-editor": "^11.3.5",
-		"@wordpress/block-library": "^8.3.5",
+		"@wordpress/block-editor": "^11.3.6",
+		"@wordpress/block-library": "^8.3.6",
 		"@wordpress/blocks": "^12.3.3",
-		"@wordpress/components": "^23.3.4",
+		"@wordpress/components": "^23.3.5",
 		"@wordpress/compose": "^6.3.3",
 		"@wordpress/core-data": "^6.3.3",
 		"@wordpress/data": "^8.3.3",
 		"@wordpress/deprecated": "^3.26.1",
-		"@wordpress/editor": "^13.3.5",
+		"@wordpress/editor": "^13.3.6",
 		"@wordpress/element": "^5.3.2",
 		"@wordpress/hooks": "^3.26.1",
 		"@wordpress/html-entities": "^3.26.1",
 		"@wordpress/i18n": "^4.26.1",
 		"@wordpress/icons": "^9.17.2",
-		"@wordpress/interface": "^5.3.5",
+		"@wordpress/interface": "^5.3.6",
 		"@wordpress/keyboard-shortcuts": "^4.3.3",
 		"@wordpress/keycodes": "^3.26.2",
 		"@wordpress/media-utils": "^4.17.2",
 		"@wordpress/notices": "^3.26.3",
 		"@wordpress/plugins": "^5.3.3",
-		"@wordpress/preferences": "^3.3.4",
+		"@wordpress/preferences": "^3.3.5",
 		"@wordpress/private-apis": "^0.8.1",
-		"@wordpress/reusable-blocks": "^4.3.5",
+		"@wordpress/reusable-blocks": "^4.3.6",
 		"@wordpress/style-engine": "^1.9.1",
 		"@wordpress/url": "^3.27.1",
 		"@wordpress/viewport": "^5.3.3",
-		"@wordpress/widgets": "^3.3.5",
+		"@wordpress/widgets": "^3.3.6",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
 		"downloadjs": "^1.4.7",
@@ -73,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1e2b2f680c6378f789d6660bc04b30e35e3a33a3"
+	"gitHead": "35f10c183655e9196d4ea12b8fa499a8ecbb7b6a"
 }

package/src/components/add-new-template/add-custom-template-modal.js

@@ -11,6 +11,7 @@ import {
 	SearchControl,
 	TextHighlight,
 	__experimentalText as Text,
+	__experimentalVStack as VStack,
 	__unstableComposite as Composite,
 	__unstableUseCompositeState as useCompositeState,
 	__unstableCompositeItem as CompositeItem,
@@ -158,9 +159,12 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 				</Composite>
 			) }
 			{ debouncedSearch && ! suggestions?.length && (
-				<p className="edit-site-custom-template-modal__no-results">
+				<Text
+					as="p"
+					className="edit-site-custom-template-modal__no-results"
+				>
 					{ labels.not_found }
-				</p>
+				</Text>
 			) }
 		</>
 	);
@@ -188,12 +192,12 @@ function AddCustomTemplateModal( {
 		>
 			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
 			{ ! showSearchEntities && (
-				<>
-					<p>
+				<VStack spacing={ 4 }>
+					<Text as="p">
 						{ __(
 							'Select whether to create a single template for all items or a specific one.'
 						) }
-					</p>
+					</Text>
 					<Flex
 						className={ `${ baseCssClass }__contents` }
 						gap="4"
@@ -245,20 +249,20 @@ function AddCustomTemplateModal( {
 							</Text>
 						</FlexItem>
 					</Flex>
-				</>
+				</VStack>
 			) }
 			{ showSearchEntities && (
-				<>
-					<p>
+				<VStack spacing={ 4 }>
+					<Text as="p">
 						{ __(
 							'This template will be used only for the specific item chosen.'
 						) }
-					</p>
+					</Text>
 					<SuggestionList
 						entityForSuggestions={ entityForSuggestions }
 						onSelect={ onSelect }
 					/>
-				</>
+				</VStack>
 			) }
 		</Modal>
 	);

package/src/components/add-new-template/new-template-part.js

@@ -86,11 +86,12 @@ export default function NewTemplatePart( {
 			setIsModalOpen( false );
 		}
 	}
+	const { as: Toggle = Button, ...restToggleProps } = toggleProps ?? {};
 
 	return (
 		<>
-			<Button
-				{ ...toggleProps }
+			<Toggle
+				{ ...restToggleProps }
 				onClick={ () => {
 					setIsModalOpen( true );
 				} }
@@ -98,7 +99,7 @@ export default function NewTemplatePart( {
 				label={ postType.labels.add_new }
 			>
 				{ showIcon ? null : postType.labels.add_new }
-			</Button>
+			</Toggle>
 			{ isModalOpen && (
 				<CreateTemplatePartModal
 					closeModal={ () => setIsModalOpen( false ) }

package/src/components/add-new-template/style.scss

@@ -69,8 +69,6 @@
 }
 
 .edit-site-custom-template-modal__suggestions_list {
-	margin-top: $grid-unit-20;
-
 	@include break-small() {
 		height: 232px;
 		overflow: scroll;
@@ -130,11 +128,8 @@
 	border: 1px solid $gray-400;
 	border-radius: $radius-block-ui;
 	padding: $grid-unit-20;
-	margin-bottom: 0;
-	margin-top: $grid-unit-20;
 }
 
-
 .edit-site-custom-generic-template__modal {
 	.components-base-control {
 		@include break-medium() {

package/src/components/block-editor/style.scss

@@ -17,7 +17,7 @@
 	height: 100%;
 	display: block;
 	overflow: hidden;
-	background-color: $gray-800;
+	background-color: $gray-900;
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
 

package/src/components/editor/index.js

@@ -25,7 +25,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { SidebarComplementaryAreaFills } from '../sidebar-edit-mode';
 import BlockEditor from '../block-editor';
 import CodeEditor from '../code-editor';
-import KeyboardShortcuts from '../keyboard-shortcuts';
+import KeyboardShortcutsEditMode from '../keyboard-shortcuts/edit-mode';
 import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
 import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
 import WelcomeGuide from '../welcome-guide';
@@ -150,7 +150,6 @@ export default function Editor() {
 	return (
 		<>
 			{ isEditMode && <WelcomeGuide /> }
-			<KeyboardShortcuts.Register />
 			<EntityProvider kind="root" type="site">
 				<EntityProvider
 					kind="postType"
@@ -186,7 +185,9 @@ export default function Editor() {
 												) }
 											</Notice>
 										) }
-										{ isEditMode && <KeyboardShortcuts /> }
+										{ isEditMode && (
+											<KeyboardShortcutsEditMode />
+										) }
 									</>
 								}
 								secondarySidebar={

package/src/components/global-styles/screen-variations.js

@@ -24,7 +24,6 @@ export function ScreenVariations( { name, path = '' } ) {
 	return (
 		<div className="edit-site-global-styles-screen-variations">
 			<VStack spacing={ 3 }>
-				<p>Manage style variations, saved block appearence presets.</p>
 				<Subtitle>{ __( 'Style Variations' ) }</Subtitle>
 				<VariationsPanel name={ name } />
 			</VStack>

package/src/components/global-styles/shadow-panel.js

@@ -143,9 +143,9 @@ function ShadowPopoverContainer( { shadow, onShadowChange } ) {
 function ShadowPresets( { presets, activeShadow, onSelect } ) {
 	return ! presets ? null : (
 		<Grid columns={ 6 } gap={ 0 } align="center" justify="center">
-			{ presets.map( ( { name, shadow }, i ) => (
+			{ presets.map( ( { name, slug, shadow } ) => (
 				<ShadowIndicator
-					key={ i }
+					key={ slug }
 					label={ name }
 					isActive={ shadow === activeShadow }
 					onSelect={ () =>
@@ -164,8 +164,9 @@ function ShadowIndicator( { label, isActive, onSelect, shadow } ) {
 			<Button
 				className="edit-site-global-styles__shadow-indicator"
 				onClick={ onSelect }
-				aria-label={ label }
+				label={ label }
 				style={ { boxShadow: shadow } }
+				showTooltip
 			>
 				{ isActive && <Icon icon={ check } /> }
 			</Button>

package/src/components/keyboard-shortcuts/edit-mode.js

@@ -0,0 +1,116 @@
+/**
+ * WordPress dependencies
+ */
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as interfaceStore } from '@wordpress/interface';
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
+import { STORE_NAME } from '../../store/constants';
+
+function KeyboardShortcutsEditMode() {
+	const { getEditorMode } = useSelect( editSiteStore );
+	const isListViewOpen = useSelect(
+		( select ) => select( editSiteStore ).isListViewOpened(),
+		[]
+	);
+	const isBlockInspectorOpen = useSelect(
+		( select ) =>
+			select( interfaceStore ).getActiveComplementaryArea(
+				editSiteStore.name
+			) === SIDEBAR_BLOCK,
+		[]
+	);
+	const { redo, undo } = useDispatch( coreStore );
+	const { setIsListViewOpened, switchEditorMode } =
+		useDispatch( editSiteStore );
+	const { enableComplementaryArea, disableComplementaryArea } =
+		useDispatch( interfaceStore );
+
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
+		useSelect( blockEditorStore );
+
+	const handleTextLevelShortcut = ( event, level ) => {
+		event.preventDefault();
+		const destinationBlockName =
+			level === 0 ? 'core/paragraph' : 'core/heading';
+		const currentClientId = getSelectedBlockClientId();
+		if ( currentClientId === null ) {
+			return;
+		}
+		const blockName = getBlockName( currentClientId );
+		if ( blockName !== 'core/paragraph' && blockName !== 'core/heading' ) {
+			return;
+		}
+		const attributes = getBlockAttributes( currentClientId );
+		const textAlign =
+			blockName === 'core/paragraph' ? 'align' : 'textAlign';
+		const destinationTextAlign =
+			destinationBlockName === 'core/paragraph' ? 'align' : 'textAlign';
+
+		replaceBlocks(
+			currentClientId,
+			createBlock( destinationBlockName, {
+				level,
+				content: attributes.content,
+				...{ [ destinationTextAlign ]: attributes[ textAlign ] },
+			} )
+		);
+	};
+
+	useShortcut( 'core/edit-site/undo', ( event ) => {
+		undo();
+		event.preventDefault();
+	} );
+
+	useShortcut( 'core/edit-site/redo', ( event ) => {
+		redo();
+		event.preventDefault();
+	} );
+
+	useShortcut( 'core/edit-site/toggle-list-view', () => {
+		setIsListViewOpened( ! isListViewOpen );
+	} );
+
+	useShortcut( 'core/edit-site/toggle-block-settings-sidebar', ( event ) => {
+		// This shortcut has no known clashes, but use preventDefault to prevent any
+		// obscure shortcuts from triggering.
+		event.preventDefault();
+
+		if ( isBlockInspectorOpen ) {
+			disableComplementaryArea( STORE_NAME );
+		} else {
+			enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
+		}
+	} );
+
+	useShortcut( 'core/edit-site/toggle-mode', () => {
+		switchEditorMode( getEditorMode() === 'visual' ? 'text' : 'visual' );
+	} );
+
+	useShortcut( 'core/edit-site/transform-heading-to-paragraph', ( event ) =>
+		handleTextLevelShortcut( event, 0 )
+	);
+
+	[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
+		//the loop is based off on a constant therefore
+		//the hook will execute the same way every time
+		//eslint-disable-next-line react-hooks/rules-of-hooks
+		useShortcut(
+			`core/edit-site/transform-paragraph-to-heading-${ level }`,
+			( event ) => handleTextLevelShortcut( event, level )
+		);
+	} );
+
+	return null;
+}
+
+export default KeyboardShortcutsEditMode;

package/src/components/keyboard-shortcuts/global.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+function KeyboardShortcutsGlobal() {
+	const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
+		useSelect( coreStore );
+	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
+
+	useShortcut( 'core/edit-site/save', ( event ) => {
+		event.preventDefault();
+
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		const isDirty = !! dirtyEntityRecords.length;
+		const isSaving = dirtyEntityRecords.some( ( record ) =>
+			isSavingEntityRecord( record.kind, record.name, record.key )
+		);
+
+		if ( ! isSaving && isDirty ) {
+			setIsSaveViewOpened( true );
+		}
+	} );
+
+	return null;
+}
+
+export default KeyboardShortcutsGlobal;