@wordpress/edit-site 4.11.0 → 4.13.0

package/build-style/style.css

@@ -722,6 +722,12 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   border-radius: 2px;
 }
 
+.edit-site-typography-panel__full-width-control {
+  grid-column: 1/-1;
+  max-width: 100%;
+}
+
+.edit-site-global-styles-screen-heading-color,
 .edit-site-global-styles-screen-typography {
   margin: 16px;
 }
@@ -741,6 +747,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 }
 .edit-site-global-styles-screen-colors .component-color-indicator {
   background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+  flex-shrink: 0;
 }
 
 .edit-site-global-styles-header__description,
@@ -770,10 +777,6 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   padding: 16px;
 }
 
-.edit-site-screen-background-color__control .block-editor-color-gradient-control__tab-panel {
-  padding: 16px;
-}
-
 .edit-site-global-styles-variations_item {
   box-sizing: border-box;
 }
@@ -798,6 +801,13 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 
 .edit-site-global-styles__color-indicator-wrapper {
   height: 24px;
+  flex-shrink: 0;
+}
+
+.edit-site-global-styles__color-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .edit-site-header {
@@ -1892,6 +1902,7 @@ html.wp-toolbar {
   position: relative;
   height: 100%;
   display: block;
+  overflow: hidden;
 }
 .edit-site-visual-editor iframe {
   display: block;
@@ -1953,11 +1964,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-template-details .edit-site-template-details__group + .edit-site-template-details__group {
   border-top: 1px solid #ccc;
 }
-.edit-site-template-details .edit-site-template-details__title {
-  margin: 0;
-}
 .edit-site-template-details .edit-site-template-details__description {
-  margin: 12px 0 0;
   color: #757575;
 }
 .edit-site-template-details .edit-site-template-details__group.edit-site-template-details__template-areas {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.11.0",
+	"version": "4.13.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,33 +27,33 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.14.0",
-		"@wordpress/api-fetch": "^6.11.0",
-		"@wordpress/block-editor": "^9.6.0",
-		"@wordpress/block-library": "^7.11.0",
-		"@wordpress/blocks": "^11.13.0",
-		"@wordpress/components": "^19.16.0",
-		"@wordpress/compose": "^5.12.0",
-		"@wordpress/core-data": "^4.12.0",
-		"@wordpress/data": "^6.14.0",
-		"@wordpress/deprecated": "^3.14.0",
-		"@wordpress/editor": "^12.13.0",
-		"@wordpress/element": "^4.12.0",
-		"@wordpress/hooks": "^3.14.0",
-		"@wordpress/html-entities": "^3.14.0",
-		"@wordpress/i18n": "^4.14.0",
-		"@wordpress/icons": "^9.5.0",
-		"@wordpress/interface": "^4.13.0",
-		"@wordpress/keyboard-shortcuts": "^3.12.0",
-		"@wordpress/keycodes": "^3.14.0",
-		"@wordpress/media-utils": "^4.5.0",
-		"@wordpress/notices": "^3.14.0",
-		"@wordpress/plugins": "^4.12.0",
-		"@wordpress/preferences": "^2.6.0",
-		"@wordpress/reusable-blocks": "^3.12.0",
-		"@wordpress/style-engine": "^0.13.0",
-		"@wordpress/url": "^3.15.0",
-		"@wordpress/viewport": "^4.12.0",
+		"@wordpress/a11y": "^3.16.0",
+		"@wordpress/api-fetch": "^6.13.0",
+		"@wordpress/block-editor": "^9.8.0",
+		"@wordpress/block-library": "^7.13.0",
+		"@wordpress/blocks": "^11.15.0",
+		"@wordpress/components": "^20.0.0",
+		"@wordpress/compose": "^5.14.0",
+		"@wordpress/core-data": "^4.14.0",
+		"@wordpress/data": "^7.0.0",
+		"@wordpress/deprecated": "^3.16.0",
+		"@wordpress/editor": "^12.15.0",
+		"@wordpress/element": "^4.14.0",
+		"@wordpress/hooks": "^3.16.0",
+		"@wordpress/html-entities": "^3.16.0",
+		"@wordpress/i18n": "^4.16.0",
+		"@wordpress/icons": "^9.7.0",
+		"@wordpress/interface": "^4.15.0",
+		"@wordpress/keyboard-shortcuts": "^3.14.0",
+		"@wordpress/keycodes": "^3.16.0",
+		"@wordpress/media-utils": "^4.7.0",
+		"@wordpress/notices": "^3.16.0",
+		"@wordpress/plugins": "^4.14.0",
+		"@wordpress/preferences": "^2.8.0",
+		"@wordpress/reusable-blocks": "^3.14.0",
+		"@wordpress/style-engine": "^0.15.0",
+		"@wordpress/url": "^3.17.0",
+		"@wordpress/viewport": "^4.14.0",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "0315dbc240cb2aa146d7c1bafd251f004b88300e"
+	"gitHead": "171b87c7465b93e685e081c5f57f153507363c95"
 }

package/src/components/add-new-template/add-custom-template-modal.js

@@ -192,9 +192,18 @@ function AddCustomTemplateModal( { onClose, onSelect, entityForSuggestions } ) {
 							isBlock
 							as={ Button }
 							onClick={ () => {
-								const { slug, title, description } =
-									entityForSuggestions.template;
-								onSelect( { slug, title, description } );
+								const {
+									slug,
+									title,
+									description,
+									templatePrefix,
+								} = entityForSuggestions.template;
+								onSelect( {
+									slug,
+									title,
+									description,
+									templatePrefix,
+								} );
 							} }
 						>
 							<Text as="span" weight={ 600 }>

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

@@ -1,6 +1,8 @@
 /**
  * WordPress dependencies
  */
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
 import {
 	DropdownMenu,
 	MenuGroup,
@@ -26,7 +28,7 @@ import {
 	tag,
 	layout as customGenericTemplateIcon,
 } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -38,6 +40,7 @@ import {
 	useDefaultTemplateTypes,
 	useTaxonomiesMenuItems,
 	usePostTypeMenuItems,
+	useAuthorMenuItem,
 } from './utils';
 import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
 import { useHistory } from '../routes';
@@ -85,12 +88,25 @@ export default function NewTemplate( { postType } ) {
 
 	const history = useHistory();
 	const { saveEntityRecord } = useDispatch( coreStore );
-	const { createErrorNotice } = useDispatch( noticesStore );
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
 	const { setTemplate } = useDispatch( editSiteStore );
 
 	async function createTemplate( template, isWPSuggestion = true ) {
 		try {
-			const { title, description, slug } = template;
+			const { title, description, slug, templatePrefix } = template;
+			let templateContent = template.content;
+			// Try to find fallback content from existing templates.
+			if ( ! templateContent ) {
+				const fallbackTemplate = await apiFetch( {
+					path: addQueryArgs( '/wp/v2/templates/lookup', {
+						slug,
+						is_custom: ! isWPSuggestion,
+						template_prefix: templatePrefix,
+					} ),
+				} );
+				templateContent = fallbackTemplate.content;
+			}
 			const newTemplate = await saveEntityRecord(
 				'postType',
 				'wp_template',
@@ -100,6 +116,7 @@ export default function NewTemplate( { postType } ) {
 					slug: slug.toString(),
 					status: 'publish',
 					title,
+					content: templateContent,
 					// This adds a post meta field in template that is part of `is_custom` value calculation.
 					is_wp_suggestion: isWPSuggestion,
 				},
@@ -114,8 +131,16 @@ export default function NewTemplate( { postType } ) {
 				postId: newTemplate.id,
 				postType: newTemplate.type,
 			} );
-
-			// TODO: Add a success notice?
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: Title of the created template e.g: "Category".
+					__( '"%s" successfully created.' ),
+					title
+				),
+				{
+					type: 'snackbar',
+				}
+			);
 		} catch ( error ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
@@ -243,26 +268,30 @@ function useMissingTemplates(
 		useTaxonomiesMenuItems( onClickMenuItem );
 	const { defaultPostTypesMenuItems, postTypesMenuItems } =
 		usePostTypeMenuItems( onClickMenuItem );
-	[ ...defaultTaxonomiesMenuItems, ...defaultPostTypesMenuItems ].forEach(
-		( menuItem ) => {
-			if ( ! menuItem ) {
-				return;
-			}
-			const matchIndex = enhancedMissingDefaultTemplateTypes.findIndex(
-				( template ) => template.slug === menuItem.slug
-			);
-			// Some default template types might have been filtered above from
-			// `missingDefaultTemplates` because they only check for the general
-			// template. So here we either replace or append the item, augmented
-			// with the check if it has available specific item to create a
-			// template for.
-			if ( matchIndex > -1 ) {
-				enhancedMissingDefaultTemplateTypes[ matchIndex ] = menuItem;
-			} else {
-				enhancedMissingDefaultTemplateTypes.push( menuItem );
-			}
+
+	const authorMenuItem = useAuthorMenuItem( onClickMenuItem );
+	[
+		...defaultTaxonomiesMenuItems,
+		...defaultPostTypesMenuItems,
+		authorMenuItem,
+	].forEach( ( menuItem ) => {
+		if ( ! menuItem ) {
+			return;
 		}
-	);
+		const matchIndex = enhancedMissingDefaultTemplateTypes.findIndex(
+			( template ) => template.slug === menuItem.slug
+		);
+		// Some default template types might have been filtered above from
+		// `missingDefaultTemplates` because they only check for the general
+		// template. So here we either replace or append the item, augmented
+		// with the check if it has available specific item to create a
+		// template for.
+		if ( matchIndex > -1 ) {
+			enhancedMissingDefaultTemplateTypes[ matchIndex ] = menuItem;
+		} else {
+			enhancedMissingDefaultTemplateTypes.push( menuItem );
+		}
+	} );
 	// Update the sort order to match the DEFAULT_TEMPLATE_SLUGS order.
 	enhancedMissingDefaultTemplateTypes?.sort( ( template1, template2 ) => {
 		return (

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

@@ -10,7 +10,7 @@ import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { blockMeta, post } from '@wordpress/icons';
 
@@ -152,7 +152,10 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 				);
 			}
 			const menuItem = defaultTemplateType
-				? { ...defaultTemplateType }
+				? {
+						...defaultTemplateType,
+						templatePrefix: templatePrefixes[ slug ],
+				  }
 				: {
 						slug: generalTemplateSlug,
 						title: menuItemTitle,
@@ -167,6 +170,7 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 						icon: icon?.startsWith( 'dashicons-' )
 							? icon.slice( 10 )
 							: post,
+						templatePrefix: templatePrefixes[ slug ],
 				  };
 			const hasEntities = postTypesInfo?.[ slug ]?.hasEntities;
 			// We have a different template creation flow only if they have entities.
@@ -201,15 +205,16 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 								if ( _needsUniqueIdentifier ) {
 									title = sprintf(
 										// translators: Represents the title of a user's custom template in the Site Editor, where %1$s is the template title and %2$s is the slug of the post type, e.g. "Project: Hello (project_type)"
-										__( '%1$s %2$s' ),
+										__( '%1$s (%2$s)' ),
 										title,
-										`(${ slug })`
+										slug
 									);
 								}
 								return {
 									title,
 									description,
 									slug: `${ templatePrefixes[ slug ] }-${ suggestion.slug }`,
+									templatePrefix: templatePrefixes[ slug ],
 								};
 							},
 						},
@@ -317,7 +322,10 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 				);
 			}
 			const menuItem = defaultTemplateType
-				? { ...defaultTemplateType }
+				? {
+						...defaultTemplateType,
+						templatePrefix: templatePrefixes[ slug ],
+				  }
 				: {
 						slug: generalTemplateSlug,
 						title: menuItemTitle,
@@ -327,6 +335,7 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 							labels.singular_name
 						),
 						icon: blockMeta,
+						templatePrefix: templatePrefixes[ slug ],
 				  };
 			const hasEntities = taxonomiesInfo?.[ slug ]?.hasEntities;
 			// We have a different template creation flow only if they have entities.
@@ -360,15 +369,16 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 								if ( _needsUniqueIdentifier ) {
 									title = sprintf(
 										// translators: Represents the title of a user's custom template in the Site Editor, where %1$s is the template title and %2$s is the slug of the taxonomy, e.g. "Category: shoes (product_tag)"
-										__( '%1$s %2$s' ),
+										__( '%1$s (%2$s)' ),
 										title,
-										`(${ slug })`
+										slug
 									);
 								}
 								return {
 									title,
 									description,
 									slug: `${ templatePrefixes[ slug ] }-${ suggestion.slug }`,
+									templatePrefix: templatePrefixes[ slug ],
 								};
 							},
 						},
@@ -408,14 +418,120 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 	return taxonomiesMenuItems;
 };
 
+function useAuthorNeedsUniqueIndentifier() {
+	const authors = useSelect(
+		( select ) =>
+			select( coreStore ).getUsers( { who: 'authors', per_page: -1 } ),
+		[]
+	);
+	const authorsCountByName = useMemo( () => {
+		return ( authors || [] ).reduce( ( authorsCount, { name } ) => {
+			authorsCount[ name ] = ( authorsCount[ name ] || 0 ) + 1;
+			return authorsCount;
+		}, {} );
+	}, [ authors ] );
+	return useCallback(
+		( name ) => {
+			return authorsCountByName[ name ] > 1;
+		},
+		[ authorsCountByName ]
+	);
+}
+
+const USE_AUTHOR_MENU_ITEM_TEMPLATE_PREFIX = { user: 'author' };
+const USE_AUTHOR_MENU_ITEM_QUERY_PARAMETERS = { user: { who: 'authors' } };
+export function useAuthorMenuItem( onClickMenuItem ) {
+	const existingTemplates = useExistingTemplates();
+	const defaultTemplateTypes = useDefaultTemplateTypes();
+	const authorInfo = useEntitiesInfo(
+		'root',
+		USE_AUTHOR_MENU_ITEM_TEMPLATE_PREFIX,
+		USE_AUTHOR_MENU_ITEM_QUERY_PARAMETERS
+	);
+	const authorNeedsUniqueId = useAuthorNeedsUniqueIndentifier();
+	let authorMenuItem = defaultTemplateTypes?.find(
+		( { slug } ) => slug === 'author'
+	);
+	if ( ! authorMenuItem ) {
+		authorMenuItem = {
+			description: __(
+				'Displays latest posts written by a single author.'
+			),
+			slug: 'author',
+			title: 'Author',
+		};
+	}
+	const hasGeneralTemplate = !! existingTemplates?.find(
+		( { slug } ) => slug === 'author'
+	);
+	if ( authorInfo.user?.hasEntities ) {
+		authorMenuItem = { ...authorMenuItem, templatePrefix: 'author' };
+		authorMenuItem.onClick = ( template ) => {
+			onClickMenuItem( {
+				type: 'root',
+				slug: 'user',
+				config: {
+					queryArgs: ( { search } ) => {
+						return {
+							_fields: 'id,name,slug,link',
+							orderBy: search ? 'name' : 'registered_date',
+							exclude: authorInfo.user.existingEntitiesIds,
+							who: 'authors',
+						};
+					},
+					getSpecificTemplate: ( suggestion ) => {
+						const needsUniqueId = authorNeedsUniqueId(
+							suggestion.name
+						);
+						const title = needsUniqueId
+							? sprintf(
+									// translators: %1$s: Represents the name of an author e.g: "Jorge", %2$s: Represents the slug of an author e.g: "author-jorge-slug".
+									__( 'Author: %1$s (%2$s)' ),
+									suggestion.name,
+									suggestion.slug
+							  )
+							: sprintf(
+									// translators: %s: Represents the name of an author e.g: "Jorge".
+									__( 'Author: %s' ),
+									suggestion.name
+							  );
+						const description = sprintf(
+							// translators: %s: Represents the name of an author e.g: "Jorge".
+							__( 'Template for Author: %s' ),
+							suggestion.name
+						);
+						return {
+							title,
+							description,
+							slug: `author-${ suggestion.slug }`,
+							templatePrefix: 'author',
+						};
+					},
+				},
+				labels: {
+					singular_name: __( 'Author' ),
+					search_items: __( 'Search Authors' ),
+					not_found: __( 'No authors found.' ),
+					all_items: __( 'All Authors' ),
+				},
+				hasGeneralTemplate,
+				template,
+			} );
+		};
+	}
+	if ( ! hasGeneralTemplate || authorInfo.user?.hasEntities ) {
+		return authorMenuItem;
+	}
+}
+
 /**
  * Helper hook that filters all the existing templates by the given
  * object with the entity's slug as key and the template prefix as value.
  *
  * Example:
- * `existingTemplates` is: [ { slug: tag-apple }, { slug: page-about }, { slug: tag } ]
+ * `existingTemplates` is: [ { slug: 'tag-apple' }, { slug: 'page-about' }, { slug: 'tag' } ]
  * `templatePrefixes` is: { post_tag: 'tag' }
- * It will return: { post_tag: [apple] }
+ * It will return: { post_tag: ['apple'] }
  *
  * Note: We append the `-` to the given template prefix in this function for our checks.
  *
@@ -456,11 +572,16 @@ const useExistingTemplateSlugs = ( templatePrefixes ) => {
  * Helper hook that finds the existing records with an associated template,
  * as they need to be excluded from the template suggestions.
  *
- * @param {string}                entityName       The entity's name.
- * @param {Record<string,string>} templatePrefixes An object with the entity's slug as key and the template prefix as value.
+ * @param {string}                entityName                The entity's name.
+ * @param {Record<string,string>} templatePrefixes          An object with the entity's slug as key and the template prefix as value.
+ * @param {Record<string,Object>} additionalQueryParameters An object with the entity's slug as key and additional query parameters as value.
  * @return {Record<string,EntitiesInfo>} An object with the entity's slug as key and the existing records as value.
  */
-const useTemplatesToExclude = ( entityName, templatePrefixes ) => {
+const useTemplatesToExclude = (
+	entityName,
+	templatePrefixes,
+	additionalQueryParameters = {}
+) => {
 	const slugsToExcludePerEntity =
 		useExistingTemplateSlugs( templatePrefixes );
 	const recordsToExcludePerEntity = useSelect(
@@ -473,6 +594,7 @@ const useTemplatesToExclude = ( entityName, templatePrefixes ) => {
 						_fields: 'id',
 						context: 'view',
 						slug: slugsWithTemplates,
+						...additionalQueryParameters[ slug ],
 					} );
 					if ( entitiesWithTemplates?.length ) {
 						accumulator[ slug ] = entitiesWithTemplates;
@@ -497,14 +619,20 @@ const useTemplatesToExclude = ( entityName, templatePrefixes ) => {
  * First we need to find the existing records with an associated template,
  * to query afterwards for any remaining record, by excluding them.
  *
- * @param {string}                entityName       The entity's name.
- * @param {Record<string,string>} templatePrefixes An object with the entity's slug as key and the template prefix as value.
+ * @param {string}                entityName                The entity's name.
+ * @param {Record<string,string>} templatePrefixes          An object with the entity's slug as key and the template prefix as value.
+ * @param {Record<string,Object>} additionalQueryParameters An object with the entity's slug as key and additional query parameters as value.
  * @return {Record<string,EntitiesInfo>} An object with the entity's slug as key and the EntitiesInfo as value.
  */
-const useEntitiesInfo = ( entityName, templatePrefixes ) => {
+const useEntitiesInfo = (
+	entityName,
+	templatePrefixes,
+	additionalQueryParameters = {}
+) => {
 	const recordsToExcludePerEntity = useTemplatesToExclude(
 		entityName,
-		templatePrefixes
+		templatePrefixes,
+		additionalQueryParameters
 	);
 	const entitiesInfo = useSelect(
 		( select ) => {
@@ -523,6 +651,7 @@ const useEntitiesInfo = ( entityName, templatePrefixes ) => {
 								_fields: 'id',
 								context: 'view',
 								exclude: existingEntitiesIds,
+								...additionalQueryParameters[ slug ],
 							}
 						)?.length,
 						existingEntitiesIds,

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

@@ -57,20 +57,31 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 				return;
 			}
 
-			let animationFrame = null;
+			let timeoutId = null;
 
 			function resizeHeight() {
-				if ( ! animationFrame ) {
-					// Throttle the updates on animation frame.
-					animationFrame = iframe.contentWindow.requestAnimationFrame(
-						() => {
-							setHeight(
-								iframe.contentDocument.documentElement
-									.scrollHeight
-							);
-							animationFrame = null;
+				if ( ! timeoutId ) {
+					// Throttle the updates on timeout. This code previously
+					// used `requestAnimationFrame`, but that seems to not
+					// always work before an iframe is ready.
+					timeoutId = iframe.contentWindow.setTimeout( () => {
+						const { readyState } = iframe.contentDocument;
+
+						// Continue deferring the timeout until the document is ready.
+						// Only then will it have a height.
+						if (
+							readyState !== 'interactive' &&
+							readyState !== 'complete'
+						) {
+							resizeHeight();
+							return;
 						}
-					);
+
+						setHeight( iframe.contentDocument.body.scrollHeight );
+						timeoutId = null;
+
+						// 30 frames per second.
+					}, 1000 / 30 );
 				}
 			}
 
@@ -82,11 +93,10 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 				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
-				);
+
+				// Observe the body, since the `html` element seems to always
+				// have a height of `100%`.
+				resizeObserver.observe( iframe.contentDocument.body );
 
 				resizeHeight();
 			}
@@ -97,7 +107,7 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 			registerObserver();
 
 			return () => {
-				iframe.contentWindow?.cancelAnimationFrame( animationFrame );
+				iframe.contentWindow?.clearTimeout( timeoutId );
 				resizeObserver?.disconnect();
 				iframe.removeEventListener( 'load', registerObserver );
 			};
@@ -153,7 +163,7 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 			} }
 		>
 			<Iframe
-				style={ enableResizing ? undefined : deviceStyles }
+				style={ enableResizing ? { height } : deviceStyles }
 				head={
 					<>
 						<EditorStyles styles={ settings.styles } />

package/src/components/editor/style.scss

@@ -32,6 +32,7 @@ html.wp-toolbar {
 	position: relative;
 	height: 100%;
 	display: block;
+	overflow: hidden;
 
 	iframe {
 		display: block;

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

@@ -179,11 +179,11 @@ export default function BorderPanel( { name } ) {
 					<BorderBoxControl
 						colors={ colors }
 						enableAlpha={ true }
+						enableStyle={ showBorderStyle }
 						onChange={ onBorderChange }
-						showStyle={ showBorderStyle }
-						value={ border }
-						popoverPlacement="left-start"
 						popoverOffset={ 40 }
+						popoverPlacement="left-start"
+						value={ border }
 						__experimentalHasMultipleOrigins={ true }
 						__experimentalIsRenderedInSidebar={ true }
 					/>