@wordpress/edit-site 3.0.18-next.33ec3857e2.0 → 3.0.21

package/build-style/style-rtl.css

@@ -468,6 +468,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   border-radius: 2px;
 }
 
+.edit-site-visual-editor__editor-canvas {
+  border-radius: 2px 2px 0 0;
+}
+
 .edit-site-visual-editor__back-button {
   position: absolute;
   top: 8px;
@@ -488,24 +492,28 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   bottom: 0;
   padding: 0;
   margin: auto 0;
-  width: 4px;
+  width: 8px;
   height: 100px;
   -webkit-appearance: none;
           appearance: none;
-  cursor: ew-resize;
+  cursor: grab;
   outline: none;
-  background: #949494;
-  border-radius: 2px;
+  background: #757575;
+  border-radius: 4px;
   border: 0;
 }
 .resizable-editor__drag-handle.is-left {
-  right: -16px;
+  right: -28px;
 }
 .resizable-editor__drag-handle.is-right {
-  left: -16px;
+  left: -28px;
+}
+.resizable-editor__drag-handle:hover {
+  background: #949494;
 }
-.resizable-editor__drag-handle:hover, .resizable-editor__drag-handle:active {
-  background: #ccc;
+.resizable-editor__drag-handle:active {
+  cursor: grabbing;
+  background: #949494;
 }
 .resizable-editor__drag-handle:focus {
   box-shadow: 0 0 0 1px #2f2f2f, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
@@ -518,6 +526,14 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   min-height: 152px;
   line-height: 1;
 }
+.edit-site-global-styles-preview .component-color-indicator {
+  border-radius: 50%;
+  border: 0;
+  height: 36px;
+  width: 36px;
+  margin-right: 0;
+  padding: 0;
+}
 
 .edit-site-typography-panel__preview {
   display: flex;
@@ -547,6 +563,13 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin: 16px;
 }
 .edit-site-global-styles-screen-colors .component-color-indicator {
+  margin-right: 0;
+  display: block;
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  padding: 0;
+  border: 1px solid #ddd;
   background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
@@ -557,7 +580,8 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .edit-site-global-styles-subtitle {
   margin-bottom: 0 !important;
   text-transform: uppercase;
-  font-weight: 500;
+  font-weight: 500 !important;
+  font-size: 11px !important;
 }
 
 .edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle {
@@ -611,8 +635,6 @@ body.is-fullscreen-mode .edit-site-header {
   display: flex;
   align-items: center;
   height: 100%;
-  flex-grow: 1;
-  justify-content: center;
   min-width: 0;
 }
 .edit-site-header .edit-site-header_end {
@@ -690,6 +712,7 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
 .edit-site-header__actions {
   display: inline-flex;
   align-items: center;
+  flex-wrap: wrap;
   padding-left: 4px;
 }
 .edit-site-header__actions .interface-pinned-items {
@@ -744,7 +767,6 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 0 8px;
   height: 100%;
   min-width: 0;
 }
@@ -771,6 +793,17 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-width: 120px;
+}
+@media (min-width: 782px) {
+  .edit-site-document-actions .edit-site-document-actions__title {
+    max-width: 75px;
+  }
+}
+@media (min-width: 1080px) {
+  .edit-site-document-actions .edit-site-document-actions__title {
+    max-width: 180px;
+  }
 }
 .edit-site-document-actions .edit-site-document-actions__secondary-item {
   white-space: nowrap;
@@ -882,10 +915,13 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
 .edit-site-navigation-toggle__button.has-icon:focus::before {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba(255, 255, 255, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
-
-.edit-site-navigation-toggle__site-icon {
+.edit-site-navigation-toggle__button .edit-site-navigation-toggle__site-icon {
   width: 36px;
+  height: 36px;
   border-radius: 2px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  margin-top: -1px;
 }
 
 .edit-site-navigation-panel {
@@ -1262,20 +1298,6 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin: 0;
 }
 
-.edit-site-global-styles-sidebar {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-.edit-site-global-styles-sidebar__panel, .edit-site-global-styles-sidebar__navigator-provider {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-.edit-site-global-styles-sidebar__navigator-screen {
-  flex: 1;
-}
-
 .edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
   margin-right: 0;
 }
@@ -1284,6 +1306,18 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin-right: auto;
 }
 
+.edit-site-global-styles-sidebar__border-controls-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+.edit-site-global-styles-sidebar__border-controls-row > * {
+  width: calc(50% - 8px);
+}
+.edit-site-global-styles-sidebar__border-controls-row .components-border-style-control__buttons {
+  margin-bottom: 0;
+}
+
 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
   font-size: 15.6px;
   font-weight: 500;
@@ -1298,10 +1332,6 @@ body.is-fullscreen-mode .edit-site-list-header {
   border: 0;
 }
 
-.edit-site-global-styles-sidebar .components-tools-panel-item.single-column {
-  grid-column: span 1;
-}
-
 .edit-site-global-styles-sidebar__blocks-group {
   padding-top: 24px;
   border-top: 1px solid #e0e0e0;

package/build-style/style.css

@@ -468,6 +468,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   border-radius: 2px;
 }
 
+.edit-site-visual-editor__editor-canvas {
+  border-radius: 2px 2px 0 0;
+}
+
 .edit-site-visual-editor__back-button {
   position: absolute;
   top: 8px;
@@ -488,24 +492,28 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   bottom: 0;
   padding: 0;
   margin: auto 0;
-  width: 4px;
+  width: 8px;
   height: 100px;
   -webkit-appearance: none;
           appearance: none;
-  cursor: ew-resize;
+  cursor: grab;
   outline: none;
-  background: #949494;
-  border-radius: 2px;
+  background: #757575;
+  border-radius: 4px;
   border: 0;
 }
 .resizable-editor__drag-handle.is-left {
-  left: -16px;
+  left: -28px;
 }
 .resizable-editor__drag-handle.is-right {
-  right: -16px;
+  right: -28px;
+}
+.resizable-editor__drag-handle:hover {
+  background: #949494;
 }
-.resizable-editor__drag-handle:hover, .resizable-editor__drag-handle:active {
-  background: #ccc;
+.resizable-editor__drag-handle:active {
+  cursor: grabbing;
+  background: #949494;
 }
 .resizable-editor__drag-handle:focus {
   box-shadow: 0 0 0 1px #2f2f2f, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
@@ -518,6 +526,14 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   min-height: 152px;
   line-height: 1;
 }
+.edit-site-global-styles-preview .component-color-indicator {
+  border-radius: 50%;
+  border: 0;
+  height: 36px;
+  width: 36px;
+  margin-left: 0;
+  padding: 0;
+}
 
 .edit-site-typography-panel__preview {
   display: flex;
@@ -547,6 +563,13 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin: 16px;
 }
 .edit-site-global-styles-screen-colors .component-color-indicator {
+  margin-left: 0;
+  display: block;
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  padding: 0;
+  border: 1px solid #ddd;
   background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
@@ -557,7 +580,8 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .edit-site-global-styles-subtitle {
   margin-bottom: 0 !important;
   text-transform: uppercase;
-  font-weight: 500;
+  font-weight: 500 !important;
+  font-size: 11px !important;
 }
 
 .edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle {
@@ -611,8 +635,6 @@ body.is-fullscreen-mode .edit-site-header {
   display: flex;
   align-items: center;
   height: 100%;
-  flex-grow: 1;
-  justify-content: center;
   min-width: 0;
 }
 .edit-site-header .edit-site-header_end {
@@ -690,6 +712,7 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
 .edit-site-header__actions {
   display: inline-flex;
   align-items: center;
+  flex-wrap: wrap;
   padding-right: 4px;
 }
 .edit-site-header__actions .interface-pinned-items {
@@ -744,7 +767,6 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 0 8px;
   height: 100%;
   min-width: 0;
 }
@@ -771,6 +793,17 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-width: 120px;
+}
+@media (min-width: 782px) {
+  .edit-site-document-actions .edit-site-document-actions__title {
+    max-width: 75px;
+  }
+}
+@media (min-width: 1080px) {
+  .edit-site-document-actions .edit-site-document-actions__title {
+    max-width: 180px;
+  }
 }
 .edit-site-document-actions .edit-site-document-actions__secondary-item {
   white-space: nowrap;
@@ -882,10 +915,13 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
 .edit-site-navigation-toggle__button.has-icon:focus::before {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba(255, 255, 255, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
-
-.edit-site-navigation-toggle__site-icon {
+.edit-site-navigation-toggle__button .edit-site-navigation-toggle__site-icon {
   width: 36px;
+  height: 36px;
   border-radius: 2px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  margin-top: -1px;
 }
 
 .edit-site-navigation-panel {
@@ -1262,20 +1298,6 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin: 0;
 }
 
-.edit-site-global-styles-sidebar {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-.edit-site-global-styles-sidebar__panel, .edit-site-global-styles-sidebar__navigator-provider {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-.edit-site-global-styles-sidebar__navigator-screen {
-  flex: 1;
-}
-
 .edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
   margin-left: 0;
 }
@@ -1284,6 +1306,18 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin-left: auto;
 }
 
+.edit-site-global-styles-sidebar__border-controls-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+.edit-site-global-styles-sidebar__border-controls-row > * {
+  width: calc(50% - 8px);
+}
+.edit-site-global-styles-sidebar__border-controls-row .components-border-style-control__buttons {
+  margin-bottom: 0;
+}
+
 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
   font-size: 15.6px;
   font-weight: 500;
@@ -1298,10 +1332,6 @@ body.is-fullscreen-mode .edit-site-list-header {
   border: 0;
 }
 
-.edit-site-global-styles-sidebar .components-tools-panel-item.single-column {
-  grid-column: span 1;
-}
-
 .edit-site-global-styles-sidebar__blocks-group {
   padding-top: 24px;
   border-top: 1px solid #e0e0e0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "3.0.18-next.33ec3857e2.0",
+	"version": "3.0.21",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,32 +27,32 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.2.5-next.33ec3857e2.0",
-		"@wordpress/api-fetch": "^5.2.7-next.33ec3857e2.0",
-		"@wordpress/block-editor": "^8.0.12-next.33ec3857e2.0",
-		"@wordpress/block-library": "^6.0.17-next.33ec3857e2.0",
-		"@wordpress/blocks": "^11.1.5-next.33ec3857e2.0",
-		"@wordpress/components": "^19.2.1-next.33ec3857e2.0",
-		"@wordpress/compose": "^5.0.7-next.33ec3857e2.0",
-		"@wordpress/core-data": "^4.0.10-next.33ec3857e2.0",
-		"@wordpress/data": "^6.1.6-next.33ec3857e2.0",
-		"@wordpress/data-controls": "^2.2.8-next.33ec3857e2.0",
-		"@wordpress/editor": "^12.0.15-next.33ec3857e2.0",
-		"@wordpress/element": "^4.0.6-next.33ec3857e2.0",
-		"@wordpress/hooks": "^3.2.3-next.33ec3857e2.0",
-		"@wordpress/html-entities": "^3.2.4-next.33ec3857e2.0",
-		"@wordpress/i18n": "^4.2.5-next.33ec3857e2.0",
-		"@wordpress/icons": "^6.1.2-next.33ec3857e2.0",
-		"@wordpress/interface": "^4.1.14-next.33ec3857e2.0",
-		"@wordpress/keyboard-shortcuts": "^3.0.7-next.33ec3857e2.0",
-		"@wordpress/keycodes": "^3.2.5-next.33ec3857e2.0",
-		"@wordpress/media-utils": "^3.0.6-next.33ec3857e2.0",
-		"@wordpress/notices": "^3.2.8-next.33ec3857e2.0",
-		"@wordpress/plugins": "^4.0.7-next.33ec3857e2.0",
-		"@wordpress/primitives": "^3.0.5-next.33ec3857e2.0",
-		"@wordpress/reusable-blocks": "^3.0.18-next.33ec3857e2.0",
-		"@wordpress/url": "^3.3.2-next.33ec3857e2.0",
-		"@wordpress/viewport": "^4.0.7-next.33ec3857e2.0",
+		"@wordpress/a11y": "^3.2.4",
+		"@wordpress/api-fetch": "^5.2.6",
+		"@wordpress/block-editor": "^8.0.14",
+		"@wordpress/block-library": "^6.0.19",
+		"@wordpress/blocks": "^11.1.5",
+		"@wordpress/components": "^19.2.1",
+		"@wordpress/compose": "^5.0.7",
+		"@wordpress/core-data": "^4.0.9",
+		"@wordpress/data": "^6.1.5",
+		"@wordpress/data-controls": "^2.2.8",
+		"@wordpress/editor": "^12.0.17",
+		"@wordpress/element": "^4.0.4",
+		"@wordpress/hooks": "^3.2.2",
+		"@wordpress/html-entities": "^3.2.3",
+		"@wordpress/i18n": "^4.2.4",
+		"@wordpress/icons": "^6.1.1",
+		"@wordpress/interface": "^4.1.16",
+		"@wordpress/keyboard-shortcuts": "^3.0.7",
+		"@wordpress/keycodes": "^3.2.4",
+		"@wordpress/media-utils": "^3.0.5",
+		"@wordpress/notices": "^3.2.8",
+		"@wordpress/plugins": "^4.0.7",
+		"@wordpress/primitives": "^3.0.4",
+		"@wordpress/reusable-blocks": "^3.0.20",
+		"@wordpress/url": "^3.3.1",
+		"@wordpress/viewport": "^4.0.7",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"file-saver": "^2.0.2",
@@ -64,5 +64,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "51c7917ea7fac72953702f24d6daac87d99e7617"
+	"gitHead": "04883dd8275ee52245a45c8899eb720b91055c50"
 }

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

@@ -17,6 +17,7 @@ import {
 	BlockTools,
 	__unstableBlockSettingsMenuFirstItem,
 	__unstableUseTypingObserver as useTypingObserver,
+	BlockEditorKeyboardShortcuts,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
@@ -108,8 +109,8 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 					}
 				} }
 			>
+				<BlockEditorKeyboardShortcuts.Register />
 				<BackButton />
-
 				<ResizableEditor
 					// Reinitialize the editor and reset the states when the template changes.
 					key={ templateId }
@@ -127,7 +128,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 						renderAppender={ isTemplatePart ? false : undefined }
 					/>
 				</ResizableEditor>
-
 				<__unstableBlockSettingsMenuFirstItem>
 					{ ( { onClose } ) => (
 						<BlockInspectorButton onClick={ onClose } />

package/src/components/block-editor/resizable-editor.js

@@ -57,22 +57,49 @@ function ResizableEditor( { enableResizing, settings, ...props } ) {
 				return;
 			}
 
-			const resizeObserver = new iframe.contentWindow.ResizeObserver(
-				() => {
-					setHeight(
-						iframe.contentDocument.querySelector(
-							`.edit-site-block-editor__block-list`
-						).offsetHeight
+			let animationFrame = null;
+
+			function resizeHeight() {
+				if ( ! animationFrame ) {
+					// Throttle the updates on animation frame.
+					animationFrame = iframe.contentWindow.requestAnimationFrame(
+						() => {
+							setHeight(
+								iframe.contentDocument.documentElement
+									.scrollHeight
+							);
+							animationFrame = null;
+						}
 					);
 				}
-			);
+			}
+
+			let resizeObserver;
+
+			function registerObserver() {
+				resizeObserver?.disconnect();
+
+				resizeObserver = new iframe.contentWindow.ResizeObserver(
+					resizeHeight
+				);
+				// Observing the <html> rather than the <body> because the latter
+				// gets destroyed and remounted after initialization in <Iframe>.
+				resizeObserver.observe(
+					iframe.contentDocument.documentElement
+				);
+
+				resizeHeight();
+			}
 
-			// Observing the <html> rather than the <body> because the latter
-			// gets destroyed and remounted after initialization in <Iframe>.
-			resizeObserver.observe( iframe.contentDocument.documentElement );
+			// This is only required in Firefox for some unknown reasons.
+			iframe.addEventListener( 'load', registerObserver );
+			// This is required in Chrome and Safari.
+			registerObserver();
 
 			return () => {
-				resizeObserver.disconnect();
+				iframe.contentWindow?.cancelAnimationFrame( animationFrame );
+				resizeObserver?.disconnect();
+				iframe.removeEventListener( 'load', registerObserver );
 			};
 		},
 		[ enableResizing ]
@@ -133,11 +160,23 @@ function ResizableEditor( { enableResizing, settings, ...props } ) {
 						<style>{
 							// Forming a "block formatting context" to prevent margin collapsing.
 							// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-							`.edit-site-block-editor__block-list { display: flow-root; }`
+							`.is-root-container { display: flow-root; }`
 						}</style>
+						{ enableResizing && (
+							<style>
+								{
+									// Force the <html> and <body>'s heights to fit the content.
+									`html, body { height: -moz-fit-content !important; height: fit-content !important; min-height: 0 !important; }`
+								}
+								{
+									// Some themes will have `min-height: 100vh` for the root container,
+									// which isn't a requirement in auto resize mode.
+									`.is-root-container { min-height: 0 !important; }`
+								}
+							</style>
+						) }
 					</>
 				}
-				assets={ settings.__unstableResolvedAssets }
 				ref={ ref }
 				name="editor-canvas"
 				className="edit-site-visual-editor__editor-canvas"

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

@@ -19,14 +19,18 @@
 	align-items: center;
 
 	&.is-focus-mode {
-		padding: $grid-unit-60;
+		padding: 48px;
 
 		.edit-site-visual-editor__editor-canvas {
-			border-radius: $radius-block-ui;
+			border-radius: 2px;
 		}
 	}
 }
 
+.edit-site-visual-editor__editor-canvas {
+	border-radius: 2px 2px 0 0;
+}
+
 .edit-site-visual-editor__back-button {
 	position: absolute;
 	top: $grid-unit-10;
@@ -51,26 +55,30 @@
 	bottom: 0;
 	padding: 0;
 	margin: auto 0;
-	width: $grid-unit-05;
+	width: $grid-unit-10;
 	height: $height;
 	appearance: none;
-	cursor: ew-resize;
+	cursor: grab;
 	outline: none;
-	background: $gray-600;
-	border-radius: 2px;
+	background: $gray-700;
+	border-radius: 4px;
 	border: 0;
 
 	&.is-left {
-		left: -$grid-unit-20;
+		left: #{-$grid-unit-30 - $grid-unit-05};
 	}
 
 	&.is-right {
-		right: -$grid-unit-20;
+		right: #{-$grid-unit-30 - $grid-unit-05};
+	}
+
+	&:hover {
+		background: $gray-600;
 	}
 
-	&:hover,
 	&:active {
-		background: $gray-400;
+		cursor: grabbing;
+		background: $gray-600;
 	}
 
 	&:focus {