@wordpress/edit-site 6.0.0 → 6.1.0

package/build-style/style.css

@@ -459,8 +459,7 @@
   line-height: 16px;
 }
 .dataviews-view-grid .dataviews-view-grid__fields:not(:empty) {
-  padding: 12px 0;
-  padding-top: 0;
+  padding: 0 0 12px;
 }
 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field {
   align-items: flex-start;
@@ -513,6 +512,7 @@
 .dataviews-view-list li .dataviews-view-list__item-actions .components-button {
   opacity: 0;
   position: fixed;
+  right: 0;
 }
 .dataviews-view-list li.is-selected .dataviews-view-list__item-actions, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions {
   padding-right: 32px;
@@ -652,11 +652,6 @@
   margin: 0;
 }
 
-.dataviews-filters__custom-menu-radio-item-prefix {
-  display: block;
-  width: 24px;
-}
-
 .dataviews-bulk-edit-button.components-button {
   flex-shrink: 0;
 }
@@ -928,12 +923,15 @@
 }
 
 .dataviews-bulk-actions {
-  position: absolute;
+  position: sticky;
   display: flex;
   flex-direction: column;
   align-content: center;
   flex-wrap: wrap;
-  width: 100%;
+  width: -moz-fit-content;
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
   bottom: 24px;
   z-index: 2;
 }
@@ -1110,6 +1108,18 @@
   align-items: flex-start;
 }
 
+/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+::view-transition-old(frame),
+::view-transition-new(frame) {
+  animation-duration: 0;
+}
+
+/* stylelint-enable */
+.edit-site-visual-editor__editor-canvas {
+  /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+  view-transition-name: frame;
+  /* stylelint-enable */
+}
 .edit-site-visual-editor__editor-canvas.is-focused {
   outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
   outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
@@ -1171,11 +1181,6 @@
   overflow: hidden;
 }
 
-.edit-site-typography-panel__full-width-control {
-  grid-column: 1/-1;
-  max-width: 100%;
-}
-
 .edit-site-global-styles-screen {
   margin: 12px 16px 16px;
 }
@@ -1230,8 +1235,7 @@
   color: #2f2f2f;
   font-weight: 600;
   line-height: 1.2;
-  padding: 16px;
-  padding-bottom: 0;
+  padding: 16px 16px 0;
   margin: 0;
 }
 
@@ -1505,18 +1509,12 @@
   will-change: opacity;
 }
 .edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination .components-button.is-tertiary {
-  font-size: 28px;
-  font-weight: 200;
   color: #1e1e1e;
-  margin-bottom: 4px;
-  line-height: 1.2;
 }
-.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination .components-button.is-tertiary:disabled {
+.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination .components-button.is-tertiary:disabled,
+.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] {
   color: #949494;
 }
-.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination .components-button.is-tertiary:hover {
-  background: transparent;
-}
 
 .edit-site-global-styles-screen-revisions__footer {
   height: 56px;
@@ -1572,7 +1570,6 @@
   font-weight: 500;
 }
 
-.edit-site-typography-panel,
 .edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings {
   border: 0;
 }
@@ -1647,6 +1644,11 @@
 .edit-site-page-header .edit-site-page-header__page-title {
   min-height: 40px;
 }
+.edit-site-page-header .edit-site-page-header__page-title .components-heading {
+  flex-grow: 1;
+  flex-basis: 0;
+  white-space: nowrap;
+}
 .edit-site-page-header .edit-site-page-header__sub-title {
   margin-bottom: 8px;
 }
@@ -1814,6 +1816,11 @@
 .edit-site-page-patterns-dataviews .edit-site-patterns__section-header .edit-site-patterns__title {
   min-height: 40px;
 }
+.edit-site-page-patterns-dataviews .edit-site-patterns__section-header .edit-site-patterns__title .components-heading {
+  flex-grow: 1;
+  flex-basis: 0;
+  white-space: nowrap;
+}
 .edit-site-page-patterns-dataviews .edit-site-patterns__section-header .edit-site-patterns__sub-title {
   margin-bottom: 8px;
 }
@@ -2012,17 +2019,17 @@
   border-bottom: 1px solid #f0f0f0;
 }
 
-.edit-site-editor__interface-skeleton {
+.edit-site-editor__editor-interface {
   opacity: 1;
   transition: opacity 0.1s ease-out;
 }
 @media (prefers-reduced-motion: reduce) {
-  .edit-site-editor__interface-skeleton {
+  .edit-site-editor__editor-interface {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
-.edit-site-editor__interface-skeleton.is-loading {
+.edit-site-editor__editor-interface.is-loading {
   opacity: 0;
 }
 
@@ -2036,10 +2043,6 @@
   justify-content: center;
 }
 
-.editor-header {
-  padding-left: 60px;
-}
-
 .edit-site-welcome-guide {
   width: 312px;
 }
@@ -2090,38 +2093,8 @@
   display: flex;
   flex-direction: column;
 }
-
-.edit-site-layout__hub {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: calc(100vw - 32px);
-  height: 60px;
-  z-index: 3;
-}
-@media (min-width: 782px) {
-  .edit-site-layout__hub {
-    width: calc(360px - 12px);
-  }
-}
-.edit-site-layout.is-full-canvas .edit-site-layout__hub {
-  padding-right: 0;
-  border-radius: 0;
-  width: 60px;
-  box-shadow: none;
-}
-
-.edit-site-layout__header-container:has(+ .edit-site-layout__content > .edit-site-layout__mobile > .edit-site-page) {
-  margin-bottom: 60px;
-}
-@media (min-width: 782px) {
-  .edit-site-layout__header-container:has(+ .edit-site-layout__content > .edit-site-layout__mobile > .edit-site-page) {
-    margin-bottom: 0;
-  }
-}
-
-.edit-site-layout__header-container {
-  z-index: 4;
+.edit-site-layout:not(.is-full-canvas) .editor-visual-editor {
+  background: #1e1e1e;
 }
 
 .edit-site-layout__content {
@@ -2232,10 +2205,22 @@
   height: 100%;
 }
 
+/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+html.canvas-mode-edit-transition::view-transition-group(toggle) {
+  animation-delay: 255ms;
+}
+
+/* stylelint-enable  */
+.edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
+  display: none;
+}
+
 .edit-site-layout__view-mode-toggle.components-button {
+  /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+  view-transition-name: toggle;
+  /* stylelint-enable  */
   position: relative;
   color: #fff;
-  border-radius: 0;
   height: 60px;
   width: 60px;
   overflow: hidden;
@@ -2243,6 +2228,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  background: #1e1e1e;
+  border-radius: 0;
 }
 .edit-site-layout__view-mode-toggle.components-button:hover, .edit-site-layout__view-mode-toggle.components-button:active {
   color: #fff;
@@ -2273,7 +2260,6 @@
 }
 .edit-site-layout__view-mode-toggle.components-button .edit-site-layout__view-mode-toggle-icon {
   display: flex;
-  border-radius: 2px;
   height: 64px;
   width: 64px;
   justify-content: center;
@@ -2304,27 +2290,6 @@
   }
 }
 
-.edit-site-layout.is-distraction-free .edit-site-layout__header-container {
-  height: 60px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 4;
-  width: 100%;
-}
-.edit-site-layout.is-distraction-free .edit-site-layout__header-container:focus-within {
-  opacity: 1 !important;
-}
-.edit-site-layout.is-distraction-free .edit-site-layout__header-container:focus-within div {
-  transform: translateX(0) translateY(0) translateZ(0) !important;
-}
-.edit-site-layout.is-distraction-free .edit-site-site-hub {
-  position: absolute;
-  top: 0;
-  z-index: 3;
-}
-
 .edit-site-layout__area {
   flex-grow: 1;
   margin: 0;
@@ -2379,7 +2344,7 @@
   overflow-y: auto;
 }
 
-@keyframes slide-from-right {
+@keyframes _w89s1_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2389,7 +2354,7 @@
     opacity: 1;
   }
 }
-@keyframes slide-from-left {
+@keyframes _w89s1_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2445,10 +2410,10 @@
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: slide-from-left;
+  animation-name: _w89s1_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: slide-from-right;
+  animation-name: _w89s1_slide-from-right;
 }
 
 .edit-site-sidebar-button {
@@ -2550,7 +2515,7 @@
   position: sticky;
   top: 0;
   background: #1e1e1e;
-  padding-top: 108px;
+  padding-top: 48px;
   margin-bottom: 8px;
   padding-bottom: 8px;
   z-index: 1;
@@ -2558,8 +2523,8 @@
 
 .edit-site-sidebar-navigation-screen__title {
   flex-grow: 1;
-  padding: 6px 0 0 0;
   overflow-wrap: break-word;
+  padding: 2px 0 0 0;
 }
 
 .edit-site-sidebar-navigation-screen__actions {
@@ -2728,6 +2693,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 8px;
+  margin-right: 12px;
 }
 
 .edit-site-site-hub__actions {
@@ -2739,9 +2705,6 @@
   width: 60px;
   flex-shrink: 0;
 }
-.edit-site-site-hub__view-mode-toggle-container .edit-site-layout__view-mode-toggle-icon {
-  background: #1e1e1e;
-}
 .edit-site-site-hub__view-mode-toggle-container.has-transparent-background .edit-site-layout__view-mode-toggle-icon {
   background: transparent;
 }
@@ -2831,13 +2794,6 @@
 
 .edit-site-site-icon__icon {
   fill: currentColor;
-  transition: padding 0.3s ease-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .edit-site-site-icon__icon {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
 }
 .edit-site-layout.is-full-canvas .edit-site-site-icon__icon {
   padding: 6px;
@@ -2846,7 +2802,6 @@
 .edit-site-site-icon__image {
   width: 100%;
   height: 100%;
-  border-radius: 4px;
   object-fit: cover;
   background: #333;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.0.0",
+	"version": "6.1.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,45 +29,45 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.0.0",
-		"@wordpress/api-fetch": "^7.0.0",
-		"@wordpress/blob": "^4.0.0",
-		"@wordpress/block-editor": "^13.0.0",
-		"@wordpress/block-library": "^9.0.0",
-		"@wordpress/blocks": "^13.0.0",
-		"@wordpress/commands": "^1.0.0",
-		"@wordpress/components": "^28.0.0",
-		"@wordpress/compose": "^7.0.0",
-		"@wordpress/core-commands": "^1.0.0",
-		"@wordpress/core-data": "^7.0.0",
-		"@wordpress/data": "^10.0.0",
-		"@wordpress/dataviews": "^2.0.0",
-		"@wordpress/date": "^5.0.0",
-		"@wordpress/deprecated": "^4.0.0",
-		"@wordpress/dom": "^4.0.0",
-		"@wordpress/editor": "^14.0.0",
-		"@wordpress/element": "^6.0.0",
-		"@wordpress/escape-html": "^3.0.0",
-		"@wordpress/hooks": "^4.0.0",
-		"@wordpress/html-entities": "^4.0.0",
-		"@wordpress/i18n": "^5.0.0",
-		"@wordpress/icons": "^10.0.0",
-		"@wordpress/keyboard-shortcuts": "^5.0.0",
-		"@wordpress/keycodes": "^4.0.0",
-		"@wordpress/notices": "^5.0.0",
-		"@wordpress/patterns": "^2.0.0",
-		"@wordpress/plugins": "^7.0.0",
-		"@wordpress/preferences": "^4.0.0",
-		"@wordpress/primitives": "^4.0.0",
-		"@wordpress/priority-queue": "^3.0.0",
-		"@wordpress/private-apis": "^1.0.0",
-		"@wordpress/reusable-blocks": "^5.0.0",
-		"@wordpress/router": "^1.0.0",
-		"@wordpress/style-engine": "^2.0.0",
-		"@wordpress/url": "^4.0.0",
-		"@wordpress/viewport": "^6.0.0",
-		"@wordpress/widgets": "^4.0.0",
-		"@wordpress/wordcount": "^4.0.0",
+		"@wordpress/a11y": "^4.1.0",
+		"@wordpress/api-fetch": "^7.1.0",
+		"@wordpress/blob": "^4.1.0",
+		"@wordpress/block-editor": "^13.1.0",
+		"@wordpress/block-library": "^9.1.0",
+		"@wordpress/blocks": "^13.1.0",
+		"@wordpress/commands": "^1.1.0",
+		"@wordpress/components": "^28.1.0",
+		"@wordpress/compose": "^7.1.0",
+		"@wordpress/core-commands": "^1.1.0",
+		"@wordpress/core-data": "^7.1.0",
+		"@wordpress/data": "^10.1.0",
+		"@wordpress/dataviews": "^2.1.0",
+		"@wordpress/date": "^5.1.0",
+		"@wordpress/deprecated": "^4.1.0",
+		"@wordpress/dom": "^4.1.0",
+		"@wordpress/editor": "^14.1.0",
+		"@wordpress/element": "^6.1.0",
+		"@wordpress/escape-html": "^3.1.0",
+		"@wordpress/hooks": "^4.1.0",
+		"@wordpress/html-entities": "^4.1.0",
+		"@wordpress/i18n": "^5.1.0",
+		"@wordpress/icons": "^10.1.0",
+		"@wordpress/keyboard-shortcuts": "^5.1.0",
+		"@wordpress/keycodes": "^4.1.0",
+		"@wordpress/notices": "^5.1.0",
+		"@wordpress/patterns": "^2.1.0",
+		"@wordpress/plugins": "^7.1.0",
+		"@wordpress/preferences": "^4.1.0",
+		"@wordpress/primitives": "^4.1.0",
+		"@wordpress/priority-queue": "^3.1.0",
+		"@wordpress/private-apis": "^1.1.0",
+		"@wordpress/reusable-blocks": "^5.1.0",
+		"@wordpress/router": "^1.1.0",
+		"@wordpress/style-engine": "^2.1.0",
+		"@wordpress/url": "^4.1.0",
+		"@wordpress/viewport": "^6.1.0",
+		"@wordpress/widgets": "^4.1.0",
+		"@wordpress/wordcount": "^4.1.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2f30cddff15723ac7017fd009fc5913b7b419400"
+	"gitHead": "66d3bf12e67d16deddc4b4a9ec42e1d0bed3479a"
 }

package/src/components/add-new-page/index.js

@@ -13,6 +13,7 @@ import { useDispatch } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
+import { decodeEntities } from '@wordpress/html-entities';
 
 export default function AddNewPageModal( { onSave, onClose } ) {
 	const [ isCreatingPage, setIsCreatingPage ] = useState( false );
@@ -47,7 +48,7 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 				sprintf(
 					// translators: %s: Title of the created template e.g: "Category".
 					__( '"%s" successfully created.' ),
-					newPage.title?.rendered || title
+					decodeEntities( newPage.title?.rendered || title )
 				),
 				{
 					type: 'snackbar',

package/src/components/app/index.js

@@ -17,10 +17,26 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import Layout from '../layout';
 import { unlock } from '../../lock-unlock';
+import { useCommonCommands } from '../../hooks/commands/use-common-commands';
+import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
+import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
+import useLayoutAreas from '../layout/router';
+import useSetCommandContext from '../../hooks/commands/use-set-command-context';
 
 const { RouterProvider } = unlock( routerPrivateApis );
 const { GlobalStylesProvider } = unlock( editorPrivateApis );
 
+function AppLayout() {
+	// This ensures the edited entity id and type are initialized properly.
+	useInitEditedEntityFromURL();
+	useEditModeCommands();
+	useCommonCommands();
+	useSetCommandContext();
+	const route = useLayoutAreas();
+
+	return <Layout route={ route } />;
+}
+
 export default function App() {
 	const { createErrorNotice } = useDispatch( noticesStore );
 
@@ -41,7 +57,7 @@ export default function App() {
 			<GlobalStylesProvider>
 				<UnsavedChangesWarning />
 				<RouterProvider>
-					<Layout />
+					<AppLayout />
 					<PluginArea onError={ onPluginAreaError } />
 				</RouterProvider>
 			</GlobalStylesProvider>

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

@@ -1,4 +1,15 @@
+/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+::view-transition-old(frame),
+::view-transition-new(frame) {
+  animation-duration: 0;
+}
+/* stylelint-enable */
+
 .edit-site-visual-editor__editor-canvas {
+	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+	view-transition-name: frame;
+	/* stylelint-enable */
+
 	&.is-focused {
 		outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
 		outline-offset: calc(-2 * var(--wp-admin-border-width-focus));