@wordpress/edit-site 6.13.1-next.a9f418477.0 → 6.14.0

package/build-style/style.css

@@ -594,6 +594,14 @@
   line-height: 1.4;
 }
 
+.dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper {
+  overflow-y: scroll;
+  height: 100%;
+}
+.dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper .dataviews-view-config {
+  width: auto;
+}
+
 .dataviews-view-config__sort-direction .components-toggle-group-control-option-base {
   text-transform: uppercase;
 }
@@ -683,12 +691,12 @@
 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-actions {
   padding: 8px 0 4px;
 }
-.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__primary-field {
+.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field {
   min-height: 24px;
   display: flex;
   align-items: center;
 }
-.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__primary-field--clickable {
+.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
   width: -moz-fit-content;
   width: fit-content;
 }
@@ -835,6 +843,7 @@ ul.dataviews-view-list {
 .dataviews-view-list li .dataviews-view-list__item-wrapper {
   position: relative;
   padding: 16px 24px;
+  box-sizing: border-box;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions {
   flex: 0;
@@ -862,16 +871,16 @@ ul.dataviews-view-list {
 .dataviews-view-list li.is-selected.is-selected + li {
   border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
 }
-.dataviews-view-list li:not(.is-selected) .dataviews-view-list__primary-field {
+.dataviews-view-list li:not(.is-selected) .dataviews-view-list__title-field {
   color: #1e1e1e;
 }
 .dataviews-view-list li:not(.is-selected):hover, .dataviews-view-list li:not(.is-selected).is-hovered, .dataviews-view-list li:not(.is-selected):focus-within {
   color: var(--wp-admin-theme-color);
   background-color: #f8f8f8;
 }
-.dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__primary-field,
-.dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__fields, .dataviews-view-list li:not(.is-selected).is-hovered .dataviews-view-list__primary-field,
-.dataviews-view-list li:not(.is-selected).is-hovered .dataviews-view-list__fields, .dataviews-view-list li:not(.is-selected):focus-within .dataviews-view-list__primary-field,
+.dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__title-field,
+.dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__fields, .dataviews-view-list li:not(.is-selected).is-hovered .dataviews-view-list__title-field,
+.dataviews-view-list li:not(.is-selected).is-hovered .dataviews-view-list__fields, .dataviews-view-list li:not(.is-selected):focus-within .dataviews-view-list__title-field,
 .dataviews-view-list li:not(.is-selected):focus-within .dataviews-view-list__fields {
   color: var(--wp-admin-theme-color);
 }
@@ -880,9 +889,9 @@ ul.dataviews-view-list {
   background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
   color: #1e1e1e;
 }
-.dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__primary-field,
+.dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__title-field,
 .dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__fields,
-.dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__primary-field,
+.dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__title-field,
 .dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__fields {
   color: var(--wp-admin-theme-color);
 }
@@ -908,13 +917,13 @@ ul.dataviews-view-list {
   border-radius: 2px;
   outline: 2px solid transparent;
 }
-.dataviews-view-list .dataviews-view-list__primary-field {
+.dataviews-view-list .dataviews-view-list__title-field {
   flex: 1;
   min-height: 24px;
   line-height: 24px;
   overflow: hidden;
 }
-.dataviews-view-list .dataviews-view-list__primary-field:has(a, button) {
+.dataviews-view-list .dataviews-view-list__title-field:has(a, button) {
   z-index: 1;
 }
 .dataviews-view-list .dataviews-view-list__media-wrapper {
@@ -1759,9 +1768,10 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
 
 .edit-site-global-styles__shadow-editor__dropdown {
   width: 100%;
+  position: relative;
 }
-.edit-site-global-styles__shadow-editor__dropdown .edit-site-global-styles__shadow-editor__dropdown-toggle,
-.edit-site-global-styles__shadow-editor__dropdown .edit-site-global-styles__shadow-editor__remove-button {
+
+.edit-site-global-styles__shadow-editor__dropdown-toggle {
   width: 100%;
   height: auto;
   padding-top: 8px;
@@ -1769,12 +1779,22 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   text-align: left;
   border-radius: inherit;
 }
-.edit-site-global-styles__shadow-editor__dropdown .edit-site-global-styles__shadow-editor__dropdown-toggle.is-open,
-.edit-site-global-styles__shadow-editor__dropdown .edit-site-global-styles__shadow-editor__remove-button.is-open {
+.edit-site-global-styles__shadow-editor__dropdown-toggle.is-open {
   background: #f0f0f0;
   color: var(--wp-admin-theme-color);
 }
 
+.edit-site-global-styles__shadow-editor__remove-button {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  opacity: 0;
+}
+.edit-site-global-styles__shadow-editor__dropdown-toggle:hover + .edit-site-global-styles__shadow-editor__remove-button, .edit-site-global-styles__shadow-editor__remove-button:focus, .edit-site-global-styles__shadow-editor__remove-button:hover {
+  border: none;
+  opacity: 1;
+}
+
 .edit-site-global-styles-screen-css {
   flex: 1 1 auto;
   display: flex;
@@ -2769,7 +2789,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _4bom6_slide-from-right {
+@keyframes _i1zha_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2779,7 +2799,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _4bom6_slide-from-left {
+@keyframes _i1zha_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2835,10 +2855,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _4bom6_slide-from-left;
+  animation-name: _i1zha_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _4bom6_slide-from-right;
+  animation-name: _i1zha_slide-from-right;
 }
 
 .edit-site-sidebar-button {
@@ -2903,10 +2923,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 .edit-site-sidebar-navigation-screen__content {
   padding: 0 16px;
 }
-.edit-site-sidebar-navigation-screen__content .components-item-group {
-  margin-left: -16px;
-  margin-right: -16px;
-}
 .edit-site-sidebar-navigation-screen__content .components-text {
   color: #ccc;
 }
@@ -3038,6 +3054,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 
 .edit-site-sidebar-navigation-screen-patterns__group {
   margin-bottom: 24px;
+  margin-left: -16px;
+  margin-right: -16px;
 }
 .edit-site-sidebar-navigation-screen-patterns__group:last-of-type {
   border-bottom: 0;
@@ -3062,6 +3080,60 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   margin: 16px 0;
 }
 
+.edit-site-sidebar-navigation-screen__description {
+  margin: 0 0 32px 0;
+}
+
+.edit-site-sidebar-navigation-screen-navigation-menus {
+  margin-left: -16px;
+  margin-right: -16px;
+}
+
+.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
+  width: 100%;
+}
+.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-leaf .block-editor-list-view-block-contents {
+  white-space: normal;
+}
+.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__title {
+  margin-top: 3px;
+}
+.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 .block-editor-list-view-block-select-button {
+  color: #949494;
+}
+.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;
+}
+.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu {
+  color: #949494;
+}
+.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu:hover, .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu:focus {
+  color: #fff;
+}
+
+.edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner {
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}
+
+.edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor {
+  display: none;
+}
+
+.edit-site-sidebar-navigation-screen-main {
+  margin-left: -16px;
+  margin-right: -16px;
+}
+
+.edit-site-sidebar-navigation-screen-templates-browse {
+  margin-left: -16px;
+  margin-right: -16px;
+}
+
 .edit-site-sidebar-navigation-screen-dataviews__group-header {
   margin-top: 32px;
 }
@@ -3071,6 +3143,11 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   text-transform: uppercase;
 }
 
+.edit-site-sidebar-dataviews {
+  margin-left: -16px;
+  margin-right: -16px;
+}
+
 .edit-site-sidebar-dataviews-dataview-item {
   border-radius: 2px;
   padding-right: 8px;
@@ -3160,45 +3237,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   fill: #f0f0f0;
 }
 
-.edit-site-sidebar-navigation-screen__description {
-  margin: 0 0 32px 0;
-}
-
-.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
-  width: 100%;
-}
-.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-leaf .block-editor-list-view-block-contents {
-  white-space: normal;
-}
-.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__title {
-  margin-top: 3px;
-}
-.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 .block-editor-list-view-block-select-button {
-  color: #949494;
-}
-.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;
-}
-.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu {
-  color: #949494;
-}
-.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu:hover, .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu:focus {
-  color: #fff;
-}
-
-.edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner {
-  margin-left: auto;
-  margin-right: auto;
-  display: block;
-}
-
-.edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor {
-  display: none;
-}
-
 .edit-site-site-icon__icon {
   fill: currentColor;
   width: 100%;
@@ -3244,6 +3282,11 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   border-radius: 8px;
 }
 
+.edit-site-style-book__iframe {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
 .edit-site-style-book__iframe.is-button {
   border-radius: 8px;
 }
@@ -3311,16 +3354,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   padding-top: 16px;
 }
 
-.edit-site-post-edit-header .edit-site-post-edit-header__description {
-  color: #757575;
-}
-.edit-site-post-edit-header .edit-site-post-edit-header__title {
-  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  font-weight: 500;
-  font-size: 13px;
-  line-height: 20px;
-}
-
 .edit-site-post-list__featured-image {
   height: 100%;
   object-fit: cover;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.13.1-next.a9f418477.0",
+	"version": "6.14.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,45 +30,45 @@
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.13.1-next.a9f418477.0",
-		"@wordpress/api-fetch": "^7.13.1-next.a9f418477.0",
-		"@wordpress/blob": "^4.13.1-next.a9f418477.0",
-		"@wordpress/block-editor": "^14.8.1-next.a9f418477.0",
-		"@wordpress/block-library": "^9.13.1-next.a9f418477.0",
-		"@wordpress/blocks": "^14.2.1-next.a9f418477.0",
-		"@wordpress/commands": "^1.13.1-next.a9f418477.0",
+		"@wordpress/a11y": "*",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/blob": "*",
+		"@wordpress/block-editor": "*",
+		"@wordpress/block-library": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/commands": "*",
 		"@wordpress/components": "*",
-		"@wordpress/compose": "^7.13.1-next.a9f418477.0",
-		"@wordpress/core-commands": "^1.13.1-next.a9f418477.0",
-		"@wordpress/core-data": "^7.13.1-next.a9f418477.0",
-		"@wordpress/data": "^10.13.1-next.a9f418477.0",
-		"@wordpress/dataviews": "^4.9.1-next.a9f418477.0",
-		"@wordpress/date": "^5.13.1-next.a9f418477.0",
-		"@wordpress/deprecated": "^4.13.1-next.a9f418477.0",
-		"@wordpress/dom": "^4.13.1-next.a9f418477.0",
-		"@wordpress/editor": "^14.13.1-next.a9f418477.0",
-		"@wordpress/element": "^6.13.1-next.a9f418477.0",
-		"@wordpress/escape-html": "^3.13.1-next.a9f418477.0",
-		"@wordpress/fields": "^0.5.1-next.a9f418477.0",
-		"@wordpress/hooks": "^4.13.1-next.a9f418477.0",
-		"@wordpress/html-entities": "^4.13.1-next.a9f418477.0",
-		"@wordpress/i18n": "^5.13.1-next.a9f418477.0",
-		"@wordpress/icons": "^10.13.1-next.a9f418477.0",
-		"@wordpress/keyboard-shortcuts": "^5.13.1-next.a9f418477.0",
-		"@wordpress/keycodes": "^4.13.1-next.a9f418477.0",
-		"@wordpress/notices": "^5.13.1-next.a9f418477.0",
-		"@wordpress/patterns": "^2.13.1-next.a9f418477.0",
-		"@wordpress/plugins": "^7.13.1-next.a9f418477.0",
-		"@wordpress/preferences": "^4.13.1-next.a9f418477.0",
-		"@wordpress/primitives": "^4.13.1-next.a9f418477.0",
-		"@wordpress/private-apis": "^1.13.1-next.a9f418477.0",
-		"@wordpress/reusable-blocks": "^5.13.1-next.a9f418477.0",
-		"@wordpress/router": "^1.13.1-next.a9f418477.0",
-		"@wordpress/style-engine": "^2.13.1-next.a9f418477.0",
-		"@wordpress/url": "^4.13.1-next.a9f418477.0",
-		"@wordpress/viewport": "^6.13.1-next.a9f418477.0",
-		"@wordpress/widgets": "^4.13.1-next.a9f418477.0",
-		"@wordpress/wordcount": "^4.13.1-next.a9f418477.0",
+		"@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/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",
@@ -83,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c1a8f3e9cada3b7d8342d1d2595c2dac0433111d"
+	"gitHead": "b432c18934c9db866b6dba7d37517a4e97d642e3"
 }

package/src/components/global-styles/shadows-edit-panel.js

@@ -35,7 +35,7 @@ import {
 	reset,
 	moreVertical,
 } from '@wordpress/icons';
-import { useState, useMemo, useEffect } from '@wordpress/element';
+import { useState, useMemo, useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -300,6 +300,7 @@ function ShadowsPreview( { shadow } ) {
 }
 
 function ShadowEditor( { shadow, onChange } ) {
+	const addShadowButtonRef = useRef();
 	const shadowParts = useMemo( () => getShadowParts( shadow ), [ shadow ] );
 
 	const onChangeShadowPart = ( index, part ) => {
@@ -314,6 +315,7 @@ function ShadowEditor( { shadow, onChange } ) {
 
 	const onRemoveShadowPart = ( index ) => {
 		onChange( shadowParts.filter( ( p, i ) => i !== index ).join( ', ' ) );
+		addShadowButtonRef.current.focus();
 	};
 
 	return (
@@ -334,6 +336,7 @@ function ShadowEditor( { shadow, onChange } ) {
 							onClick={ () => {
 								onAddShadowPart();
 							} }
+							ref={ addShadowButtonRef }
 						/>
 					</FlexItem>
 				</HStack>
@@ -393,28 +396,24 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
 				};
 
 				return (
-					<HStack align="center" justify="flex-start" spacing={ 0 }>
-						<FlexItem style={ { flexGrow: 1 } }>
-							<Button
-								__next40pxDefaultSize
-								icon={ shadowIcon }
-								{ ...toggleProps }
-							>
-								{ shadowObj.inset
-									? __( 'Inner shadow' )
-									: __( 'Drop shadow' ) }
-							</Button>
-						</FlexItem>
+					<>
+						<Button
+							__next40pxDefaultSize
+							icon={ shadowIcon }
+							{ ...toggleProps }
+						>
+							{ shadowObj.inset
+								? __( 'Inner shadow' )
+								: __( 'Drop shadow' ) }
+						</Button>
 						{ canRemove && (
-							<FlexItem>
-								<Button
-									__next40pxDefaultSize
-									icon={ reset }
-									{ ...removeButtonProps }
-								/>
-							</FlexItem>
+							<Button
+								size="small"
+								icon={ reset }
+								{ ...removeButtonProps }
+							/>
 						) }
-					</HStack>
+					</>
 				);
 			} }
 			renderContent={ () => (

package/src/components/global-styles/style.scss

@@ -146,20 +146,34 @@
 
 .edit-site-global-styles__shadow-editor__dropdown {
 	width: 100%;
+	position: relative;
+}
 
-	.edit-site-global-styles__shadow-editor__dropdown-toggle,
-	.edit-site-global-styles__shadow-editor__remove-button {
-		width: 100%;
-		height: auto;
-		padding-top: $grid-unit;
-		padding-bottom: $grid-unit;
-		text-align: left;
-		border-radius: inherit;
-
-		&.is-open {
-			background: $gray-100;
-			color: var(--wp-admin-theme-color);
-		}
+.edit-site-global-styles__shadow-editor__dropdown-toggle {
+	width: 100%;
+	height: auto;
+	padding-top: $grid-unit;
+	padding-bottom: $grid-unit;
+	text-align: left;
+	border-radius: inherit;
+
+	&.is-open {
+		background: $gray-100;
+		color: var(--wp-admin-theme-color);
+	}
+}
+
+.edit-site-global-styles__shadow-editor__remove-button {
+	position: absolute;
+	right: $grid-unit;
+	top: $grid-unit;
+	opacity: 0;
+
+	.edit-site-global-styles__shadow-editor__dropdown-toggle:hover + &,
+	&:focus,
+	&:hover {
+		border: none;
+		opacity: 1;
 	}
 }
 

package/src/components/layout/index.js

@@ -132,7 +132,7 @@ function Layout() {
 										/>
 										<SidebarContent
 											shouldAnimate={
-												routeKey !== 'styles-view'
+												routeKey !== 'styles'
 											}
 											routeKey={ routeKey }
 										>

package/src/components/maybe-editor/index.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+
+import Editor from '../editor';
+
+export function MaybeEditor( { showEditor = true } ) {
+	const { isBlockBasedTheme, siteUrl } = useSelect( ( select ) => {
+		const { getEntityRecord, getCurrentTheme } = select( coreStore );
+		const siteData = getEntityRecord( 'root', '__unstableBase' );
+
+		return {
+			isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
+			siteUrl: siteData?.home,
+		};
+	}, [] );
+
+	// If theme is block based, return the Editor, otherwise return the site preview.
+	return isBlockBasedTheme || showEditor ? (
+		<Editor />
+	) : (
+		<iframe
+			src={ siteUrl }
+			title={ __( 'Site Preview' ) }
+			style={ {
+				display: 'block',
+				width: '100%',
+				height: '100%',
+				backgroundColor: '#fff',
+			} }
+			onLoad={ ( event ) => {
+				// Hide the admin bar in the front-end preview.
+				const document = event.target.contentDocument;
+				document.getElementById( 'wpadminbar' ).remove();
+				document
+					.getElementsByTagName( 'html' )[ 0 ]
+					.setAttribute( 'style', 'margin-top: 0 !important;' );
+				// Make interactive elements unclickable.
+				const interactiveElements = document.querySelectorAll(
+					'a, button, input, details, audio'
+				);
+				interactiveElements.forEach( ( element ) => {
+					element.style.pointerEvents = 'none';
+					element.tabIndex = -1;
+					element.setAttribute( 'aria-hidden', 'true' );
+				} );
+			} }
+		/>
+	);
+}

package/src/components/page-templates/index.js

@@ -25,6 +25,7 @@ import {
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
 import { authorField, descriptionField, previewField } from './fields';
+import { useEvent } from '@wordpress/compose';
 
 const { usePostActions } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
@@ -92,11 +93,19 @@ export default function PageTemplates() {
 		};
 	}, [ layout, activeView ] );
 	const [ view, setView ] = useState( defaultView );
+
+	// Sync the layout from the URL to the view state.
+	useEffect( () => {
+		setView( ( currentView ) => ( {
+			...currentView,
+			type: layout ?? DEFAULT_VIEW.type,
+		} ) );
+	}, [ setView, layout ] );
+
+	// Sync the active view from the URL to the view state.
 	useEffect( () => {
-		const usedType = layout ?? DEFAULT_VIEW.type;
 		setView( ( currentView ) => ( {
 			...currentView,
-			type: usedType,
 			filters:
 				activeView !== 'all'
 					? [
@@ -108,7 +117,7 @@ export default function PageTemplates() {
 					  ]
 					: [],
 		} ) );
-	}, [ activeView, layout ] );
+	}, [ setView, activeView ] );
 
 	const { records, isResolving: isLoadingData } =
 		useEntityRecordsWithPermissions( 'postType', TEMPLATE_POST_TYPE, {
@@ -170,20 +179,16 @@ export default function PageTemplates() {
 		[ postTypeActions, editAction ]
 	);
 
-	const onChangeView = useCallback(
-		( newView ) => {
-			if ( newView.type !== view.type ) {
-				history.navigate(
-					addQueryArgs( path, {
-						layout: newView.type,
-					} )
-				);
-			}
-
-			setView( newView );
-		},
-		[ view.type, setView, history, path ]
-	);
+	const onChangeView = useEvent( ( newView ) => {
+		setView( newView );
+		if ( newView.type !== layout ) {
+			history.navigate(
+				addQueryArgs( path, {
+					layout: newView.type,
+				} )
+			);
+		}
+	} );
 
 	return (
 		<Page