@wordpress/block-editor 10.0.5 → 10.0.7

package/src/components/spacing-sizes-control/style.scss

@@ -2,7 +2,7 @@
 	display: grid;
 	grid-template-columns: auto 1fr auto;
 	align-items: center;
-	grid-template-rows: 25px auto;
+	grid-template-rows: 16px auto;
 }
 
 .component-spacing-sizes-control {
@@ -27,7 +27,7 @@
 		grid-column: 1 / 1;
 		justify-content: left;
 		height: $grid-unit-20;
-		margin-top: $grid-unit-15;
+		margin-top: $grid-unit-20;
 	}
 
 	.components-spacing-sizes-control__side-label {
@@ -37,8 +37,9 @@
 	}
 
 	&.is-unlinked {
-		.components-range-control.components-spacing-sizes-control__range-control {
-			margin-top: $grid-unit-15;
+		.components-range-control.components-spacing-sizes-control__range-control,
+		.components-spacing-sizes-control__custom-value-input {
+			margin-top: $grid-unit-10;
 		}
 	}
 
@@ -60,12 +61,7 @@
 		grid-column: 2 / 2;
 		grid-row: 1 / 1;
 		justify-self: end;
-		padding: 0;
-		&.is-small.has-icon {
-			padding: 0;
-			min-width: $icon-size;
-			height: $grid-unit-20;
-		}
+		margin-top: -4px;
 	}
 
 	.component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
@@ -75,33 +71,43 @@
 	.components-spacing-sizes-control__custom-toggle-single {
 		grid-column: 3 / 3;
 		justify-self: end;
-		&.is-small.has-icon {
-			padding: 0;
-			min-width: $icon-size;
-			height: $grid-unit-20;
-			margin-top: $grid-unit-15;
-		}
+		margin-top: $grid-unit-15;
 	}
 
 	.component-spacing-sizes-control__linked-button {
 		grid-column: 3 / 3;
 		grid-row: 1 / 1;
 		justify-self: end;
+		line-height: 0;
+		margin-top: -4px;
 	}
 
 	.components-spacing-sizes-control__custom-value-range {
 		grid-column: span 2;
-		margin-left: $grid-unit-10;
-		height: 30px;
+		margin-left: $grid-unit-20;
+		margin-top: 8px;
 	}
 
 	.components-spacing-sizes-control__custom-value-input {
 		width: 124px;
+		margin-top: 8px;
+	}
+
+	.components-range-control {
+		height: 40px;
+		/* Vertically center the RangeControl until it has true 40px height. */
+		display: flex;
+		align-items: center;
+
+		> .components-base-control__field {
+			/* Fixes RangeControl contents when the outer wrapper is flex */
+			flex: 1;
+		}
 	}
 
 	.components-spacing-sizes-control__range-control {
 		grid-column: span 3;
-		height: 40px;
+		margin-top: 8px;
 	}
 
 	.components-range-control__mark {
@@ -125,5 +131,6 @@
 
 	.components-spacing-sizes-control__custom-select-control {
 		grid-column: span 3;
+		margin-top: $grid-unit-10;
 	}
 }

package/src/hooks/font-size.js

@@ -5,6 +5,7 @@ import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import TokenList from '@wordpress/token-list';
 import { createHigherOrderComponent } from '@wordpress/compose';
+import { select } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -14,6 +15,7 @@ import {
 	getFontSizeClass,
 	getFontSizeObjectByValue,
 	FontSizePicker,
+	getComputedFluidTypographyValue,
 } from '../components/font-sizes';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
 import {
@@ -22,6 +24,7 @@ import {
 	shouldSkipSerialization,
 } from './utils';
 import useSetting from '../components/use-setting';
+import { store as blockEditorStore } from '../store';
 
 export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
 
@@ -282,6 +285,69 @@ export function addTransforms( result, source, index, results ) {
 	);
 }
 
+/**
+ * Allow custom font sizes to appear fluid when fluid typography is enabled at
+ * the theme level.
+ *
+ * Adds a custom getEditWrapperProps() callback to all block types that support
+ * font sizes. Then, if fluid typography is enabled, this callback will swap any
+ * custom font size in style.fontSize with a fluid font size (i.e. one that uses
+ * clamp()).
+ *
+ * It's important that this hook runs after 'core/style/addEditProps' sets
+ * style.fontSize as otherwise fontSize will be overwritten.
+ *
+ * @param {Object} blockType Block settings object.
+ */
+function addEditPropsForFluidCustomFontSizes( blockType ) {
+	if (
+		! hasBlockSupport( blockType, FONT_SIZE_SUPPORT_KEY ) ||
+		shouldSkipSerialization( blockType, TYPOGRAPHY_SUPPORT_KEY, 'fontSize' )
+	) {
+		return blockType;
+	}
+
+	const existingGetEditWrapperProps = blockType.getEditWrapperProps;
+
+	blockType.getEditWrapperProps = ( attributes ) => {
+		const wrapperProps = existingGetEditWrapperProps
+			? existingGetEditWrapperProps( attributes )
+			: {};
+
+		const fontSize = wrapperProps?.style?.fontSize;
+
+		// TODO: This sucks! We should be using useSetting( 'typography.fluid' )
+		// or even useSelect( blockEditorStore ). We can't do either here
+		// because getEditWrapperProps is a plain JavaScript function called by
+		// BlockListBlock and not a React component rendered within
+		// BlockListContext.Provider. If we set fontSize using editor.
+		// BlockListBlock instead of using getEditWrapperProps then the value is
+		// clobbered when the core/style/addEditProps filter runs.
+		const isFluidTypographyEnabled =
+			!! select( blockEditorStore ).getSettings().__experimentalFeatures
+				?.typography?.fluid;
+
+		const newFontSize =
+			fontSize && isFluidTypographyEnabled
+				? getComputedFluidTypographyValue( { fontSize } )
+				: null;
+
+		if ( newFontSize === null ) {
+			return wrapperProps;
+		}
+
+		return {
+			...wrapperProps,
+			style: {
+				...wrapperProps?.style,
+				fontSize: newFontSize,
+			},
+		};
+	};
+
+	return blockType;
+}
+
 addFilter(
 	'blocks.registerBlockType',
 	'core/font/addAttribute',
@@ -307,3 +373,12 @@ addFilter(
 	'core/font-size/addTransforms',
 	addTransforms
 );
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/font-size/addEditPropsForFluidCustomFontSizes',
+	addEditPropsForFluidCustomFontSizes,
+	// Run after 'core/style/addEditProps' so that the style object has already
+	// been translated into inline CSS.
+	11
+);

package/src/hooks/test/use-typography-props.js

@@ -25,4 +25,26 @@ describe( 'getTypographyClassesAndStyles', () => {
 			},
 		} );
 	} );
+
+	it( 'should return fluid font size styles', () => {
+		const attributes = {
+			fontFamily: 'tofu',
+			style: {
+				typography: {
+					letterSpacing: '22px',
+					fontSize: '2rem',
+					textTransform: 'uppercase',
+				},
+			},
+		};
+		expect( getTypographyClassesAndStyles( attributes, true ) ).toEqual( {
+			className: 'has-tofu-font-family',
+			style: {
+				letterSpacing: '22px',
+				fontSize:
+					'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 2.885), 3rem)',
+				textTransform: 'uppercase',
+			},
+		} );
+	} );
 } );

package/src/hooks/use-typography-props.js

@@ -9,6 +9,7 @@ import classnames from 'classnames';
  */
 import { getInlineStyles } from './style';
 import { getFontSizeClass } from '../components/font-sizes';
+import { getComputedFluidTypographyValue } from '../components/font-sizes/fluid-utils';
 
 // This utility is intended to assist where the serialization of the typography
 // block support is being skipped for a block but the typography related CSS
@@ -18,12 +19,26 @@ import { getFontSizeClass } from '../components/font-sizes';
  * Provides the CSS class names and inline styles for a block's typography support
  * attributes.
  *
- * @param {Object} attributes Block attributes.
+ * @param {Object}  attributes            Block attributes.
+ * @param {boolean} isFluidFontSizeActive Whether the function should try to convert font sizes to fluid values.
  *
  * @return {Object} Typography block support derived CSS classes & styles.
  */
-export function getTypographyClassesAndStyles( attributes ) {
-	const typographyStyles = attributes?.style?.typography || {};
+export function getTypographyClassesAndStyles(
+	attributes,
+	isFluidFontSizeActive
+) {
+	let typographyStyles = attributes?.style?.typography || {};
+
+	if ( isFluidFontSizeActive ) {
+		typographyStyles = {
+			...typographyStyles,
+			fontSize: getComputedFluidTypographyValue( {
+				fontSize: attributes?.style?.typography?.fontSize,
+			} ),
+		};
+	}
+
 	const style = getInlineStyles( { typography: typographyStyles } );
 	const fontFamilyClassName = !! attributes?.fontFamily
 		? `has-${ kebabCase( attributes.fontFamily ) }-font-family`