@wordpress/block-editor 11.8.0 → 12.0.0

package/src/components/block-tools/style.scss

@@ -89,6 +89,9 @@
  * Block Toolbar when contextual.
  */
 
+// Base left position for the toolbar when fixed.
+@include editor-left(".block-editor-block-contextual-toolbar.is-fixed");
+
 .block-editor-block-contextual-toolbar {
 	// Block UI appearance.
 	display: inline-flex;
@@ -104,11 +107,9 @@
 	&.is-fixed {
 		position: sticky;
 		top: 0;
-		width: 100%;
 		z-index: z-index(".block-editor-block-popover");
-		// Fill up when empty
-		min-height: $block-toolbar-height;
 		display: block;
+		width: 100%;
 
 		border: none;
 		border-bottom: $border-width solid $gray-200;
@@ -119,6 +120,159 @@
 			border-right-color: $gray-200;
 		}
 	}
+
+	// on desktop and tablet viewports the toolbar is fixed
+	// on top of interface header
+
+	@include break-medium() {
+		&.is-fixed {
+
+			// leave room for block inserter
+			margin-left: $grid-unit-80;
+			// position on top of interface header
+			position: fixed;
+			top: $admin-bar-height + $grid-unit;
+			// Don't fill up when empty
+			min-height: initial;
+			// remove the border
+			border-bottom: none;
+			// has to be flex for collapse button to fit
+			display: flex;
+
+			&.is-collapsed {
+				width: initial;
+				margin-left: $grid-unit-80 * 3 + $grid-unit-30;
+			}
+
+			.is-fullscreen-mode & {
+				// leave room for block inserter
+				margin-left: $grid-unit-80 + $grid-unit-70;
+				top: $grid-unit;
+				&.is-collapsed {
+					width: initial;
+					margin-left: $grid-unit-80 * 4 + $grid-unit-30;
+				}
+			}
+
+			& > .block-editor-block-toolbar__group-collapse-fixed-toolbar {
+				border: none;
+
+				// Add a border as separator in the block toolbar.
+				&::after {
+					content: "";
+					width: $border-width;
+					height: 24px;
+					margin-top: $grid-unit + $grid-unit-05;
+					margin-bottom: $grid-unit + $grid-unit-05;
+					background-color: $gray-300;
+					position: absolute;
+					left: 44px;
+					top: -1px;
+				}
+			}
+
+			& > .block-editor-block-toolbar__group-expand-fixed-toolbar {
+				border: none;
+
+				// Add a border as separator in the block toolbar.
+				&::before {
+					content: "";
+					width: $border-width;
+					margin-top: $grid-unit + $grid-unit-05;
+					margin-bottom: $grid-unit + $grid-unit-05;
+					background-color: $gray-300;
+					position: relative;
+					left: -12px; //the padding of buttons
+					height: 24px;
+				}
+			}
+
+			.show-icon-labels & {
+
+				margin-left: $grid-unit-80;
+
+				&.is-collapsed {
+					margin-left: $grid-unit-80 * 6;
+				}
+
+				.is-fullscreen-mode & {
+					margin-left: $grid-unit-80 + $grid-unit-80;
+					&.is-collapsed {
+						margin-left: $grid-unit-80 * 7;
+					}
+				}
+
+
+				.block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
+					left: 0;
+				}
+
+				.block-editor-block-toolbar__block-controls .block-editor-block-mover {
+					border-left: none;
+					&::before {
+						content: "";
+						width: $border-width;
+						margin-top: $grid-unit + $grid-unit-05;
+						margin-bottom: $grid-unit + $grid-unit-05;
+						background-color: $gray-300;
+						position: relative;
+					}
+				}
+			}
+		}
+
+		&.is-fixed .block-editor-block-parent-selector {
+			.block-editor-block-parent-selector__button {
+				position: relative;
+				top: -1px;
+				border: 0;
+				padding-right: 6px;
+				padding-left: 6px;
+				&::after {
+					content: "\00B7";
+					font-size: 16px;
+					line-height: $grid-unit-40 + $grid-unit-10;
+					position: absolute;
+					left: $grid-unit-40 + $grid-unit-15 + 2px;
+					bottom: $grid-unit-05;
+				}
+			}
+		}
+
+		&:not(.is-fixed) .block-editor-block-parent-selector {
+			position: absolute;
+			top: -$border-width;
+			left: calc(-#{$grid-unit-60} - #{$grid-unit-10} - #{$border-width});
+
+			.show-icon-labels & {
+				position: relative;
+				left: auto;
+				top: auto;
+				margin-top: -$border-width;
+				margin-left: -$border-width;
+				margin-bottom: -$border-width;
+			}
+		}
+	}
+
+	// on tablet vewports the toolbar is fixed
+	// on top of interface header and covers the whole header
+	// except for the inserter on the left
+	@include break-medium() {
+		&.is-fixed {
+			width: 100%;
+		}
+	}
+
+	// on desktop viewports the toolbar is fixed
+	// on top of interface header and leaves room
+	// for the block inserter the publish button
+	@include break-large() {
+		&.is-fixed {
+			width: initial;
+		}
+	}
+
 }
 
 /**

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

@@ -68,29 +68,33 @@ function useDarkThemeBodyClassName( styles ) {
 }
 
 export default function EditorStyles( { styles } ) {
+	const stylesArray = useMemo(
+		() => Object.values( styles ?? [] ),
+		[ styles ]
+	);
 	const transformedStyles = useMemo(
 		() =>
 			transformStyles(
-				styles.filter( ( style ) => style?.css ),
+				stylesArray.filter( ( style ) => style?.css ),
 				EDITOR_STYLES_SELECTOR
 			),
-		[ styles ]
+		[ stylesArray ]
 	);
 
 	const transformedSvgs = useMemo(
 		() =>
-			styles
+			stylesArray
 				.filter( ( style ) => style.__unstableType === 'svgs' )
 				.map( ( style ) => style.assets )
 				.join( '' ),
-		[ styles ]
+		[ stylesArray ]
 	);
 
 	return (
 		<>
 			{ /* Use an empty style element to have a document reference,
 			     but this could be any element. */ }
-			<style ref={ useDarkThemeBodyClassName( styles ) } />
+			<style ref={ useDarkThemeBodyClassName( stylesArray ) } />
 			{ transformedStyles.map( ( css, index ) => (
 				<style key={ index }>{ css }</style>
 			) ) }

package/src/components/font-sizes/fluid-utils.js

@@ -6,18 +6,17 @@
 
 // Defaults.
 const DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';
-const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '768px';
+const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '320px';
 const DEFAULT_SCALE_FACTOR = 1;
-const DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;
+const DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN = 0.25;
+const DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX = 0.75;
 const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
 
 /**
  * Computes a fluid font-size value that uses clamp(). A minimum and maximum
  * font size OR a single font size can be specified.
  *
- * If a single font size is specified, it is scaled up and down by
- * minimumFontSizeFactor and maximumFontSizeFactor to arrive at the minimum and
- * maximum sizes.
+ * If a single font size is specified, it is scaled up and down using a logarithmic scale.
  *
  * @example
  * ```js
@@ -33,14 +32,13 @@ const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
  * ```
  *
  * @param {Object}        args
- * @param {?string}       args.minimumViewPortWidth  Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.
- * @param {?string}       args.maximumViewPortWidth  Maximum size up to which type will have fluidity. Optional if fontSize is specified.
- * @param {string|number} [args.fontSize]            Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified.
- * @param {?string}       args.maximumFontSize       Maximum font size for any clamp() calculation. Optional.
- * @param {?string}       args.minimumFontSize       Minimum font size for any clamp() calculation. Optional.
- * @param {?number}       args.scaleFactor           A scale factor to determine how fast a font scales within boundaries. Optional.
- * @param {?number}       args.minimumFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
- * @param {?string}       args.minimumFontSizeLimit  The smallest a calculated font size may be. Optional.
+ * @param {?string}       args.minimumViewPortWidth Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.
+ * @param {?string}       args.maximumViewPortWidth Maximum size up to which type will have fluidity. Optional if fontSize is specified.
+ * @param {string|number} [args.fontSize]           Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified.
+ * @param {?string}       args.maximumFontSize      Maximum font size for any clamp() calculation. Optional.
+ * @param {?string}       args.minimumFontSize      Minimum font size for any clamp() calculation. Optional.
+ * @param {?number}       args.scaleFactor          A scale factor to determine how fast a font scales within boundaries. Optional.
+ * @param {?string}       args.minimumFontSizeLimit The smallest a calculated font size may be. Optional.
  *
  * @return {string|null} A font-size value using clamp().
  */
@@ -51,7 +49,6 @@ export function getComputedFluidTypographyValue( {
 	minimumViewPortWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH,
 	maximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
 	scaleFactor = DEFAULT_SCALE_FACTOR,
-	minimumFontSizeFactor = DEFAULT_MINIMUM_FONT_SIZE_FACTOR,
 	minimumFontSizeLimit,
 } ) {
 	// Validate incoming settings and set defaults.
@@ -106,6 +103,26 @@ export function getComputedFluidTypographyValue( {
 		 * the given font size multiplied by the min font size scale factor.
 		 */
 		if ( ! minimumFontSize ) {
+			const fontSizeValueInPx =
+				fontSizeParsed.unit === 'px'
+					? fontSizeParsed.value
+					: fontSizeParsed.value * 16;
+
+			/*
+			 * The scale factor is a multiplier that affects how quickly the curve will move towards the minimum,
+			 * that is, how quickly the size factor reaches 0 given increasing font size values.
+			 * For a - b * log2(), lower values of b will make the curve move towards the minimum faster.
+			 * The scale factor is constrained between min and max values.
+			 */
+			const minimumFontSizeFactor = Math.min(
+				Math.max(
+					1 - 0.075 * Math.log2( fontSizeValueInPx ),
+					DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN
+				),
+				DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX
+			);
+
+			// Calculates the minimum font size.
 			const calculatedMinimumFontSize = roundToPrecision(
 				fontSizeParsed.value * minimumFontSizeFactor,
 				3

package/src/components/font-sizes/test/fluid-utils.js

@@ -24,7 +24,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			maximumFontSize: '45px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(20px, 1.25rem + ((1vw - 7.68px) * 3.005), 45px)'
+			'clamp(20px, 1.25rem + ((1vw - 3.2px) * 1.953), 45px)'
 		);
 	} );
 
@@ -33,7 +33,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			fontSize: '30px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 0.901), 30px)'
+			'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 0.863), 30px)'
 		);
 	} );
 
@@ -42,7 +42,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			fontSize: '30px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 0.901), 30px)'
+			'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 0.863), 30px)'
 		);
 	} );
 
@@ -53,7 +53,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			maximumViewPortWidth: '1000px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 5px) * 1.5), 30px)'
+			'clamp(18.959px, 1.185rem + ((1vw - 5px) * 2.208), 30px)'
 		);
 	} );
 
@@ -63,18 +63,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			scaleFactor: '2',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 1.803), 30px)'
-		);
-	} );
-
-	it( 'should return a fluid font size when given a min and max font size factor', () => {
-		const fluidTypographyValues = getComputedFluidTypographyValue( {
-			fontSize: '30px',
-			minimumFontSizeFactor: '0.5',
-			maximumFontSizeFactor: '2',
-		} );
-		expect( fluidTypographyValues ).toBe(
-			'clamp(15px, 0.938rem + ((1vw - 7.68px) * 1.803), 30px)'
+			'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.725), 30px)'
 		);
 	} );
 

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

@@ -45,35 +45,6 @@ function useHasBorderWidthControl( settings ) {
 	return settings?.border?.width;
 }
 
-function applyFallbackStyle( border ) {
-	if ( ! border ) {
-		return border;
-	}
-
-	if ( ! border.style && ( border.color || border.width ) ) {
-		return { ...border, style: 'solid' };
-	}
-
-	return border;
-}
-
-function applyAllFallbackStyles( border ) {
-	if ( ! border ) {
-		return border;
-	}
-
-	if ( hasSplitBorders( border ) ) {
-		return {
-			top: applyFallbackStyle( border.top ),
-			right: applyFallbackStyle( border.right ),
-			bottom: applyFallbackStyle( border.bottom ),
-			left: applyFallbackStyle( border.left ),
-		};
-	}
-
-	return applyFallbackStyle( border );
-}
-
 function BorderToolsPanel( {
 	resetAllFilter,
 	onChange,
@@ -186,7 +157,7 @@ export default function BorderPanel( {
 	const onBorderChange = ( newBorder ) => {
 		// Ensure we have a visible border style when a border width or
 		// color is being selected.
-		const updatedBorder = applyAllFallbackStyles( newBorder );
+		const updatedBorder = { ...newBorder };
 
 		if ( hasSplitBorders( updatedBorder ) ) {
 			[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {

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

@@ -28,7 +28,7 @@ import { __ } from '@wordpress/i18n';
 import ColorGradientControl from '../colors-gradients/control';
 import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
 import { getValueFromVariable } from './utils';
-import { immutableSet } from '../../utils/object';
+import { setImmutably } from '../../utils/object';
 
 export function useHasColorPanel( settings ) {
 	const hasTextPanel = useHasTextPanel( settings );
@@ -330,7 +330,7 @@ export default function ColorPanel( {
 	const hasTextColor = () => !! userTextColor;
 	const setTextColor = ( newColor ) => {
 		onChange(
-			immutableSet(
+			setImmutably(
 				value,
 				[ 'color', 'text' ],
 				encodeColorValue( newColor )
@@ -347,7 +347,7 @@ export default function ColorPanel( {
 	const userGradient = decodeValue( value?.color?.gradient );
 	const hasBackground = () => !! userBackgroundColor || !! userGradient;
 	const setBackgroundColor = ( newColor ) => {
-		const newValue = immutableSet(
+		const newValue = setImmutably(
 			value,
 			[ 'color', 'background' ],
 			encodeColorValue( newColor )
@@ -356,7 +356,7 @@ export default function ColorPanel( {
 		onChange( newValue );
 	};
 	const setGradient = ( newGradient ) => {
-		const newValue = immutableSet(
+		const newValue = setImmutably(
 			value,
 			[ 'color', 'gradient' ],
 			encodeGradientValue( newGradient )
@@ -365,7 +365,7 @@ export default function ColorPanel( {
 		onChange( newValue );
 	};
 	const resetBackground = () => {
-		const newValue = immutableSet(
+		const newValue = setImmutably(
 			value,
 			[ 'color', 'background' ],
 			undefined
@@ -382,7 +382,7 @@ export default function ColorPanel( {
 	const userLinkColor = decodeValue( value?.elements?.link?.color?.text );
 	const setLinkColor = ( newColor ) => {
 		onChange(
-			immutableSet(
+			setImmutably(
 				value,
 				[ 'elements', 'link', 'color', 'text' ],
 				encodeColorValue( newColor )
@@ -397,7 +397,7 @@ export default function ColorPanel( {
 	);
 	const setHoverLinkColor = ( newColor ) => {
 		onChange(
-			immutableSet(
+			setImmutably(
 				value,
 				[ 'elements', 'link', ':hover', 'color', 'text' ],
 				encodeColorValue( newColor )
@@ -406,12 +406,12 @@ export default function ColorPanel( {
 	};
 	const hasLink = () => !! userLinkColor || !! userHoverLinkColor;
 	const resetLink = () => {
-		let newValue = immutableSet(
+		let newValue = setImmutably(
 			value,
 			[ 'elements', 'link', ':hover', 'color', 'text' ],
 			undefined
 		);
-		newValue = immutableSet(
+		newValue = setImmutably(
 			newValue,
 			[ 'elements', 'link', 'color', 'text' ],
 			undefined
@@ -591,7 +591,7 @@ export default function ColorPanel( {
 				elementGradientUserColor
 			);
 		const resetElement = () => {
-			const newValue = immutableSet(
+			const newValue = setImmutably(
 				value,
 				[ 'elements', name, 'color', 'background' ],
 				undefined
@@ -603,7 +603,7 @@ export default function ColorPanel( {
 
 		const setElementTextColor = ( newTextColor ) => {
 			onChange(
-				immutableSet(
+				setImmutably(
 					value,
 					[ 'elements', name, 'color', 'text' ],
 					encodeColorValue( newTextColor )
@@ -611,7 +611,7 @@ export default function ColorPanel( {
 			);
 		};
 		const setElementBackgroundColor = ( newBackgroundColor ) => {
-			const newValue = immutableSet(
+			const newValue = setImmutably(
 				value,
 				[ 'elements', name, 'color', 'background' ],
 				encodeColorValue( newBackgroundColor )
@@ -620,7 +620,7 @@ export default function ColorPanel( {
 			onChange( newValue );
 		};
 		const setElementGradient = ( newGradient ) => {
-			const newValue = immutableSet(
+			const newValue = setImmutably(
 				value,
 				[ 'elements', name, 'color', 'gradient' ],
 				encodeGradientValue( newGradient )