@wordpress/block-editor 10.5.0 → 11.1.0

package/src/components/height-control/index.js

@@ -0,0 +1,123 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import {
+	BaseControl,
+	RangeControl,
+	Flex,
+	FlexItem,
+	__experimentalSpacer as Spacer,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalUnitControl as UnitControl,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../use-setting';
+
+const RANGE_CONTROL_CUSTOM_SETTINGS = {
+	px: { max: 1000, step: 1 },
+	'%': { max: 100, step: 1 },
+	vw: { max: 100, step: 1 },
+	vh: { max: 100, step: 1 },
+	em: { max: 50, step: 0.1 },
+	rem: { max: 50, step: 0.1 },
+};
+
+export default function HeightControl( {
+	onChange,
+	label = __( 'Height' ),
+	value,
+} ) {
+	const customRangeValue = parseFloat( value );
+
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units' ) || [
+			'%',
+			'px',
+			'em',
+			'rem',
+			'vh',
+			'vw',
+		],
+	} );
+
+	const selectedUnit =
+		useMemo(
+			() => parseQuantityAndUnitFromRawValue( value ),
+			[ value ]
+		)[ 1 ] ||
+		units[ 0 ]?.value ||
+		'px';
+
+	const handleSliderChange = ( next ) => {
+		onChange( [ next, selectedUnit ].join( '' ) );
+	};
+
+	const handleUnitChange = ( newUnit ) => {
+		// Attempt to smooth over differences between currentUnit and newUnit.
+		// This should slightly improve the experience of switching between unit types.
+		const [ currentValue, currentUnit ] =
+			parseQuantityAndUnitFromRawValue( value );
+
+		if ( [ 'em', 'rem' ].includes( newUnit ) && currentUnit === 'px' ) {
+			// Convert pixel value to an approximate of the new unit, assuming a root size of 16px.
+			onChange( ( currentValue / 16 ).toFixed( 2 ) + newUnit );
+		} else if (
+			[ 'em', 'rem' ].includes( currentUnit ) &&
+			newUnit === 'px'
+		) {
+			// Convert to pixel value assuming a root size of 16px.
+			onChange( Math.round( currentValue * 16 ) + newUnit );
+		} else if (
+			[ 'vh', 'vw', '%' ].includes( newUnit ) &&
+			currentValue > 100
+		) {
+			// When converting to `vh`, `vw`, or `%` units, cap the new value at 100.
+			onChange( 100 + newUnit );
+		}
+	};
+
+	return (
+		<fieldset className="block-editor-height-control">
+			<BaseControl.VisualLabel as="legend">
+				{ label }
+			</BaseControl.VisualLabel>
+			<Flex>
+				<FlexItem isBlock>
+					<UnitControl
+						value={ value }
+						units={ units }
+						onChange={ onChange }
+						onUnitChange={ handleUnitChange }
+						min={ 0 }
+						size={ '__unstable-large' }
+					/>
+				</FlexItem>
+				<FlexItem isBlock>
+					<Spacer marginX={ 2 } marginBottom={ 0 }>
+						<RangeControl
+							value={ customRangeValue }
+							min={ 0 }
+							max={
+								RANGE_CONTROL_CUSTOM_SETTINGS[ selectedUnit ]
+									?.max ?? 100
+							}
+							step={
+								RANGE_CONTROL_CUSTOM_SETTINGS[ selectedUnit ]
+									?.step ?? 0.1
+							}
+							withInputField={ false }
+							onChange={ handleSliderChange }
+							__nextHasNoMarginBottom
+						/>
+					</Spacer>
+				</FlexItem>
+			</Flex>
+		</fieldset>
+	);
+}

package/src/components/height-control/stories/index.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import HeightControl from '../';
+
+export default {
+	component: HeightControl,
+	title: 'BlockEditor/HeightControl',
+};
+
+const Template = ( props ) => {
+	const [ value, setValue ] = useState();
+	return <HeightControl onChange={ setValue } value={ value } { ...props } />;
+};
+
+export const Default = Template.bind( {} );

package/src/components/height-control/style.scss

@@ -0,0 +1,5 @@
+.block-editor-height-control {
+	border: 0;
+	margin: 0;
+	padding: 0;
+}

package/src/components/iframe/index.js

@@ -26,97 +26,7 @@ import { __experimentalStyleProvider as StyleProvider } from '@wordpress/compone
  */
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useWritingFlow } from '../writing-flow';
-
-const BODY_CLASS_NAME = 'editor-styles-wrapper';
-const BLOCK_PREFIX = 'wp-block';
-
-/**
- * Clones stylesheets targetting the editor canvas to the given document. A
- * stylesheet is considered targetting the editor a canvas if it contains the
- * `editor-styles-wrapper`, `wp-block`, or `wp-block-*` class selectors.
- *
- * Ideally, this hook should be removed in the future and styles should be added
- * explicitly as editor styles.
- */
-function useStylesCompatibility() {
-	return useRefEffect( ( node ) => {
-		// Search the document for stylesheets targetting the editor canvas.
-		Array.from( document.styleSheets ).forEach( ( styleSheet ) => {
-			try {
-				// May fail for external styles.
-				// eslint-disable-next-line no-unused-expressions
-				styleSheet.cssRules;
-			} catch ( e ) {
-				return;
-			}
-
-			const { ownerNode, cssRules } = styleSheet;
-
-			if ( ! cssRules ) {
-				return;
-			}
-
-			// Generally, ignore inline styles. We add inline styles belonging to a
-			// stylesheet later, which may or may not match the selectors.
-			if ( ownerNode.tagName !== 'LINK' ) {
-				return;
-			}
-
-			// Don't try to add the reset styles, which were removed as a dependency
-			// from `edit-blocks` for the iframe since we don't need to reset admin
-			// styles.
-			if ( ownerNode.id === 'wp-reset-editor-styles-css' ) {
-				return;
-			}
-
-			function matchFromRules( _cssRules ) {
-				return Array.from( _cssRules ).find(
-					( {
-						selectorText,
-						conditionText,
-						cssRules: __cssRules,
-					} ) => {
-						// If the rule is conditional then it will not have selector text.
-						// Recurse into child CSS ruleset to determine selector eligibility.
-						if ( conditionText ) {
-							return matchFromRules( __cssRules );
-						}
-
-						return (
-							selectorText &&
-							( selectorText.includes(
-								`.${ BODY_CLASS_NAME }`
-							) ||
-								selectorText.includes( `.${ BLOCK_PREFIX }` ) )
-						);
-					}
-				);
-			}
-
-			const isMatch = matchFromRules( cssRules );
-
-			if (
-				isMatch &&
-				! node.ownerDocument.getElementById( ownerNode.id )
-			) {
-				// Display warning once we have a way to add style dependencies to the editor.
-				// See: https://github.com/WordPress/gutenberg/pull/37466.
-				node.appendChild( ownerNode.cloneNode( true ) );
-
-				// Add inline styles belonging to the stylesheet.
-				const inlineCssId = ownerNode.id.replace(
-					'-css',
-					'-inline-css'
-				);
-				const inlineCssElement = document.getElementById( inlineCssId );
-
-				if ( inlineCssElement ) {
-					node.appendChild( inlineCssElement.cloneNode( true ) );
-				}
-			}
-		} );
-	}, [] );
-}
+import { useCompatibilityStyles } from './use-compatibility-styles';
 
 /**
  * Bubbles some event types (keydown, keypress, and dragover) to parent document
@@ -188,13 +98,28 @@ async function loadScript( head, { id, src } ) {
 }
 
 function Iframe(
-	{ contentRef, children, head, tabIndex = 0, assets, isZoomedOut, ...props },
+	{
+		contentRef,
+		children,
+		head,
+		tabIndex = 0,
+		assets,
+		scale = 1,
+		frameSize = 0,
+		readonly,
+		...props
+	},
 	ref
 ) {
 	const [ , forceRender ] = useReducer( () => ( {} ) );
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const styles = useParsedAssets( assets?.styles );
+	const styleIds = styles.map( ( style ) => style.id );
+	const compatStyles = useCompatibilityStyles();
+	const neededCompatStyles = compatStyles.filter(
+		( style ) => ! styleIds.includes( style.id )
+	);
 	const scripts = useParsedAssets( assets?.scripts );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
@@ -278,12 +203,11 @@ function Iframe(
 			} );
 	}, [] );
 	const bodyRef = useMergeRefs( [ contentRef, clearerRef, writingFlowRef ] );
-	const styleCompatibilityRef = useStylesCompatibility();
 
 	head = (
 		<>
 			<style>{ 'html{height:auto!important;}body{margin:0}' }</style>
-			{ styles.map(
+			{ [ ...styles, ...neededCompatStyles ].map(
 				( { tagName, href, id, rel, media, textContent } ) => {
 					const TagName = tagName.toLowerCase();
 
@@ -322,7 +246,7 @@ function Iframe(
 								{ head }
 								<style>
 									{ `html { transition: background 5s; ${
-										isZoomedOut
+										frameSize
 											? 'background: #2f2f2f; transition: background 0s;'
 											: ''
 									} }` }
@@ -332,35 +256,23 @@ function Iframe(
 								ref={ bodyRef }
 								className={ classnames(
 									'block-editor-iframe__body',
-									BODY_CLASS_NAME,
-									...bodyClasses,
-									{
-										'is-zoomed-out': isZoomedOut,
-									}
+									'editor-styles-wrapper',
+									...bodyClasses
 								) }
-								style={
-									isZoomedOut
-										? {
-												// This is the remaining percentage from the scaling down
-												// of the iframe body(`scale(0.45)`). We also need to subtract
-												// the body's bottom margin.
-												marginBottom: `-${
-													contentHeight * 0.55 - 100
-												}px`,
-										  }
-										: {}
-								}
+								style={ {
+									// This is the remaining percentage from the scaling down
+									// of the iframe body(`scale(0.45)`). We also need to subtract
+									// the body's bottom margin.
+									marginBottom: `-${
+										contentHeight * ( 1 - scale ) -
+										frameSize
+									}px`,
+									marginTop: frameSize,
+									transform: `scale( ${ scale } )`,
+								} }
+								inert={ readonly ? 'true' : undefined }
 							>
 								{ contentResizeListener }
-								{ /*
-								 * This is a wrapper for the extra styles and scripts
-								 * rendered imperatively by cloning the parent,
-								 * it's important that this div's content remains uncontrolled.
-								 */ }
-								<div
-									style={ { display: 'none' } }
-									ref={ styleCompatibilityRef }
-								/>
 								<StyleProvider document={ iframeDocument }>
 									{ children }
 								</StyleProvider>

package/src/components/iframe/use-compatibility-styles.js

@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Returns a list of stylesheets that target the editor canvas. A stylesheet is
+ * considered targetting the editor a canvas if it contains the
+ * `editor-styles-wrapper`, `wp-block`, or `wp-block-*` class selectors.
+ *
+ * Ideally, this hook should be removed in the future and styles should be added
+ * explicitly as editor styles.
+ */
+export function useCompatibilityStyles() {
+	// Only memoize the result once on load, since these stylesheets should not
+	// change.
+	return useMemo( () => {
+		// Search the document for stylesheets targetting the editor canvas.
+		return Array.from( document.styleSheets ).reduce(
+			( accumulator, styleSheet ) => {
+				try {
+					// May fail for external styles.
+					// eslint-disable-next-line no-unused-expressions
+					styleSheet.cssRules;
+				} catch ( e ) {
+					return accumulator;
+				}
+
+				const { ownerNode, cssRules } = styleSheet;
+
+				if ( ! cssRules ) {
+					return accumulator;
+				}
+
+				// Generally, ignore inline styles. We add inline styles belonging to a
+				// stylesheet later, which may or may not match the selectors.
+				if ( ownerNode.tagName !== 'LINK' ) {
+					return accumulator;
+				}
+
+				// Don't try to add the reset styles, which were removed as a dependency
+				// from `edit-blocks` for the iframe since we don't need to reset admin
+				// styles.
+				if ( ownerNode.id === 'wp-reset-editor-styles-css' ) {
+					return accumulator;
+				}
+
+				function matchFromRules( _cssRules ) {
+					return Array.from( _cssRules ).find(
+						( {
+							selectorText,
+							conditionText,
+							cssRules: __cssRules,
+						} ) => {
+							// If the rule is conditional then it will not have selector text.
+							// Recurse into child CSS ruleset to determine selector eligibility.
+							if ( conditionText ) {
+								return matchFromRules( __cssRules );
+							}
+
+							return (
+								selectorText &&
+								( selectorText.includes(
+									'.editor-styles-wrapper'
+								) ||
+									selectorText.includes( '.wp-block' ) )
+							);
+						}
+					);
+				}
+
+				if ( matchFromRules( cssRules ) ) {
+					// Display warning once we have a way to add style dependencies to the editor.
+					// See: https://github.com/WordPress/gutenberg/pull/37466.
+					accumulator.push( ownerNode.cloneNode( true ) );
+
+					// Add inline styles belonging to the stylesheet.
+					const inlineCssId = ownerNode.id.replace(
+						'-css',
+						'-inline-css'
+					);
+					const inlineCssElement =
+						document.getElementById( inlineCssId );
+
+					if ( inlineCssElement ) {
+						accumulator.push( inlineCssElement.cloneNode( true ) );
+					}
+				}
+
+				return accumulator;
+			},
+			[]
+		);
+	}, [] );
+}

package/src/components/image-editor/use-save-image.js

@@ -1,6 +1,8 @@
 /**
  * WordPress dependencies
  */
+// Disable Reason: Needs to be refactored.
+// eslint-disable-next-line no-restricted-imports
 import apiFetch from '@wordpress/api-fetch';
 import { useDispatch } from '@wordpress/data';
 import { useCallback, useMemo, useState } from '@wordpress/element';

package/src/components/image-editor/zoom-dropdown.js

@@ -28,6 +28,7 @@ export default function ZoomDropdown() {
 			) }
 			renderContent={ () => (
 				<RangeControl
+					__nextHasNoMarginBottom
 					label={ __( 'Zoom' ) }
 					min={ MIN_ZOOM }
 					max={ MAX_ZOOM }