@wordpress/block-editor 7.0.1 → 8.0.0

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

@@ -1,16 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarButton, DuotoneSwatch } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import {
+	Dropdown,
+	DuotonePicker,
+	DuotoneSwatch,
+	MenuGroup,
+	ToolbarButton,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { DOWN } from '@wordpress/keycodes';
 
-/**
- * Internal dependencies
- */
-import DuotonePickerPopover from './duotone-picker-popover';
-
 function DuotoneControl( {
 	colorPalette,
 	duotonePalette,
@@ -19,42 +19,50 @@ function DuotoneControl( {
 	value,
 	onChange,
 } ) {
-	const [ isOpen, setIsOpen ] = useState( false );
-
-	const onToggle = () => {
-		setIsOpen( ( prev ) => ! prev );
-	};
-
-	const openOnArrowDown = ( event ) => {
-		if ( ! isOpen && event.keyCode === DOWN ) {
-			event.preventDefault();
-			onToggle();
-		}
-	};
-
 	return (
-		<>
-			<ToolbarButton
-				showTooltip
-				onClick={ onToggle }
-				aria-haspopup="true"
-				aria-expanded={ isOpen }
-				onKeyDown={ openOnArrowDown }
-				label={ __( 'Apply duotone filter' ) }
-				icon={ <DuotoneSwatch values={ value } /> }
-			/>
-			{ isOpen && (
-				<DuotonePickerPopover
-					value={ value }
-					onChange={ onChange }
-					onToggle={ onToggle }
-					duotonePalette={ duotonePalette }
-					colorPalette={ colorPalette }
-					disableCustomColors={ disableCustomColors }
-					disableCustomDuotone={ disableCustomDuotone }
-				/>
+		<Dropdown
+			popoverProps={ {
+				className: 'block-editor-duotone-control__popover',
+				headerTitle: __( 'Duotone' ),
+				isAlternate: true,
+			} }
+			renderToggle={ ( { isOpen, onToggle } ) => {
+				const openOnArrowDown = ( event ) => {
+					if ( ! isOpen && event.keyCode === DOWN ) {
+						event.preventDefault();
+						onToggle();
+					}
+				};
+				return (
+					<ToolbarButton
+						showTooltip
+						onClick={ onToggle }
+						aria-haspopup="true"
+						aria-expanded={ isOpen }
+						onKeyDown={ openOnArrowDown }
+						label={ __( 'Apply duotone filter' ) }
+						icon={ <DuotoneSwatch values={ value } /> }
+					/>
+				);
+			} }
+			renderContent={ () => (
+				<MenuGroup label={ __( 'Duotone' ) }>
+					<div className="block-editor-duotone-control__description">
+						{ __(
+							'Create a two-tone color effect without losing your original image.'
+						) }
+					</div>
+					<DuotonePicker
+						colorPalette={ colorPalette }
+						duotonePalette={ duotonePalette }
+						disableCustomColors={ disableCustomColors }
+						disableCustomDuotone={ disableCustomDuotone }
+						value={ value }
+						onChange={ onChange }
+					/>
+				</MenuGroup>
 			) }
-		</>
+		/>
 	);
 }
 

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

@@ -1,23 +1,38 @@
+// Must equal $color-palette-circle-size and $color-palette-circle-spacing from:
+// @wordpress/components/src/circular-option-picker/style.scss
+$swatch-size: 28px;
+$swatch-gap: 12px;
+
+$popover-width: $sidebar-width;
+$popover-padding: $grid-unit-20;
+
+$swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover-padding, $swatch-size + $swatch-gap));
+
 .block-editor-duotone-control__popover {
-	.components-popover__content {
-		border: $border-width solid $gray-900;
-		min-width: 214px;
+	> .components-popover__content > div {
+		padding: $popover-padding;
+		width: $popover-width;
 	}
 
-	.components-circular-option-picker {
-		padding: $grid-unit-15;
+	.components-menu-group__label {
+		padding: 0;
 	}
 
-	.components-menu-group__label {
-		padding: $grid-unit-15 $grid-unit-15 0 $grid-unit-15;
-		width: 100%;
-		box-sizing: border-box;
+	.components-custom-gradient-picker__gradient-bar {
+		margin: $grid-unit-20 0 $grid-unit-15;
+	}
+
+	.components-circular-option-picker__swatches {
+		display: grid;
+		grid-template-columns: repeat($swatch-columns, $swatch-size);
+		gap: $swatch-gap;
+		justify-content: space-between;
 	}
 }
 
-.block-editor-duotone-control__popover > .components-popover__content {
-	// Matches 8 swatches in width.
-	width: 334px;
+.block-editor-duotone-control__description {
+	margin: $grid-unit-20 0;
+	font-size: $helptext-font-size;
 }
 
 // Better align the popover under the swatch.

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

@@ -1,7 +1,9 @@
 /**
  * External dependencies
  */
-import tinycolor from 'tinycolor2';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+import a11yPlugin from 'colord/plugins/a11y';
 
 /**
  * WordPress dependencies
@@ -14,6 +16,7 @@ import { useCallback, useMemo } from '@wordpress/element';
 import transformStyles from '../../utils/transform-styles';
 
 const EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';
+extend( [ namesPlugin, a11yPlugin ] );
 
 function useDarkThemeBodyClassName( styles ) {
 	return useCallback(
@@ -48,11 +51,11 @@ function useDarkThemeBodyClassName( styles ) {
 					.getComputedStyle( canvas, null )
 					.getPropertyValue( 'background-color' );
 			}
-
+			const colordBackgroundColor = colord( backgroundColor );
 			// If background is transparent, it should be treated as light color.
 			if (
-				tinycolor( backgroundColor ).getLuminance() > 0.5 ||
-				tinycolor( backgroundColor ).getAlpha() === 0
+				colordBackgroundColor.luminance() > 0.5 ||
+				colordBackgroundColor.alpha() === 0
 			) {
 				body.classList.remove( 'is-dark-theme' );
 			} else {
@@ -68,6 +71,7 @@ export default function EditorStyles( { styles } ) {
 		() => transformStyles( styles, EDITOR_STYLES_SELECTOR ),
 		[ styles ]
 	);
+
 	return (
 		<>
 			{ /* Use an empty style element to have a document reference,

package/src/components/font-appearance-control/index.js

@@ -55,6 +55,26 @@ const FONT_WEIGHTS = [
 	},
 ];
 
+/**
+ * Adjusts font appearance field label in case either font styles or weights
+ * are disabled.
+ *
+ * @param {boolean} hasFontStyles  Whether font styles are enabled and present.
+ * @param {boolean} hasFontWeights Whether font weights are enabled and present.
+ * @return {string} A label representing what font appearance is being edited.
+ */
+export const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
+	if ( ! hasFontStyles ) {
+		return __( 'Font weight' );
+	}
+
+	if ( ! hasFontWeights ) {
+		return __( 'Font style' );
+	}
+
+	return __( 'Appearance' );
+};
+
 /**
  * Control to display unified font style and weight options.
  *
@@ -70,6 +90,7 @@ export default function FontAppearanceControl( props ) {
 		value: { fontStyle, fontWeight },
 	} = props;
 	const hasStylesOrWeights = hasFontStyles || hasFontWeights;
+	const label = getFontAppearanceLabel( hasFontStyles, hasFontWeights );
 	const defaultOption = {
 		key: 'default',
 		name: __( 'Default' ),
@@ -143,39 +164,56 @@ export default function FontAppearanceControl( props ) {
 		return hasFontStyles ? styleOptions() : weightOptions();
 	}, [ props.options ] );
 
-	// Find current selection by comparing font style & weight against options.
-	const currentSelection = selectOptions.find(
-		( option ) =>
-			option.style.fontStyle === fontStyle &&
-			option.style.fontWeight === fontWeight
-	);
+	// Find current selection by comparing font style & weight against options,
+	// and fall back to the Default option if there is no matching option.
+	const currentSelection =
+		selectOptions.find(
+			( option ) =>
+				option.style.fontStyle === fontStyle &&
+				option.style.fontWeight === fontWeight
+		) || selectOptions[ 0 ];
+
+	// Adjusts screen reader description based on styles or weights.
+	const getDescribedBy = () => {
+		if ( ! currentSelection ) {
+			return __( 'No selected font appearance' );
+		}
 
-	// Adjusts field label in case either styles or weights are disabled.
-	const getLabel = () => {
 		if ( ! hasFontStyles ) {
-			return __( 'Font weight' );
+			return sprintf(
+				// translators: %s: Currently selected font weight.
+				__( 'Currently selected font weight: %s' ),
+				currentSelection.name
+			);
 		}
 
 		if ( ! hasFontWeights ) {
-			return __( 'Font style' );
+			return sprintf(
+				// translators: %s: Currently selected font style.
+				__( 'Currently selected font style: %s' ),
+				currentSelection.name
+			);
 		}
 
-		return __( 'Appearance' );
+		return sprintf(
+			// translators: %s: Currently selected font appearance.
+			__( 'Currently selected font appearance: %s' ),
+			currentSelection.name
+		);
 	};
 
 	return (
-		<fieldset className="components-font-appearance-control">
-			{ hasStylesOrWeights && (
-				<CustomSelectControl
-					className="components-font-appearance-control__select"
-					label={ getLabel() }
-					options={ selectOptions }
-					value={ currentSelection }
-					onChange={ ( { selectedItem } ) =>
-						onChange( selectedItem.style )
-					}
-				/>
-			) }
-		</fieldset>
+		hasStylesOrWeights && (
+			<CustomSelectControl
+				className="components-font-appearance-control"
+				label={ label }
+				describedBy={ getDescribedBy() }
+				options={ selectOptions }
+				value={ currentSelection }
+				onChange={ ( { selectedItem } ) =>
+					onChange( selectedItem.style )
+				}
+			/>
+		)
 	);
 }

package/src/components/font-appearance-control/style.scss

@@ -1,4 +1,4 @@
-.components-font-appearance-control__select {
+.components-font-appearance-control {
 	margin-bottom: 24px;
 
 	ul {

package/src/components/font-sizes/index.native.js

@@ -1 +1,7 @@
-export { getFontSize, getFontSizeClass } from './utils';
+export {
+	getFontSize,
+	getFontSizeClass,
+	getFontSizeObjectByValue,
+} from './utils';
+export { default as FontSizePicker } from './font-size-picker';
+export { default as withFontSizes } from './with-font-sizes';

package/src/components/iframe/index.js

@@ -1,17 +1,21 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import {
 	useState,
 	createPortal,
-	useCallback,
 	forwardRef,
 	useEffect,
 	useMemo,
 	useReducer,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs, useRefEffect } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 
 /**
@@ -72,7 +76,7 @@ function styleSheetsCompat( doc ) {
 
 		if ( isMatch && ! doc.getElementById( ownerNode.id ) ) {
 			// eslint-disable-next-line no-console
-			console.error(
+			console.warn(
 				`Stylesheet ${ ownerNode.id } was not properly added.
 For blocks, use the block API's style (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style) or editorStyle (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style).
 For themes, use add_editor_style (https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#editor-styles).`,
@@ -130,39 +134,13 @@ function bubbleEvents( doc ) {
 		}
 	}
 
-	const eventTypes = [ 'keydown', 'keypress', 'dragover' ];
+	const eventTypes = [ 'dragover' ];
 
 	for ( const name of eventTypes ) {
 		doc.addEventListener( name, bubbleEvent );
 	}
 }
 
-/**
- * Sets the document direction.
- *
- * Sets the `editor-styles-wrapper` class name on the body.
- *
- * Copies the `admin-color-*` class name to the body so that the admin color
- * scheme applies to components in the iframe.
- *
- * @param {Document} doc Document to add class name to.
- */
-function setBodyClassName( doc ) {
-	doc.dir = document.dir;
-	doc.body.className = BODY_CLASS_NAME;
-
-	for ( const name of document.body.classList ) {
-		if ( name.startsWith( 'admin-color-' ) ) {
-			doc.body.classList.add( name );
-		} else if ( name === 'wp-embed-responsive' ) {
-			// Ideally ALL classes that are added through get_body_class should
-			// be added in the editor too, which we'll somehow have to get from
-			// the server in the future (which will run the PHP filters).
-			doc.body.classList.add( 'wp-embed-responsive' );
-		}
-	}
-}
-
 function useParsedAssets( html ) {
 	return useMemo( () => {
 		const doc = document.implementation.createHTMLDocument( '' );
@@ -171,9 +149,9 @@ function useParsedAssets( html ) {
 	}, [ html ] );
 }
 
-async function loadScript( doc, { id, src } ) {
+async function loadScript( head, { id, src } ) {
 	return new Promise( ( resolve, reject ) => {
-		const script = doc.createElement( 'script' );
+		const script = head.ownerDocument.createElement( 'script' );
 		script.id = id;
 		if ( src ) {
 			script.src = src;
@@ -182,57 +160,45 @@ async function loadScript( doc, { id, src } ) {
 		} else {
 			resolve();
 		}
-		doc.head.appendChild( script );
+		head.appendChild( script );
 	} );
 }
 
-function Iframe( { contentRef, children, head, ...props }, ref ) {
+function Iframe( { contentRef, children, head, tabIndex = 0, ...props }, ref ) {
 	const [ , forceRender ] = useReducer( () => ( {} ) );
 	const [ iframeDocument, setIframeDocument ] = useState();
-	const styles = useParsedAssets( window.__editorAssets.styles );
-	const scripts = useParsedAssets( window.__editorAssets.scripts );
+	const [ bodyClasses, setBodyClasses ] = useState( [] );
+	const styles = useParsedAssets( window.__editorAssets?.styles );
+	const scripts = useParsedAssets( window.__editorAssets?.scripts );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
-	const setRef = useCallback( ( node ) => {
-		if ( ! node ) {
-			return;
-		}
-
+	const setRef = useRefEffect( ( node ) => {
 		function setDocumentIfReady() {
-			const { contentDocument } = node;
-			const { readyState, body, documentElement } = contentDocument;
+			const { contentDocument, ownerDocument } = node;
+			const { readyState, documentElement } = contentDocument;
 
 			if ( readyState !== 'interactive' && readyState !== 'complete' ) {
 				return false;
 			}
 
-			if ( typeof contentRef === 'function' ) {
-				contentRef( body );
-			} else if ( contentRef ) {
-				contentRef.current = body;
-			}
-
-			setBodyClassName( contentDocument );
 			bubbleEvents( contentDocument );
-			setBodyClassName( contentDocument );
 			setIframeDocument( contentDocument );
 			clearerRef( documentElement );
-			clearerRef( body );
-			writingFlowRef( body );
-
-			scripts
-				.reduce(
-					( promise, script ) =>
-						promise.then( () =>
-							loadScript( contentDocument, script )
-						),
-					Promise.resolve()
+
+			// Ideally ALL classes that are added through get_body_class should
+			// be added in the editor too, which we'll somehow have to get from
+			// the server in the future (which will run the PHP filters).
+			setBodyClasses(
+				Array.from( ownerDocument.body.classList ).filter(
+					( name ) =>
+						name.startsWith( 'admin-color-' ) ||
+						name === 'wp-embed-responsive'
 				)
-				.finally( () => {
-					// When script are loaded, re-render blocks to allow them
-					// to initialise.
-					forceRender();
-				} );
+			);
+
+			contentDocument.dir = ownerDocument.dir;
+			documentElement.removeChild( contentDocument.head );
+			documentElement.removeChild( contentDocument.body );
 
 			return true;
 		}
@@ -246,6 +212,20 @@ function Iframe( { contentRef, children, head, ...props }, ref ) {
 			setDocumentIfReady();
 		} );
 	}, [] );
+	const headRef = useRefEffect( ( element ) => {
+		scripts
+			.reduce(
+				( promise, script ) =>
+					promise.then( () => loadScript( element, script ) ),
+				Promise.resolve()
+			)
+			.finally( () => {
+				// When script are loaded, re-render blocks to allow them
+				// to initialise.
+				forceRender();
+			} );
+	}, [] );
+	const bodyRef = useMergeRefs( [ contentRef, clearerRef, writingFlowRef ] );
 
 	useEffect( () => {
 		if ( iframeDocument ) {
@@ -279,24 +259,33 @@ function Iframe( { contentRef, children, head, ...props }, ref ) {
 
 	return (
 		<>
-			{ before }
+			{ tabIndex >= 0 && before }
 			<iframe
 				{ ...props }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
-				tabIndex="0"
+				tabIndex={ tabIndex }
 				title={ __( 'Editor canvas' ) }
-				name="editor-canvas"
 			>
 				{ iframeDocument &&
 					createPortal(
-						<StyleProvider document={ iframeDocument }>
-							{ children }
-						</StyleProvider>,
-						iframeDocument.body
+						<>
+							<head ref={ headRef }>{ head }</head>
+							<body
+								ref={ bodyRef }
+								className={ classnames(
+									BODY_CLASS_NAME,
+									...bodyClasses
+								) }
+							>
+								<StyleProvider document={ iframeDocument }>
+									{ children }
+								</StyleProvider>
+							</body>
+						</>,
+						iframeDocument.documentElement
 					) }
-				{ iframeDocument && createPortal( head, iframeDocument.head ) }
 			</iframe>
-			{ after }
+			{ tabIndex >= 0 && after }
 		</>
 	);
 }

package/src/components/image-editor/aspect-ratio-dropdown.js

@@ -0,0 +1,129 @@
+/**
+ * WordPress dependencies
+ */
+import { check, aspectRatio as aspectRatioIcon } from '@wordpress/icons';
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { POPOVER_PROPS } from './constants';
+import { useImageEditingContext } from './context';
+
+function AspectGroup( { aspectRatios, isDisabled, label, onClick, value } ) {
+	return (
+		<MenuGroup label={ label }>
+			{ aspectRatios.map( ( { title, aspect } ) => (
+				<MenuItem
+					key={ aspect }
+					disabled={ isDisabled }
+					onClick={ () => {
+						onClick( aspect );
+					} }
+					role="menuitemradio"
+					isSelected={ aspect === value }
+					icon={ aspect === value ? check : undefined }
+				>
+					{ title }
+				</MenuItem>
+			) ) }
+		</MenuGroup>
+	);
+}
+
+export default function AspectRatioDropdown( { toggleProps } ) {
+	const {
+		isInProgress,
+		aspect,
+		setAspect,
+		defaultAspect,
+	} = useImageEditingContext();
+
+	return (
+		<DropdownMenu
+			icon={ aspectRatioIcon }
+			label={ __( 'Aspect Ratio' ) }
+			popoverProps={ POPOVER_PROPS }
+			toggleProps={ toggleProps }
+			className="wp-block-image__aspect-ratio"
+		>
+			{ ( { onClose } ) => (
+				<>
+					<AspectGroup
+						isDisabled={ isInProgress }
+						onClick={ ( newAspect ) => {
+							setAspect( newAspect );
+							onClose();
+						} }
+						value={ aspect }
+						aspectRatios={ [
+							{
+								title: __( 'Original' ),
+								aspect: defaultAspect,
+							},
+							{
+								title: __( 'Square' ),
+								aspect: 1,
+							},
+						] }
+					/>
+					<AspectGroup
+						label={ __( 'Landscape' ) }
+						isDisabled={ isInProgress }
+						onClick={ ( newAspect ) => {
+							setAspect( newAspect );
+							onClose();
+						} }
+						value={ aspect }
+						aspectRatios={ [
+							{
+								title: __( '16:10' ),
+								aspect: 16 / 10,
+							},
+							{
+								title: __( '16:9' ),
+								aspect: 16 / 9,
+							},
+							{
+								title: __( '4:3' ),
+								aspect: 4 / 3,
+							},
+							{
+								title: __( '3:2' ),
+								aspect: 3 / 2,
+							},
+						] }
+					/>
+					<AspectGroup
+						label={ __( 'Portrait' ) }
+						isDisabled={ isInProgress }
+						onClick={ ( newAspect ) => {
+							setAspect( newAspect );
+							onClose();
+						} }
+						value={ aspect }
+						aspectRatios={ [
+							{
+								title: __( '10:16' ),
+								aspect: 10 / 16,
+							},
+							{
+								title: __( '9:16' ),
+								aspect: 9 / 16,
+							},
+							{
+								title: __( '3:4' ),
+								aspect: 3 / 4,
+							},
+							{
+								title: __( '2:3' ),
+								aspect: 2 / 3,
+							},
+						] }
+					/>
+				</>
+			) }
+		</DropdownMenu>
+	);
+}