@wordpress/edit-site 5.4.0 → 5.5.0

package/build-style/style.css

@@ -413,15 +413,18 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
-  top: 46px;
+  top: auto;
   bottom: 0;
 }
+.is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
+  top: 46px;
+}
 @media (min-width: 782px) {
-  .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
+  .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
     border-left: 1px solid #ddd;
     top: 32px;
   }
-  .is-fullscreen-mode .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .interface-interface-skeleton__actions:focus-within {
+  .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
     top: 0;
   }
 }
@@ -615,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;
@@ -668,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) {
@@ -716,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.
@@ -1531,7 +1529,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;
@@ -1542,17 +1539,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;
@@ -1580,6 +1566,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;
@@ -1698,6 +1689,14 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin: 0;
 }
 
+.show-icon-labels .edit-site-global-styles-sidebar__header .components-button.has-icon svg {
+  display: none;
+}
+.show-icon-labels .edit-site-global-styles-sidebar__header .components-button.has-icon::after {
+  content: attr(aria-label);
+  font-size: 12px;
+}
+
 .components-panel__header.edit-site-sidebar-edit-mode__panel-tabs {
   justify-content: flex-start;
   padding-left: 0;
@@ -1855,10 +1854,6 @@ h3.edit-site-template-card__template-areas-title {
   display: flex;
   justify-content: center;
 }
-.edit-site-layout__actions:focus .edit-site-editor__toggle-save-panel, .edit-site-layout__actions:focus-within .edit-site-editor__toggle-save-panel {
-  top: auto;
-  bottom: 0;
-}
 
 .edit-site .components-editor-notices__snackbar {
   position: fixed;
@@ -2396,9 +2391,12 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   background: #fff;
 }
 .edit-site-layout__actions:focus, .edit-site-layout__actions:focus-within {
-  top: 0;
+  top: auto;
   bottom: 0;
 }
+.edit-site-layout__actions.is-entity-save-view-open:focus, .edit-site-layout__actions.is-entity-save-view-open:focus-within {
+  top: 0;
+}
 @media (min-width: 782px) {
   .edit-site-layout__actions {
     border-left: 1px solid #ddd;
@@ -2453,6 +2451,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;
@@ -2511,29 +2525,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: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.4.0",
+	"version": "5.5.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,35 +27,35 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.27.0",
-		"@wordpress/api-fetch": "^6.24.0",
-		"@wordpress/block-editor": "^11.4.0",
-		"@wordpress/block-library": "^8.4.0",
-		"@wordpress/blocks": "^12.4.0",
-		"@wordpress/components": "^23.4.0",
-		"@wordpress/compose": "^6.4.0",
-		"@wordpress/core-data": "^6.4.0",
-		"@wordpress/data": "^8.4.0",
-		"@wordpress/deprecated": "^3.27.0",
-		"@wordpress/editor": "^13.4.0",
-		"@wordpress/element": "^5.4.0",
-		"@wordpress/hooks": "^3.27.0",
-		"@wordpress/html-entities": "^3.27.0",
-		"@wordpress/i18n": "^4.27.0",
-		"@wordpress/icons": "^9.18.0",
-		"@wordpress/interface": "^5.4.0",
-		"@wordpress/keyboard-shortcuts": "^4.4.0",
-		"@wordpress/keycodes": "^3.27.0",
-		"@wordpress/media-utils": "^4.18.0",
-		"@wordpress/notices": "^3.27.0",
-		"@wordpress/plugins": "^5.4.0",
-		"@wordpress/preferences": "^3.4.0",
-		"@wordpress/private-apis": "^0.9.0",
-		"@wordpress/reusable-blocks": "^4.4.0",
-		"@wordpress/style-engine": "^1.10.0",
-		"@wordpress/url": "^3.28.0",
-		"@wordpress/viewport": "^5.4.0",
-		"@wordpress/widgets": "^3.4.0",
+		"@wordpress/a11y": "^3.28.0",
+		"@wordpress/api-fetch": "^6.25.0",
+		"@wordpress/block-editor": "^11.5.0",
+		"@wordpress/block-library": "^8.5.0",
+		"@wordpress/blocks": "^12.5.0",
+		"@wordpress/components": "^23.5.0",
+		"@wordpress/compose": "^6.5.0",
+		"@wordpress/core-data": "^6.5.0",
+		"@wordpress/data": "^8.5.0",
+		"@wordpress/deprecated": "^3.28.0",
+		"@wordpress/editor": "^13.5.0",
+		"@wordpress/element": "^5.5.0",
+		"@wordpress/hooks": "^3.28.0",
+		"@wordpress/html-entities": "^3.28.0",
+		"@wordpress/i18n": "^4.28.0",
+		"@wordpress/icons": "^9.19.0",
+		"@wordpress/interface": "^5.5.0",
+		"@wordpress/keyboard-shortcuts": "^4.5.0",
+		"@wordpress/keycodes": "^3.28.0",
+		"@wordpress/media-utils": "^4.19.0",
+		"@wordpress/notices": "^3.28.0",
+		"@wordpress/plugins": "^5.5.0",
+		"@wordpress/preferences": "^3.5.0",
+		"@wordpress/private-apis": "^0.10.0",
+		"@wordpress/reusable-blocks": "^4.5.0",
+		"@wordpress/style-engine": "^1.11.0",
+		"@wordpress/url": "^3.29.0",
+		"@wordpress/viewport": "^5.5.0",
+		"@wordpress/widgets": "^3.5.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
 		"downloadjs": "^1.4.7",
@@ -73,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c25ff895413bad4354c55c0c2d732552618b0d56"
+	"gitHead": "d5e03a74b79e3ca84afda24375474a103a063ee4"
 }

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

@@ -67,12 +67,9 @@ export default function NewTemplatePart( {
 			setCanvasMode( 'edit' );
 
 			// Navigate to the created template part editor.
-			window.queueMicrotask( () => {
-				history.push( {
-					postId: templatePart.id,
-					postType: 'wp_template_part',
-					path: '/template-parts/single',
-				} );
+			history.push( {
+				postId: templatePart.id,
+				postType: 'wp_template_part',
 			} );
 
 			// TODO: Add a success notice?
@@ -89,11 +86,12 @@ export default function NewTemplatePart( {
 			setIsModalOpen( false );
 		}
 	}
+	const { as: Toggle = Button, ...restToggleProps } = toggleProps ?? {};
 
 	return (
 		<>
-			<Button
-				{ ...toggleProps }
+			<Toggle
+				{ ...restToggleProps }
 				onClick={ () => {
 					setIsModalOpen( true );
 				} }
@@ -101,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/new-template.js

@@ -128,12 +128,9 @@ export default function NewTemplate( {
 			setCanvasMode( 'edit' );
 
 			// Navigate to the created template editor.
-			window.queueMicrotask( () => {
-				history.push( {
-					postId: newTemplate.id,
-					postType: newTemplate.type,
-					path: '/templates/single',
-				} );
+			history.push( {
+				postId: newTemplate.id,
+				postType: newTemplate.type,
 			} );
 
 			createSuccessNotice(

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';
@@ -151,7 +151,6 @@ export default function Editor() {
 	return (
 		<>
 			{ isEditMode && <WelcomeGuide /> }
-			<KeyboardShortcuts.Register />
 			<EntityProvider kind="root" type="site">
 				<EntityProvider
 					kind="postType"
@@ -188,7 +187,9 @@ export default function Editor() {
 												) }
 											</Notice>
 										) }
-										{ isEditMode && <KeyboardShortcuts /> }
+										{ isEditMode && (
+											<KeyboardShortcutsEditMode />
+										) }
 									</>
 								}
 								secondarySidebar={

package/src/components/editor/style.scss

@@ -6,12 +6,6 @@
 	padding: $grid-unit-30;
 	display: flex;
 	justify-content: center;
-
-	.edit-site-layout__actions:focus &,
-	.edit-site-layout__actions:focus-within & {
-		top: auto;
-		bottom: 0;
-	}
 }
 
 // Adjust the position of the notices

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

@@ -170,7 +170,7 @@ export default function BorderPanel( { name, variation = '' } ) {
 			// global styles are saved.
 			setBorder( { radius: border?.radius, ...updatedBorder } );
 		},
-		[ setBorder ]
+		[ setBorder, border?.radius ]
 	);
 
 	return (

package/src/components/global-styles/context-menu.js

@@ -12,6 +12,7 @@ import {
 import {
 	typography,
 	border,
+	filter,
 	shadow,
 	color,
 	layout,
@@ -22,40 +23,36 @@ import { isRTL, __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
-import { useHasDimensionsPanel } from './dimensions-panel';
+import { useHasFilterPanel } from './filter-utils';
 import { useHasVariationsPanel } from './variations-panel';
 import { NavigationButtonAsItem } from './navigation-button';
 import { IconWithCurrentColor } from './icon-with-current-color';
 import { ScreenVariations } from './screen-variations';
 import { useHasShadowControl } from './shadow-panel';
 import { unlock } from '../../private-apis';
-import { useSupportedStyles } from './hooks';
 
 const {
+	useHasDimensionsPanel,
 	useHasTypographyPanel,
 	useGlobalSetting,
-	overrideSettingsWithSupports,
+	useSettingsForBlockElement,
 } = unlock( blockEditorPrivateApis );
 
 function ContextMenu( { name, parentMenu = '' } ) {
 	const [ rawSettings ] = useGlobalSetting( '', name );
-	const supports = useSupportedStyles( name );
-	const settings = useMemo(
-		() => overrideSettingsWithSupports( rawSettings, supports ),
-		[ rawSettings, supports ]
-	);
+	const settings = useSettingsForBlockElement( rawSettings, name );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( name );
 	const hasBorderPanel = useHasBorderPanel( name );
 	const hasEffectsPanel = useHasShadowControl( name );
-	const hasDimensionsPanel = useHasDimensionsPanel( name );
+	const hasFilterPanel = useHasFilterPanel( name );
+	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasDimensionsPanel;
 	const hasVariationsPanel = useHasVariationsPanel( name, parentMenu );
 
@@ -117,6 +114,15 @@ function ContextMenu( { name, parentMenu = '' } ) {
 						{ __( 'Shadow' ) }
 					</NavigationButtonAsItem>
 				) }
+				{ hasFilterPanel && (
+					<NavigationButtonAsItem
+						icon={ filter }
+						path={ parentMenu + '/filters' }
+						aria-label={ __( 'Filters styles' ) }
+					>
+						{ __( 'Filters' ) }
+					</NavigationButtonAsItem>
+				) }
 				{ hasLayoutPanel && (
 					<NavigationButtonAsItem
 						icon={ layout }