@wordpress/edit-site 6.9.0 → 6.11.0

package/build-style/style.css

@@ -827,44 +827,31 @@ ul.dataviews-view-list {
 }
 .dataviews-view-list li {
   margin: 0;
-  cursor: pointer;
   border-top: 1px solid #f0f0f0;
 }
 .dataviews-view-list li .dataviews-view-list__item-wrapper {
   position: relative;
-  border-radius: 4px;
-}
-.dataviews-view-list li .dataviews-view-list__item-wrapper > * {
-  width: 100%;
+  padding: 16px 24px;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions {
-  position: absolute;
-  top: 16px;
-  right: 0;
+  flex: 0;
+  overflow: hidden;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions > div {
   height: 24px;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions .components-button {
+  position: relative;
+  z-index: 1;
   opacity: 0;
 }
-.dataviews-view-list li:has(.dataviews-view-list__fields:empty) .dataviews-view-list__item-actions {
-  top: 50%;
-  transform: translateY(-50%);
-}
-.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 {
-  background: #f8f8f8;
-  padding-left: 8px;
-  margin-right: 24px;
-  box-shadow: -12px 0 8px 0 #f8f8f8;
+.dataviews-view-list li:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions {
+  flex-basis: min-content;
+  overflow: unset;
+  padding-inline-end: 4px;
 }
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions .components-button, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions .components-button, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions .components-button {
+.dataviews-view-list li:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions .components-button {
   opacity: 1;
-  position: static;
-}
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions {
-  background-color: #f7f8ff;
-  box-shadow: -12px 0 8px 0 #f7f8ff;
 }
 .dataviews-view-list li.is-selected.is-selected {
   border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
@@ -897,26 +884,36 @@ ul.dataviews-view-list {
   color: var(--wp-admin-theme-color);
 }
 .dataviews-view-list .dataviews-view-list__item {
-  box-sizing: border-box;
-  padding: 16px 24px;
-  width: 100%;
+  position: absolute;
+  z-index: 1;
+  inset: 0;
   scroll-margin: 8px 0;
+  appearance: none;
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+}
+.dataviews-view-list .dataviews-view-list__item:focus-visible {
+  outline: none;
 }
 .dataviews-view-list .dataviews-view-list__item:focus-visible::before {
   position: absolute;
   content: "";
-  top: var(--wp-admin-border-width-focus);
-  right: var(--wp-admin-border-width-focus);
-  bottom: var(--wp-admin-border-width-focus);
-  left: var(--wp-admin-border-width-focus);
+  inset: var(--wp-admin-border-width-focus);
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   border-radius: 2px;
+  outline: 2px solid transparent;
 }
-.dataviews-view-list .dataviews-view-list__item .dataviews-view-list__primary-field {
+.dataviews-view-list .dataviews-view-list__primary-field {
+  flex: 1;
   min-height: 24px;
   line-height: 24px;
   overflow: hidden;
 }
+.dataviews-view-list .dataviews-view-list__primary-field:has(a, button) {
+  z-index: 1;
+}
 .dataviews-view-list .dataviews-view-list__media-wrapper {
   width: 52px;
   height: 52px;
@@ -941,13 +938,9 @@ ul.dataviews-view-list {
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
 }
-.dataviews-view-list .dataviews-view-list__media-placeholder {
-  width: 52px;
-  height: 52px;
-  background-color: #e0e0e0;
-}
 .dataviews-view-list .dataviews-view-list__field-wrapper {
   min-height: 52px;
+  flex-grow: 1;
 }
 .dataviews-view-list .dataviews-view-list__fields {
   color: #757575;
@@ -1155,8 +1148,7 @@ ul.dataviews-view-list {
   align-items: center;
   padding: 6px 0;
   line-height: 20px;
-  -webkit-hyphens: auto;
-          hyphens: auto;
+  hyphens: auto;
 }
 
 .dataforms-layouts-panel__field-control {
@@ -1186,6 +1178,102 @@ ul.dataviews-view-list {
   margin-bottom: 16px;
 }
 
+.fields-controls__slug .fields-controls__slug-external-icon {
+  margin-left: 5ch;
+}
+.fields-controls__slug .fields-controls__slug-input input.components-input-control__input {
+  padding-inline-start: 0 !important;
+}
+.fields-controls__slug .fields-controls__slug-help-link {
+  word-break: break-word;
+}
+.fields-controls__slug .fields-controls__slug-help {
+  display: flex;
+  flex-direction: column;
+}
+.fields-controls__slug .fields-controls__slug-help .fields-controls__slug-help-slug {
+  font-weight: 600;
+}
+
+.fields-controls__featured-image-placeholder {
+  border-radius: 2px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+  display: inline-block;
+  padding: 0;
+  background: #fff linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+}
+
+.fields-controls__featured-image-title {
+  width: 100%;
+  color: #1e1e1e;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.fields-controls__featured-image-image {
+  width: 100%;
+  height: 100%;
+  border-radius: 2px;
+  align-self: center;
+}
+
+.fields-controls__featured-image-container .fields-controls__featured-image-placeholder {
+  margin: 0;
+}
+.fields-controls__featured-image-container span {
+  margin-right: auto;
+}
+
+fieldset.fields-controls__featured-image .fields-controls__featured-image-container {
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  padding: 8px 12px;
+  cursor: pointer;
+}
+fieldset.fields-controls__featured-image .fields-controls__featured-image-container:hover {
+  background-color: #f0f0f0;
+}
+fieldset.fields-controls__featured-image .fields-controls__featured-image-placeholder {
+  width: 24px;
+  height: 24px;
+}
+fieldset.fields-controls__featured-image span {
+  align-self: center;
+  text-align: start;
+  white-space: nowrap;
+}
+fieldset.fields-controls__featured-image .fields-controls__featured-image-upload-button {
+  padding: 0;
+  height: -moz-fit-content;
+  height: fit-content;
+}
+fieldset.fields-controls__featured-image .fields-controls__featured-image-upload-button:hover, fieldset.fields-controls__featured-image .fields-controls__featured-image-upload-button:focus {
+  border: 0;
+  color: unset;
+}
+fieldset.fields-controls__featured-image .fields-controls__featured-image-remove-button {
+  place-self: end;
+}
+
+.dataforms-layouts-panel__field-control .fields-controls__featured-image-image {
+  width: 16px;
+  height: 16px;
+}
+.dataforms-layouts-panel__field-control .fields-controls__featured-image-placeholder {
+  width: 16px;
+  height: 16px;
+}
+
+.dataviews-view-table__cell-content-wrapper .fields-controls__featured-image-image {
+  width: 32px;
+  height: 32px;
+}
+.dataviews-view-table__cell-content-wrapper .fields-controls__featured-image-placeholder {
+  width: 32px;
+  height: 32px;
+}
+
 .edit-site-custom-template-modal__contents-wrapper {
   height: 100%;
   justify-content: flex-start !important;
@@ -1788,6 +1876,10 @@ ul.dataviews-view-list {
   margin: 0;
 }
 
+.edit-site-global-styles-sidebar .edit-site-global-styles-sidebar__header-actions {
+  flex: 1;
+}
+
 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
   font-size: 15.6px;
   font-weight: 500;
@@ -1827,6 +1919,9 @@ ul.dataviews-view-list {
   margin: 0;
 }
 
+.show-icon-labels .edit-site-global-styles-sidebar__header .components-button.has-icon {
+  width: auto;
+}
 .show-icon-labels .edit-site-global-styles-sidebar__header .components-button.has-icon svg {
   display: none;
 }
@@ -2459,8 +2554,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 }
 .edit-site-layout__view-mode-toggle.components-button .edit-site-layout__view-mode-toggle-icon {
   display: flex;
-  height: 64px;
-  width: 64px;
+  height: 60px;
+  width: 60px;
   justify-content: center;
   align-items: center;
 }
@@ -2546,7 +2641,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _u3rbd_slide-from-right {
+@keyframes _1qbfb_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2556,7 +2651,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _u3rbd_slide-from-left {
+@keyframes _1qbfb_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2612,10 +2707,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _u3rbd_slide-from-left;
+  animation-name: _1qbfb_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _u3rbd_slide-from-right;
+  animation-name: _1qbfb_slide-from-right;
 }
 
 .edit-site-sidebar-button {
@@ -2630,7 +2725,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   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, .edit-site-sidebar-button[aria-expanded=true] {
+.edit-site-sidebar-button:hover:not(:disabled, [aria-disabled=true]), .edit-site-sidebar-button:focus-visible, .edit-site-sidebar-button:focus, .edit-site-sidebar-button:not(:disabled, [aria-disabled=true]):active, .edit-site-sidebar-button[aria-expanded=true] {
   color: #f0f0f0;
 }
 
@@ -2725,7 +2820,9 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 .edit-site-sidebar-navigation-screen__title {
   flex-grow: 1;
   overflow-wrap: break-word;
-  padding: 2px 0 0 0;
+}
+.edit-site-sidebar-navigation-screen__title.edit-site-sidebar-navigation-screen__title, .edit-site-sidebar-navigation-screen__title.edit-site-sidebar-navigation-screen__title .edit-site-sidebar-navigation-screen__title {
+  line-height: 32px;
 }
 
 .edit-site-sidebar-navigation-screen__actions {
@@ -2894,6 +2991,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   justify-content: space-between;
   gap: 8px;
   margin-right: 12px;
+  height: 56px;
 }
 
 .edit-site-site-hub__actions {
@@ -2917,6 +3015,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   font-weight: 500;
   overflow: hidden;
   padding-right: 16px;
+  margin-left: -4px;
   position: relative;
   text-decoration: none;
   text-overflow: ellipsis;
@@ -2975,10 +3074,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu-cell {
   padding-right: 0;
 }
-.edit-site-sidebar-navigation-screen-navigation-menus__content .components-button {
+.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button {
   color: #949494;
 }
-.edit-site-sidebar-navigation-screen-navigation-menus__content .components-button:hover, .edit-site-sidebar-navigation-screen-navigation-menus__content .components-button:focus, .edit-site-sidebar-navigation-screen-navigation-menus__content .components-button[aria-current] {
+.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button:hover, .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button:focus, .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button[aria-current] {
   color: #fff;
 }
 
@@ -3014,6 +3113,9 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 
 .edit-site-style-book {
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
 }
 .edit-site-style-book.is-button {
   border-radius: 8px;
@@ -3028,22 +3130,16 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 }
 
 .edit-site-style-book__tablist-container {
-  background: #fff;
+  flex: none;
+  display: flex;
   width: 100%;
   padding-right: 56px;
-  display: flex;
-  position: absolute;
-  z-index: 1;
+  background: #fff;
 }
 
-.edit-site-style-book__tabs [role=tabpanel] {
-  bottom: 0;
-  left: 0;
+.edit-site-style-book__tabpanel {
+  flex: 1 0 auto;
   overflow: auto;
-  padding: 0;
-  position: absolute;
-  right: 0;
-  top: 48px;
 }
 
 .edit-site-editor-canvas-container {
@@ -3149,7 +3245,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 
 .edit-site-post-list__title-badge {
   background: #f0f0f0;
-  color: #757575;
+  color: #2f2f2f;
   padding: 0 4px;
   border-radius: 2px;
   font-size: 12px;
@@ -3167,6 +3263,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   margin-left: -4px;
 }
 
+.components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
+  z-index: 159990;
+}
+
 .edit-site-resizable-frame__inner {
   position: relative;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.9.0",
+	"version": "6.11.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,47 +27,48 @@
 	"module": "build-module/index.js",
 	"react-native": "src/index",
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
+		"@babel/runtime": "7.25.7",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.9.0",
-		"@wordpress/api-fetch": "^7.9.0",
-		"@wordpress/blob": "^4.9.0",
-		"@wordpress/block-editor": "^14.4.0",
-		"@wordpress/block-library": "^9.9.0",
-		"@wordpress/blocks": "^13.9.0",
-		"@wordpress/commands": "^1.9.0",
-		"@wordpress/components": "^28.9.0",
-		"@wordpress/compose": "^7.9.0",
-		"@wordpress/core-commands": "^1.9.0",
-		"@wordpress/core-data": "^7.9.0",
-		"@wordpress/data": "^10.9.0",
-		"@wordpress/dataviews": "^4.5.0",
-		"@wordpress/date": "^5.9.0",
-		"@wordpress/deprecated": "^4.9.0",
-		"@wordpress/dom": "^4.9.0",
-		"@wordpress/editor": "^14.9.0",
-		"@wordpress/element": "^6.9.0",
-		"@wordpress/escape-html": "^3.9.0",
-		"@wordpress/hooks": "^4.9.0",
-		"@wordpress/html-entities": "^4.9.0",
-		"@wordpress/i18n": "^5.9.0",
-		"@wordpress/icons": "^10.9.0",
-		"@wordpress/keyboard-shortcuts": "^5.9.0",
-		"@wordpress/keycodes": "^4.9.0",
-		"@wordpress/notices": "^5.9.0",
-		"@wordpress/patterns": "^2.9.0",
-		"@wordpress/plugins": "^7.9.0",
-		"@wordpress/preferences": "^4.9.0",
-		"@wordpress/primitives": "^4.9.0",
-		"@wordpress/priority-queue": "^3.9.0",
-		"@wordpress/private-apis": "^1.9.0",
-		"@wordpress/reusable-blocks": "^5.9.0",
-		"@wordpress/router": "^1.9.0",
-		"@wordpress/style-engine": "^2.9.0",
-		"@wordpress/url": "^4.9.0",
-		"@wordpress/viewport": "^6.9.0",
-		"@wordpress/widgets": "^4.9.0",
-		"@wordpress/wordcount": "^4.9.0",
+		"@wordpress/a11y": "*",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/blob": "*",
+		"@wordpress/block-editor": "*",
+		"@wordpress/block-library": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/commands": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/core-commands": "*",
+		"@wordpress/core-data": "*",
+		"@wordpress/data": "*",
+		"@wordpress/dataviews": "*",
+		"@wordpress/date": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/dom": "*",
+		"@wordpress/editor": "*",
+		"@wordpress/element": "*",
+		"@wordpress/escape-html": "*",
+		"@wordpress/fields": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/keyboard-shortcuts": "*",
+		"@wordpress/keycodes": "*",
+		"@wordpress/notices": "*",
+		"@wordpress/patterns": "*",
+		"@wordpress/plugins": "*",
+		"@wordpress/preferences": "*",
+		"@wordpress/primitives": "*",
+		"@wordpress/priority-queue": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/reusable-blocks": "*",
+		"@wordpress/router": "*",
+		"@wordpress/style-engine": "*",
+		"@wordpress/url": "*",
+		"@wordpress/viewport": "*",
+		"@wordpress/widgets": "*",
+		"@wordpress/wordcount": "*",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -82,5 +83,6 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2e5495c635910cb34bfaca3c6258d2e989f66214"
+	"wpScript": true,
+	"gitHead": "dcf4613b33b0eda14e203ac30f700ed0db70347f"
 }

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

@@ -64,7 +64,7 @@ export default function AddNewPostModal( { postType, onSave, onClose } ) {
 
 			createSuccessNotice(
 				sprintf(
-					// translators: %s: Title of the created post e.g: "Hello world".
+					// translators: %s: Title of the created post or template, e.g: "Hello world".
 					__( '"%s" successfully created.' ),
 					decodeEntities( newPage.title?.rendered || title )
 				),

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

@@ -211,7 +211,7 @@ function NewTemplateModal( { onClose } ) {
 
 			createSuccessNotice(
 				sprintf(
-					// translators: %s: Title of the created template e.g: "Category".
+					// translators: %s: Title of the created post or template, e.g: "Hello world".
 					__( '"%s" successfully created.' ),
 					decodeEntities( newTemplate.title?.rendered || title )
 				),

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

@@ -6,7 +6,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useMemo, useCallback } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { blockMeta, post, archive } from '@wordpress/icons';
 
 /**
@@ -246,14 +246,17 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 			if ( _needsUniqueIdentifier ) {
 				menuItemTitle = labels.template_name
 					? sprintf(
-							// translators: %1s: Name of the template e.g: "Single Item: Post"; %2s: Slug of the post type e.g: "book".
-							__( '%1$s (%2$s)' ),
+							// translators: 1: Name of the template e.g: "Single Item: Post". 2: Slug of the post type e.g: "book".
+							_x( '%1$s (%2$s)', 'post type menu label' ),
 							labels.template_name,
 							slug
 					  )
 					: sprintf(
-							// translators: %1s: Name of the post type e.g: "Post"; %2s: Slug of the post type e.g: "book".
-							__( 'Single item: %1$s (%2$s)' ),
+							// translators: 1: Name of the post type e.g: "Post". 2: Slug of the post type e.g: "book".
+							_x(
+								'Single item: %1$s (%2$s)',
+								'post type menu label'
+							),
 							labels.singular_name,
 							slug
 					  );
@@ -410,14 +413,14 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 			if ( _needsUniqueIdentifier ) {
 				menuItemTitle = labels.template_name
 					? sprintf(
-							// translators: %1s: Name of the template e.g: "Products by Category"; %2s: Slug of the taxonomy e.g: "product_cat".
-							__( '%1$s (%2$s)' ),
+							// translators: 1: Name of the template e.g: "Products by Category". 2s: Slug of the taxonomy e.g: "product_cat".
+							_x( '%1$s (%2$s)', 'taxonomy template menu label' ),
 							labels.template_name,
 							slug
 					  )
 					: sprintf(
-							// translators: %1s: Name of the taxonomy e.g: "Category"; %2s: Slug of the taxonomy e.g: "product_cat".
-							__( '%1$s (%2$s)' ),
+							// translators: 1: Name of the taxonomy e.g: "Category". 2: Slug of the taxonomy e.g: "product_cat".
+							_x( '%1$s (%2$s)', 'taxonomy menu label' ),
 							labels.singular_name,
 							slug
 					  );

package/src/components/app/index.js

@@ -20,8 +20,9 @@ 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 useActiveRoute from '../layout/router';
 import useSetCommandContext from '../../hooks/commands/use-set-command-context';
+import { useRegisterSiteEditorRoutes } from '../site-editor-routes';
 
 const { RouterProvider } = unlock( routerPrivateApis );
 const { GlobalStylesProvider } = unlock( editorPrivateApis );
@@ -32,7 +33,8 @@ function AppLayout() {
 	useEditModeCommands();
 	useCommonCommands();
 	useSetCommandContext();
-	const route = useLayoutAreas();
+	useRegisterSiteEditorRoutes();
+	const route = useActiveRoute();
 
 	return <Layout route={ route } />;
 }

package/src/components/block-editor/use-editor-iframe-props.js

@@ -6,37 +6,37 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { store as editorStore } from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
 
-export default function useEditorIframeProps() {
-	const { canvasMode, currentPostIsTrashed } = useSelect( ( select ) => {
-		const { getCanvasMode } = unlock( select( editSiteStore ) );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
-		return {
-			canvasMode: getCanvasMode(),
-			currentPostIsTrashed:
-				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
-				'trash',
-		};
+export default function useEditorIframeProps() {
+	const { params } = useLocation();
+	const history = useHistory();
+	const { canvas = 'view' } = params;
+	const currentPostIsTrashed = useSelect( ( select ) => {
+		return (
+			select( editorStore ).getCurrentPostAttribute( 'status' ) ===
+			'trash'
+		);
 	}, [] );
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const [ isFocused, setIsFocused ] = useState( false );
 
 	useEffect( () => {
-		if ( canvasMode === 'edit' ) {
+		if ( canvas === 'edit' ) {
 			setIsFocused( false );
 		}
-	}, [ canvasMode ] );
+	}, [ canvas ] );
 
 	// In view mode, make the canvas iframe be perceived and behave as a button
 	// to switch to edit mode, with a meaningful label and no title attribute.
@@ -55,11 +55,15 @@ export default function useEditorIframeProps() {
 				! currentPostIsTrashed
 			) {
 				event.preventDefault();
-				setCanvasMode( 'edit' );
+				history.push( { ...params, canvas: 'edit' }, undefined, {
+					transition: 'canvas-mode-edit-transition',
+				} );
 			}
 		},
 		onClick: () => {
-			setCanvasMode( 'edit' );
+			history.push( { ...params, canvas: 'edit' }, undefined, {
+				transition: 'canvas-mode-edit-transition',
+			} );
 		},
 		onClickCapture: ( event ) => {
 			if ( currentPostIsTrashed ) {
@@ -72,8 +76,8 @@ export default function useEditorIframeProps() {
 
 	return {
 		className: clsx( 'edit-site-visual-editor__editor-canvas', {
-			'is-focused': isFocused && canvasMode === 'view',
+			'is-focused': isFocused && canvas === 'view',
 		} ),
-		...( canvasMode === 'view' ? viewModeIframeProps : {} ),
+		...( canvas === 'view' ? viewModeIframeProps : {} ),
 	};
 }