@wordpress/block-editor 11.3.6 → 11.5.0

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

@@ -0,0 +1,428 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	FontSizePicker,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FontFamilyControl from '../font-family';
+import FontAppearanceControl from '../font-appearance-control';
+import LineHeightControl from '../line-height-control';
+import LetterSpacingControl from '../letter-spacing-control';
+import TextTransformControl from '../text-transform-control';
+import TextDecorationControl from '../text-decoration-control';
+import { getValueFromVariable } from './utils';
+
+export function useHasTypographyPanel( settings ) {
+	const hasFontFamily = useHasFontFamilyControl( settings );
+	const hasLineHeight = useHasLineHeightControl( settings );
+	const hasFontAppearance = useHasAppearanceControl( settings );
+	const hasLetterSpacing = useHasLetterSpacingControl( settings );
+	const hasTextTransform = useHasTextTransformControl( settings );
+	const hasTextDecoration = useHasTextDecorationControl( settings );
+	const hasFontSize = useHasFontSizeControl( settings );
+
+	return (
+		hasFontFamily ||
+		hasLineHeight ||
+		hasFontAppearance ||
+		hasLetterSpacing ||
+		hasTextTransform ||
+		hasFontSize ||
+		hasTextDecoration
+	);
+}
+
+function useHasFontSizeControl( settings ) {
+	const disableCustomFontSizes = ! settings?.typography?.customFontSize;
+	const fontSizesPerOrigin = settings?.typography?.fontSizes ?? {};
+	const fontSizes =
+		fontSizesPerOrigin?.custom ??
+		fontSizesPerOrigin?.theme ??
+		fontSizesPerOrigin.default;
+	return !! fontSizes?.length || ! disableCustomFontSizes;
+}
+
+function useHasFontFamilyControl( settings ) {
+	const fontFamiliesPerOrigin = settings?.typography?.fontFamilies;
+	const fontFamilies =
+		fontFamiliesPerOrigin?.custom ??
+		fontFamiliesPerOrigin?.theme ??
+		fontFamiliesPerOrigin?.default;
+	return !! fontFamilies?.length;
+}
+
+function useHasLineHeightControl( settings ) {
+	return settings?.typography?.lineHeight;
+}
+
+function useHasAppearanceControl( settings ) {
+	const hasFontStyles = settings?.typography?.fontStyle;
+	const hasFontWeights = settings?.typography?.fontWeight;
+	return hasFontStyles || hasFontWeights;
+}
+
+function useAppearanceControlLabel( settings ) {
+	const hasFontStyles = settings?.typography?.fontStyle;
+	const hasFontWeights = settings?.typography?.fontWeight;
+	if ( ! hasFontStyles ) {
+		return __( 'Font weight' );
+	}
+	if ( ! hasFontWeights ) {
+		return __( 'Font style' );
+	}
+	return __( 'Appearance' );
+}
+
+function useHasLetterSpacingControl( settings ) {
+	return settings?.typography?.letterSpacing;
+}
+
+function useHasTextTransformControl( settings ) {
+	return settings?.typography?.textTransform;
+}
+
+function useHasTextDecorationControl( settings ) {
+	return settings?.typography?.textDecoration;
+}
+
+function TypographyToolsPanel( {
+	resetAllFilter,
+	onChange,
+	value,
+	panelId,
+	children,
+} ) {
+	const resetAll = () => {
+		const updatedValue = resetAllFilter( value );
+		onChange( updatedValue );
+	};
+
+	return (
+		<ToolsPanel
+			label={ __( 'Typography' ) }
+			resetAll={ resetAll }
+			panelId={ panelId }
+		>
+			{ children }
+		</ToolsPanel>
+	);
+}
+
+const DEFAULT_CONTROLS = {
+	fontFamily: true,
+	fontSize: true,
+	fontAppearance: true,
+	lineHeight: true,
+	letterSpacing: true,
+	textTransform: true,
+	textDecoration: true,
+};
+
+export default function TypographyPanel( {
+	as: Wrapper = TypographyToolsPanel,
+	value,
+	onChange,
+	inheritedValue = value,
+	settings,
+	panelId,
+	defaultControls = DEFAULT_CONTROLS,
+} ) {
+	const decodeValue = ( rawValue ) =>
+		getValueFromVariable( { settings }, '', rawValue );
+
+	// Font Family
+	const hasFontFamilyEnabled = useHasFontFamilyControl( settings );
+	const fontFamiliesPerOrigin = settings?.typography?.fontFamilies;
+	const fontFamilies =
+		fontFamiliesPerOrigin?.custom ??
+		fontFamiliesPerOrigin?.theme ??
+		fontFamiliesPerOrigin?.default;
+	const fontFamily = decodeValue( inheritedValue?.typography?.fontFamily );
+	const setFontFamily = ( newValue ) => {
+		const slug = fontFamilies?.find(
+			( { fontFamily: f } ) => f === newValue
+		)?.slug;
+		onChange( {
+			...value,
+			typography: {
+				...value?.typography,
+				fontFamily: slug
+					? `var:preset|font-family|${ slug }`
+					: newValue,
+			},
+		} );
+	};
+	const hasFontFamily = () => !! value?.typography?.fontFamily;
+	const resetFontFamily = () => setFontFamily( undefined );
+
+	// Font Size
+	const hasFontSizeEnabled = useHasFontSizeControl( settings );
+	const disableCustomFontSizes = ! settings?.typography?.customFontSize;
+	const fontSizesPerOrigin = settings?.typography?.fontSizes ?? {};
+	const fontSizes =
+		fontSizesPerOrigin?.custom ??
+		fontSizesPerOrigin?.theme ??
+		fontSizesPerOrigin.default;
+	const fontSize = decodeValue( inheritedValue?.typography?.fontSize );
+	const setFontSize = ( newValue, metadata ) => {
+		const actualValue = !! metadata?.slug
+			? `var:preset|font-size|${ metadata?.slug }`
+			: newValue;
+
+		onChange( {
+			...value,
+			typography: {
+				...value?.typography,
+				fontSize: actualValue,
+			},
+		} );
+	};
+	const hasFontSize = () => !! value?.typography?.fontSize;
+	const resetFontSize = () => setFontSize( undefined );
+
+	// Appearance
+	const hasAppearanceControl = useHasAppearanceControl( settings );
+	const appearanceControlLabel = useAppearanceControlLabel( settings );
+	const hasFontStyles = settings?.typography?.fontStyle;
+	const hasFontWeights = settings?.typography?.fontWeight;
+	const fontStyle = decodeValue( inheritedValue?.typography?.fontStyle );
+	const fontWeight = decodeValue( inheritedValue?.typography?.fontWeight );
+	const setFontAppearance = ( {
+		fontStyle: newFontStyle,
+		fontWeight: newFontWeight,
+	} ) => {
+		onChange( {
+			...value,
+			typography: {
+				...value?.typography,
+				fontStyle: newFontStyle,
+				fontWeight: newFontWeight,
+			},
+		} );
+	};
+	const hasFontAppearance = () =>
+		!! value?.typography?.fontStyle || !! value?.typography?.fontWeight;
+	const resetFontAppearance = () => {
+		setFontAppearance( {} );
+	};
+
+	// Line Height
+	const hasLineHeightEnabled = useHasLineHeightControl( settings );
+	const lineHeight = decodeValue( inheritedValue?.typography?.lineHeight );
+	const setLineHeight = ( newValue ) => {
+		onChange( {
+			...value,
+			typography: {
+				...value?.typography,
+				lineHeight: newValue,
+			},
+		} );
+	};
+	const hasLineHeight = () => !! value?.typography?.lineHeight;
+	const resetLineHeight = () => setLineHeight( undefined );
+
+	// Letter Spacing
+	const hasLetterSpacingControl = useHasLetterSpacingControl( settings );
+	const letterSpacing = decodeValue(
+		inheritedValue?.typography?.letterSpacing
+	);
+	const setLetterSpacing = ( newValue ) => {
+		onChange( {
+			...value,
+			typography: {
+				...value?.typography,
+				letterSpacing: newValue,
+			},
+		} );
+	};
+	const hasLetterSpacing = () => !! value?.typography?.letterSpacing;
+	const resetLetterSpacing = () => setLetterSpacing( undefined );
+
+	// Text Transform
+	const hasTextTransformControl = useHasTextTransformControl( settings );
+	const textTransform = decodeValue(
+		inheritedValue?.typography?.textTransform
+	);
+	const setTextTransform = ( newValue ) => {
+		onChange( {
+			...value,
+			typography: {
+				...value?.typography,
+				textTransform: newValue,
+			},
+		} );
+	};
+	const hasTextTransform = () => !! value?.typography?.textTransform;
+	const resetTextTransform = () => setTextTransform( undefined );
+
+	// Text Decoration
+	const hasTextDecorationControl = useHasTextDecorationControl( settings );
+	const textDecoration = decodeValue(
+		inheritedValue?.typography?.textDecoration
+	);
+	const setTextDecoration = ( newValue ) => {
+		onChange( {
+			...value,
+			typography: {
+				...value?.typography,
+				textDecoration: newValue,
+			},
+		} );
+	};
+	const hasTextDecoration = () => !! value?.typography?.textDecoration;
+	const resetTextDecoration = () => setTextDecoration( undefined );
+
+	const resetAllFilter = useCallback( ( previousValue ) => {
+		return {
+			...previousValue,
+			typography: {},
+		};
+	}, [] );
+
+	return (
+		<Wrapper
+			resetAllFilter={ resetAllFilter }
+			value={ value }
+			onChange={ onChange }
+			panelId={ panelId }
+		>
+			{ hasFontFamilyEnabled && (
+				<ToolsPanelItem
+					label={ __( 'Font family' ) }
+					hasValue={ hasFontFamily }
+					onDeselect={ resetFontFamily }
+					isShownByDefault={ defaultControls.fontFamily }
+					panelId={ panelId }
+				>
+					<FontFamilyControl
+						fontFamilies={ fontFamilies }
+						value={ fontFamily }
+						onChange={ setFontFamily }
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					/>
+				</ToolsPanelItem>
+			) }
+			{ hasFontSizeEnabled && (
+				<ToolsPanelItem
+					label={ __( 'Font size' ) }
+					hasValue={ hasFontSize }
+					onDeselect={ resetFontSize }
+					isShownByDefault={ defaultControls.fontSize }
+					panelId={ panelId }
+				>
+					<FontSizePicker
+						value={ fontSize }
+						onChange={ setFontSize }
+						fontSizes={ fontSizes }
+						disableCustomFontSizes={ disableCustomFontSizes }
+						withReset={ false }
+						withSlider
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					/>
+				</ToolsPanelItem>
+			) }
+			{ hasAppearanceControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ appearanceControlLabel }
+					hasValue={ hasFontAppearance }
+					onDeselect={ resetFontAppearance }
+					isShownByDefault={ defaultControls.fontAppearance }
+					panelId={ panelId }
+				>
+					<FontAppearanceControl
+						value={ {
+							fontStyle,
+							fontWeight,
+						} }
+						onChange={ setFontAppearance }
+						hasFontStyles={ hasFontStyles }
+						hasFontWeights={ hasFontWeights }
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					/>
+				</ToolsPanelItem>
+			) }
+			{ hasLineHeightEnabled && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Line height' ) }
+					hasValue={ hasLineHeight }
+					onDeselect={ resetLineHeight }
+					isShownByDefault={ defaultControls.lineHeight }
+					panelId={ panelId }
+				>
+					<LineHeightControl
+						__nextHasNoMarginBottom
+						__unstableInputWidth="auto"
+						value={ lineHeight }
+						onChange={ setLineHeight }
+						size="__unstable-large"
+					/>
+				</ToolsPanelItem>
+			) }
+			{ hasLetterSpacingControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Letter spacing' ) }
+					hasValue={ hasLetterSpacing }
+					onDeselect={ resetLetterSpacing }
+					isShownByDefault={ defaultControls.letterSpacing }
+					panelId={ panelId }
+				>
+					<LetterSpacingControl
+						value={ letterSpacing }
+						onChange={ setLetterSpacing }
+						size="__unstable-large"
+						__unstableInputWidth="auto"
+					/>
+				</ToolsPanelItem>
+			) }
+			{ hasTextDecorationControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Text decoration' ) }
+					hasValue={ hasTextDecoration }
+					onDeselect={ resetTextDecoration }
+					isShownByDefault={ defaultControls.textDecoration }
+					panelId={ panelId }
+				>
+					<TextDecorationControl
+						value={ textDecoration }
+						onChange={ setTextDecoration }
+						size="__unstable-large"
+						__unstableInputWidth="auto"
+					/>
+				</ToolsPanelItem>
+			) }
+			{ hasTextTransformControl && (
+				<ToolsPanelItem
+					label={ __( 'Letter case' ) }
+					hasValue={ hasTextTransform }
+					onDeselect={ resetTextTransform }
+					isShownByDefault={ defaultControls.textTransform }
+					panelId={ panelId }
+				>
+					<TextTransformControl
+						value={ textTransform }
+						onChange={ setTextTransform }
+						showNone
+						isBlock
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					/>
+				</ToolsPanelItem>
+			) }
+		</Wrapper>
+	);
+}

package/src/components/global-styles/use-global-styles-output.js

@@ -664,13 +664,17 @@ export const toStyles = (
 	}
 
 	if ( useRootPaddingAlign ) {
+		/*
+		 * These rules reproduce the ones from https://github.com/WordPress/gutenberg/blob/79103f124925d1f457f627e154f52a56228ed5ad/lib/class-wp-theme-json-gutenberg.php#L2508
+		 * almost exactly, but for the selectors that target block wrappers in the front end. This code only runs in the editor, so it doesn't need those selectors.
+		 */
 		ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }
 			.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
 			.has-global-padding :where(.has-global-padding) { padding-right: 0; padding-left: 0; }
 			.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
 			.has-global-padding :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; }
-			.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
-			.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0;`;
+			.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where(.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
+			.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where(.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0;`;
 	}
 
 	ruleset += '}';
@@ -786,9 +790,10 @@ export const toStyles = (
 				if ( duotoneDeclarations.length > 0 ) {
 					ruleset =
 						ruleset +
-						`${ duotoneSelector }{${ duotoneDeclarations.join(
-							';'
-						) };}`;
+						`${ scopeSelector(
+							selector,
+							duotoneSelector
+						) }{${ duotoneDeclarations.join( ';' ) };}`;
 				}
 			}
 

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

@@ -57,6 +57,7 @@ export const PRESET_METADATA = [
 	},
 	{
 		path: [ 'color', 'duotone' ],
+		valueKey: 'colors',
 		cssVarInfix: 'duotone',
 		valueFunc: ( { slug } ) => `url( '#wp-duotone-${ slug }' )`,
 		classes: [],
@@ -95,6 +96,7 @@ export const PRESET_METADATA = [
 export const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'color.background': 'color',
 	'color.text': 'color',
+	'filter.duotone': 'duotone',
 	'elements.link.color.text': 'color',
 	'elements.link.:hover.color.text': 'color',
 	'elements.link.typography.fontFamily': 'font-family',

package/src/components/iframe/index.js

@@ -108,6 +108,7 @@ function Iframe( {
 	tabIndex = 0,
 	scale = 1,
 	frameSize = 0,
+	expand = false,
 	readonly,
 	forwardedRef: ref,
 	...props
@@ -246,11 +247,30 @@ function Iframe( {
 		return '<!doctype html>' + renderToString( styleAssets );
 	}, [] );
 
+	// We need to counter the margin created by scaling the iframe. If the scale
+	// is e.g. 0.45, then the top + bottom margin is 0.55 (1 - scale). Just the
+	// top or bottom margin is 0.55 / 2 ((1 - scale) / 2).
+	const marginFromScaling = ( contentHeight * ( 1 - scale ) ) / 2;
+
 	return (
 		<>
 			{ tabIndex >= 0 && before }
 			<iframe
 				{ ...props }
+				style={ {
+					...props.style,
+					height: expand ? contentHeight : props.style?.height,
+					marginTop: scale
+						? -marginFromScaling + frameSize
+						: props.style?.marginTop,
+					marginBottom: scale
+						? -marginFromScaling + frameSize
+						: props.style?.marginBottom,
+					transform: scale
+						? `scale( ${ scale } )`
+						: props.style?.transform,
+					transition: 'all .3s',
+				} }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }
 				// Correct doctype is required to enable rendering in standards
@@ -265,13 +285,6 @@ function Iframe( {
 							<head ref={ headRef }>
 								{ styleAssets }
 								{ head }
-								<style>
-									{ `html { transition: background 5s; ${
-										frameSize
-											? 'background: #2f2f2f; transition: background 0s;'
-											: ''
-									} }` }
-								</style>
 							</head>
 							<body
 								ref={ bodyRef }
@@ -280,17 +293,6 @@ function Iframe( {
 									'editor-styles-wrapper',
 									...bodyClasses
 								) }
-								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 } )`,
-								} }
 							>
 								{ contentResizeListener }
 								<StyleProvider document={ iframeDocument }>

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

@@ -54,6 +54,7 @@ export default function AspectRatioDropdown( { toggleProps } ) {
 						} }
 						value={ aspect }
 						aspectRatios={ [
+							// All ratios should be mirrored in PostFeaturedImage in @wordpress/block-library
 							{
 								title: __( 'Original' ),
 								aspect: defaultAspect,

package/src/components/image-size-control/index.js

@@ -5,7 +5,8 @@ import {
 	Button,
 	ButtonGroup,
 	SelectControl,
-	TextControl,
+	__experimentalNumberControl as NumberControl,
+	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -46,12 +47,10 @@ export default function ImageSizeControl( {
 			) }
 			{ isResizable && (
 				<div className="block-editor-image-size-control">
-					<p className="block-editor-image-size-control__row">
-						{ __( 'Image dimensions' ) }
-					</p>
-					<div className="block-editor-image-size-control__row">
-						<TextControl
-							type="number"
+					<p>{ __( 'Image dimensions' ) }</p>
+
+					<HStack align="baseline" spacing="3">
+						<NumberControl
 							className="block-editor-image-size-control__width"
 							label={ __( 'Width' ) }
 							value={ currentWidth }
@@ -60,8 +59,7 @@ export default function ImageSizeControl( {
 								updateDimension( 'width', value )
 							}
 						/>
-						<TextControl
-							type="number"
+						<NumberControl
 							className="block-editor-image-size-control__height"
 							label={ __( 'Height' ) }
 							value={ currentHeight }
@@ -70,8 +68,8 @@ export default function ImageSizeControl( {
 								updateDimension( 'height', value )
 							}
 						/>
-					</div>
-					<div className="block-editor-image-size-control__row">
+					</HStack>
+					<HStack>
 						<ButtonGroup aria-label={ __( 'Image size presets' ) }>
 							{ IMAGE_SIZE_PRESETS.map( ( scale ) => {
 								const scaledWidth = Math.round(
@@ -108,7 +106,7 @@ export default function ImageSizeControl( {
 						<Button isSmall onClick={ () => updateDimensions() }>
 							{ __( 'Reset' ) }
 						</Button>
-					</div>
+					</HStack>
 				</div>
 			) }
 		</>

package/src/components/image-size-control/style.scss

@@ -1,26 +1,8 @@
 .block-editor-image-size-control {
 	margin-bottom: 1em;
 
-	.block-editor-image-size-control__row {
-		display: flex;
-		justify-content: space-between;
-
-		.block-editor-image-size-control__width,
-		.block-editor-image-size-control__height {
-			margin-bottom: 0.5em;
-
-			// Fix the text and placeholder text being misaligned in Safari
-			input {
-				line-height: 1.25;
-			}
-		}
-
-		.block-editor-image-size-control__width {
-			margin-right: 5px;
-		}
-
-		.block-editor-image-size-control__height {
-			margin-left: 5px;
-		}
+	.block-editor-image-size-control__width,
+	.block-editor-image-size-control__height {
+		margin-bottom: 1.115em;
 	}
 }

package/src/components/index.native.js

@@ -74,6 +74,11 @@ export {
 } from './block-settings';
 export { default as VideoPlayer, VIDEO_ASPECT_RATIO } from './video-player';
 
+export {
+	getSpacingPresetCssVar,
+	getCustomValueFromPreset,
+	isValueSpacingPreset,
+} from './spacing-sizes-control/utils';
 // Content Related Components.
 export { default as BlockList } from './block-list';
 export { default as BlockMover } from './block-mover';

package/src/components/inner-blocks/test/__snapshots__/index.js.snap

@@ -9,7 +9,7 @@ exports[`InnerBlocks should force serialize for invalid block with inner blocks
 `;
 
 exports[`InnerBlocks should return element as string, with inner blocks 1`] = `
-"<div>Bananas<!-- wp:fruit {\\"fruit\\":\\"Apples\\"} -->
+"<div>Bananas<!-- wp:fruit {"fruit":"Apples"} -->
 <div>Apples</div>
 <!-- /wp:fruit --></div>"
 `;