@wordpress/edit-site 4.15.1-next.4d3b314fd5.0 → 4.16.0

package/build-style/style.css

@@ -707,7 +707,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   display: block;
 }
 
-.edit-site-typography-panel__preview {
+.edit-site-typography-preview {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -787,7 +787,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   border: var(--wp-admin-theme-color) 1px solid;
 }
 .edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview {
-  border: var(--wp-admin-theme-color) 1px solid;
+  border: var(--wp-admin-theme-color) var(--wp-admin-border-width-focus) solid;
 }
 
 .edit-site-global-styles-icon-with-current-color {
@@ -1690,7 +1690,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   border: 0;
 }
 
-.edit-site-global-styles-sidebar .components-tools-panel-item.single-column {
+.edit-site-global-styles-sidebar .single-column {
   grid-column: span 1;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.15.1-next.4d3b314fd5.0",
+	"version": "4.16.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.18.1-next.4d3b314fd5.0",
-		"@wordpress/api-fetch": "^6.15.1-next.4d3b314fd5.0",
-		"@wordpress/block-editor": "^10.1.1-next.4d3b314fd5.0",
-		"@wordpress/block-library": "^7.15.1-next.4d3b314fd5.0",
-		"@wordpress/blocks": "^11.18.1-next.4d3b314fd5.0",
-		"@wordpress/components": "^21.1.2-next.4d3b314fd5.0",
-		"@wordpress/compose": "^5.16.1-next.4d3b314fd5.0",
-		"@wordpress/core-data": "^5.1.1-next.4d3b314fd5.0",
-		"@wordpress/data": "^7.2.1-next.4d3b314fd5.0",
-		"@wordpress/deprecated": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/editor": "^12.17.1-next.4d3b314fd5.0",
-		"@wordpress/element": "^4.16.1-next.4d3b314fd5.0",
-		"@wordpress/hooks": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/html-entities": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/i18n": "^4.18.1-next.4d3b314fd5.0",
-		"@wordpress/icons": "^9.9.1-next.4d3b314fd5.0",
-		"@wordpress/interface": "^4.17.1-next.4d3b314fd5.0",
-		"@wordpress/keyboard-shortcuts": "^3.16.1-next.4d3b314fd5.0",
-		"@wordpress/keycodes": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/media-utils": "^4.9.1-next.4d3b314fd5.0",
-		"@wordpress/notices": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/plugins": "^4.16.1-next.4d3b314fd5.0",
-		"@wordpress/preferences": "^2.10.1-next.4d3b314fd5.0",
-		"@wordpress/reusable-blocks": "^3.16.1-next.4d3b314fd5.0",
-		"@wordpress/style-engine": "^1.1.1-next.4d3b314fd5.0",
-		"@wordpress/url": "^3.19.1-next.4d3b314fd5.0",
-		"@wordpress/viewport": "^4.16.1-next.4d3b314fd5.0",
+		"@wordpress/a11y": "^3.19.0",
+		"@wordpress/api-fetch": "^6.16.0",
+		"@wordpress/block-editor": "^10.2.0",
+		"@wordpress/block-library": "^7.16.0",
+		"@wordpress/blocks": "^11.18.0",
+		"@wordpress/components": "^21.2.0",
+		"@wordpress/compose": "^5.17.0",
+		"@wordpress/core-data": "^5.2.0",
+		"@wordpress/data": "^7.3.0",
+		"@wordpress/deprecated": "^3.19.0",
+		"@wordpress/editor": "^12.18.0",
+		"@wordpress/element": "^4.17.0",
+		"@wordpress/hooks": "^3.19.0",
+		"@wordpress/html-entities": "^3.19.0",
+		"@wordpress/i18n": "^4.19.0",
+		"@wordpress/icons": "^9.10.0",
+		"@wordpress/interface": "^4.18.0",
+		"@wordpress/keyboard-shortcuts": "^3.17.0",
+		"@wordpress/keycodes": "^3.19.0",
+		"@wordpress/media-utils": "^4.10.0",
+		"@wordpress/notices": "^3.19.0",
+		"@wordpress/plugins": "^4.17.0",
+		"@wordpress/preferences": "^2.11.0",
+		"@wordpress/reusable-blocks": "^3.17.0",
+		"@wordpress/style-engine": "^1.2.0",
+		"@wordpress/url": "^3.20.0",
+		"@wordpress/viewport": "^4.17.0",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "25054766423cb49d959eb656c2533530073ff5c2"
+	"gitHead": "8d42d2febb7d0ba8372a33e560a62f5a5f6a9112"
 }

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

@@ -57,38 +57,14 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 
 	useEffect(
 		function autoResizeIframeHeight() {
-			const iframe = iframeRef.current;
-
-			if ( ! iframe || ! enableResizing ) {
+			if ( ! iframeRef.current || ! enableResizing ) {
 				return;
 			}
 
-			let timeoutId = null;
-
-			function resizeHeight() {
-				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 );
-				}
+			const iframe = iframeRef.current;
+
+			function setFrameHeight() {
+				setHeight( iframe.contentDocument.body.scrollHeight );
 			}
 
 			let resizeObserver;
@@ -97,28 +73,23 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 				resizeObserver?.disconnect();
 
 				resizeObserver = new iframe.contentWindow.ResizeObserver(
-					resizeHeight
+					setFrameHeight
 				);
 
 				// Observe the body, since the `html` element seems to always
 				// have a height of `100%`.
 				resizeObserver.observe( iframe.contentDocument.body );
-
-				resizeHeight();
+				setFrameHeight();
 			}
 
-			// This is only required in Firefox for some unknown reasons.
 			iframe.addEventListener( 'load', registerObserver );
-			// This is required in Chrome and Safari.
-			registerObserver();
 
 			return () => {
-				iframe.contentWindow?.clearTimeout( timeoutId );
 				resizeObserver?.disconnect();
 				iframe.removeEventListener( 'load', registerObserver );
 			};
 		},
-		[ enableResizing ]
+		[ enableResizing, iframeRef.current ]
 	);
 
 	const resizeWidthBy = useCallback( ( deltaPixels ) => {

package/src/components/global-styles/preview.js

@@ -79,13 +79,13 @@ const StylesPreview = ( { label, isFocused } ) => {
 		)
 		.slice( 0, 2 );
 
-	// Reset leaked styles from WP common.css and remove main content layout padding.
+	// Reset leaked styles from WP common.css and remove main content layout padding and border.
 	const editorStyles = useMemo( () => {
 		if ( styles ) {
 			return [
 				...styles,
 				{
-					css: 'body{min-width: 0;padding: 0;}',
+					css: 'body{min-width: 0;padding: 0;border: none;}',
 					isGlobalStyles: true,
 				},
 			];

package/src/components/global-styles/screen-typography-element.js

@@ -2,12 +2,19 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import TypographyPanel from './typography-panel';
 import ScreenHeader from './header';
+import TypographyPreview from './typography-preview';
 
 const elements = {
 	text: {
@@ -29,13 +36,70 @@ const elements = {
 };
 
 function ScreenTypographyElement( { name, element } ) {
+	const [ headingLevel, setHeadingLevel ] = useState( 'heading' );
+
 	return (
 		<>
 			<ScreenHeader
 				title={ elements[ element ].title }
 				description={ elements[ element ].description }
 			/>
-			<TypographyPanel name={ name } element={ element } />
+			<Spacer marginX={ 4 }>
+				<TypographyPreview
+					name={ name }
+					element={ element }
+					headingLevel={ headingLevel }
+				/>
+			</Spacer>
+			{ element === 'heading' && (
+				<Spacer marginX={ 4 } marginBottom="1em">
+					<ToggleGroupControl
+						label={ __( 'Select heading level' ) }
+						hideLabelFromVision
+						value={ headingLevel }
+						onChange={ setHeadingLevel }
+						isBlock
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					>
+						<ToggleGroupControlOption
+							value="heading"
+							/* translators: 'All' refers to selecting all heading levels 
+							and applying the same style to h1-h6. */
+							label={ __( 'All' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h1"
+							label={ __( 'H1' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h2"
+							label={ __( 'H2' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h3"
+							label={ __( 'H3' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h4"
+							label={ __( 'H4' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h5"
+							label={ __( 'H5' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h6"
+							label={ __( 'H6' ) }
+						/>
+					</ToggleGroupControl>
+				</Spacer>
+			) }
+			<TypographyPanel
+				name={ name }
+				element={ element }
+				headingLevel={ headingLevel }
+			/>
 		</>
 	);
 }

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

@@ -11,7 +11,7 @@
 	display: block;
 }
 
-.edit-site-typography-panel__preview {
+.edit-site-typography-preview {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -97,7 +97,7 @@
 	}
 
 	&:focus .edit-site-global-styles-variations_item-preview {
-		border: var(--wp-admin-theme-color) $border-width solid;
+		border: var(--wp-admin-theme-color) var(--wp-admin-border-width-focus) solid;
 	}
 }