@wordpress/block-editor 10.3.0 → 10.5.0

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -117,114 +117,116 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   min-width: 0;
 }
 
-<div
-  class="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
->
+<div>
   <div
-    class="components-base-control__field emotion-2 emotion-3"
+    class="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
   >
-    <fieldset
-      class="block-editor-color-gradient-control__fieldset"
+    <div
+      class="components-base-control__field emotion-2 emotion-3"
     >
-      <div
-        class="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
-        data-wp-c16t="true"
-        data-wp-component="VStack"
+      <fieldset
+        class="block-editor-color-gradient-control__fieldset"
       >
-        <legend>
-          <div
-            class="block-editor-color-gradient-control__color-indicator"
-          >
-            <span
-              class="components-base-control__label emotion-6 emotion-7"
-            >
-              Test Color
-            </span>
-          </div>
-        </legend>
         <div
-          class="block-editor-color-gradient-control__panel"
+          class="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
+          data-wp-c16t="true"
+          data-wp-component="VStack"
         >
+          <legend>
+            <div
+              class="block-editor-color-gradient-control__color-indicator"
+            >
+              <span
+                class="components-base-control__label emotion-6 emotion-7"
+              >
+                Test Color
+              </span>
+            </div>
+          </legend>
           <div
-            class="components-flex components-h-stack components-v-stack emotion-8 emotion-5"
-            data-wp-c16t="true"
-            data-wp-component="VStack"
+            class="block-editor-color-gradient-control__panel"
           >
             <div
-              class="components-dropdown"
-              tabindex="-1"
+              class="components-flex components-h-stack components-v-stack emotion-8 emotion-5"
+              data-wp-c16t="true"
+              data-wp-component="VStack"
             >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
-                class="components-flex components-color-palette__custom-color emotion-10 emotion-5"
-                data-wp-c16t="true"
-                data-wp-component="Flex"
-                style="background: rgb(255, 0, 0); color: rgb(0, 0, 0);"
+              <div
+                class="components-dropdown"
+                tabindex="-1"
               >
-                <span
-                  class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-13 emotion-5"
-                  data-wp-c16t="true"
-                  data-wp-component="FlexItem"
-                >
-                  red
-                </span>
-                <span
-                  class="components-flex-item components-color-palette__custom-color-value emotion-15 emotion-5"
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
+                  class="components-flex components-color-palette__custom-color emotion-10 emotion-5"
                   data-wp-c16t="true"
-                  data-wp-component="FlexItem"
+                  data-wp-component="Flex"
+                  style="background: rgb(255, 0, 0); color: rgb(0, 0, 0);"
                 >
-                  f00
-                </span>
-              </button>
-            </div>
-            <div
-              class="components-circular-option-picker"
-            >
+                  <span
+                    class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-13 emotion-5"
+                    data-wp-c16t="true"
+                    data-wp-component="FlexItem"
+                  >
+                    red
+                  </span>
+                  <span
+                    class="components-flex-item components-color-palette__custom-color-value emotion-15 emotion-5"
+                    data-wp-c16t="true"
+                    data-wp-component="FlexItem"
+                  >
+                    f00
+                  </span>
+                </button>
+              </div>
               <div
-                class="components-circular-option-picker__swatches"
+                class="components-circular-option-picker"
               >
                 <div
-                  class="components-circular-option-picker__option-wrapper"
+                  class="components-circular-option-picker__swatches"
                 >
-                  <button
-                    aria-label="Color: red"
-                    aria-pressed="true"
-                    class="components-button components-circular-option-picker__option is-pressed"
-                    style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
-                    type="button"
-                  />
-                  <svg
-                    aria-hidden="true"
-                    fill="#000"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    class="components-circular-option-picker__option-wrapper"
                   >
-                    <path
-                      d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                    <button
+                      aria-label="Color: red"
+                      aria-pressed="true"
+                      class="components-button components-circular-option-picker__option is-pressed"
+                      style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
+                      type="button"
                     />
-                  </svg>
+                    <svg
+                      aria-hidden="true"
+                      fill="#000"
+                      focusable="false"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                      />
+                    </svg>
+                  </div>
                 </div>
-              </div>
-              <div
-                class="components-circular-option-picker__custom-clear-wrapper"
-              >
-                <button
-                  class="components-button components-circular-option-picker__clear is-tertiary"
-                  type="button"
+                <div
+                  class="components-circular-option-picker__custom-clear-wrapper"
                 >
-                  Clear
-                </button>
+                  <button
+                    class="components-button components-circular-option-picker__clear is-tertiary"
+                    type="button"
+                  >
+                    Clear
+                  </button>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </fieldset>
+      </fieldset>
+    </div>
   </div>
 </div>
 `;

package/src/components/color-palette/test/control.js

@@ -22,6 +22,6 @@ describe( 'ColorPaletteControl', () => {
 			/>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/components/colors/with-colors.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { kebabCase, reduce } from 'lodash';
+import { kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -83,18 +83,14 @@ const withEditorColorPalette = () =>
  * @return {WPComponent} The component that can be used as a HOC.
  */
 function createColorHOC( colorTypes, withColorPalette ) {
-	const colorMap = reduce(
-		colorTypes,
-		( colorObject, colorType ) => {
-			return {
-				...colorObject,
-				...( typeof colorType === 'string'
-					? { [ colorType ]: kebabCase( colorType ) }
-					: colorType ),
-			};
-		},
-		{}
-	);
+	const colorMap = colorTypes.reduce( ( colorObject, colorType ) => {
+		return {
+			...colorObject,
+			...( typeof colorType === 'string'
+				? { [ colorType ]: kebabCase( colorType ) }
+				: colorType ),
+		};
+	}, {} );
 
 	return compose( [
 		withColorPalette,
@@ -118,13 +114,8 @@ function createColorHOC( colorTypes, withColorPalette ) {
 				}
 
 				createSetters() {
-					return reduce(
-						colorMap,
-						(
-							settersAccumulator,
-							colorContext,
-							colorAttributeName
-						) => {
+					return Object.keys( colorMap ).reduce(
+						( settersAccumulator, colorAttributeName ) => {
 							const upperFirstColorAttributeName =
 								upperFirst( colorAttributeName );
 							const customColorAttributeName = `custom${ upperFirstColorAttributeName }`;
@@ -163,9 +154,8 @@ function createColorHOC( colorTypes, withColorPalette ) {
 					{ attributes, colors },
 					previousState
 				) {
-					return reduce(
-						colorMap,
-						( newState, colorContext, colorAttributeName ) => {
+					return Object.entries( colorMap ).reduce(
+						( newState, [ colorAttributeName, colorContext ] ) => {
 							const colorObject = getColorObjectByAttributeValues(
 								colors,
 								attributes[ colorAttributeName ],

package/src/components/default-block-appender/style.scss

@@ -34,6 +34,7 @@
 
 // The black plus that shows up on the right side of an empty paragraph block, or the initial appender
 // that exists only on empty documents.
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter,
 .block-editor-default-block-appender .block-editor-inserter {
 	position: absolute;
 	top: 0;

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

@@ -36,7 +36,7 @@ function DuotoneControl( {
 			popoverProps={ {
 				className: 'block-editor-duotone-control__popover',
 				headerTitle: __( 'Duotone' ),
-				isAlternate: true,
+				variant: 'toolbar',
 			} }
 			renderToggle={ ( { isOpen, onToggle } ) => {
 				const openOnArrowDown = ( event ) => {

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

@@ -9,7 +9,6 @@ const DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';
 const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '768px';
 const DEFAULT_SCALE_FACTOR = 1;
 const DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;
-const DEFAULT_MAXIMUM_FONT_SIZE_FACTOR = 1.5;
 const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
 
 /**
@@ -41,7 +40,6 @@ const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
  * @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 {?number}       args.maximumFontSizeFactor How much to scale defaultFontSize by to derive maximumFontSize. Optional.
  *
  * @return {string|null} A font-size value using clamp().
  */
@@ -53,15 +51,8 @@ export function getComputedFluidTypographyValue( {
 	maximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
 	scaleFactor = DEFAULT_SCALE_FACTOR,
 	minimumFontSizeFactor = DEFAULT_MINIMUM_FONT_SIZE_FACTOR,
-	maximumFontSizeFactor = DEFAULT_MAXIMUM_FONT_SIZE_FACTOR,
 	minimumFontSizeLimit = DEFAULT_MINIMUM_FONT_SIZE_LIMIT,
 } ) {
-	/*
-	 * Caches minimumFontSize in minimumFontSizeValue
-	 * so we can check if minimumFontSize exists later.
-	 */
-	let minimumFontSizeValue = minimumFontSize;
-
 	/*
 	 * Calculates missing minimumFontSize and maximumFontSize from
 	 * defaultFontSize if provided.
@@ -75,15 +66,6 @@ export function getComputedFluidTypographyValue( {
 			return null;
 		}
 
-		// If no minimumFontSize is provided, derive using min scale factor.
-		if ( ! minimumFontSizeValue ) {
-			minimumFontSizeValue =
-				roundToPrecision(
-					fontSizeParsed.value * minimumFontSizeFactor,
-					3
-				) + fontSizeParsed.unit;
-		}
-
 		// Parses the minimum font size limit, so we can perform checks using it.
 		const minimumFontSizeLimitParsed = getTypographyValueAndUnit(
 			minimumFontSizeLimit,
@@ -92,57 +74,51 @@ export function getComputedFluidTypographyValue( {
 			}
 		);
 
-		if ( !! minimumFontSizeLimitParsed?.value ) {
+		// Don't enforce minimum font size if a font size has explicitly set a min and max value.
+		if (
+			!! minimumFontSizeLimitParsed?.value &&
+			! minimumFontSize &&
+			! maximumFontSize
+		) {
 			/*
 			 * If a minimum size was not passed to this function
-			 * and the user-defined font size is lower than `minimumFontSizeLimit`,
-			 * then uses the user-defined font size as the minimum font-size.
+			 * and the user-defined font size is lower than $minimum_font_size_limit,
+			 * do not calculate a fluid value.
 			 */
-			if (
-				! minimumFontSize &&
-				fontSizeParsed?.value < minimumFontSizeLimitParsed?.value
-			) {
-				minimumFontSizeValue = `${ fontSizeParsed.value }${ fontSizeParsed.unit }`;
-			} else {
-				const minimumFontSizeParsed = getTypographyValueAndUnit(
-					minimumFontSizeValue,
-					{
-						coerceTo: fontSizeParsed.unit,
-					}
-				);
-
-				/*
-				 * Otherwise, if the passed or calculated minimum font size is lower than `minimumFontSizeLimit`
-				 * use `minimumFontSizeLimit` instead.
-				 */
-				if (
-					!! minimumFontSizeParsed?.value &&
-					minimumFontSizeParsed.value <
-						minimumFontSizeLimitParsed.value
-				) {
-					minimumFontSizeValue = `${ minimumFontSizeLimitParsed.value }${ minimumFontSizeLimitParsed.unit }`;
-				}
+			if ( fontSizeParsed?.value <= minimumFontSizeLimitParsed?.value ) {
+				return null;
 			}
 		}
 
-		// If no maximumFontSize is provided, derive using max scale factor.
+		// If no fluid max font size is available use the incoming value.
 		if ( ! maximumFontSize ) {
-			maximumFontSize =
-				roundToPrecision(
-					fontSizeParsed.value * maximumFontSizeFactor,
-					3
-				) + fontSizeParsed.unit;
+			maximumFontSize = `${ fontSizeParsed.value }${ fontSizeParsed.unit }`;
 		}
-	}
 
-	// Return early if one of the provided inputs is not provided.
-	if ( ! minimumFontSizeValue || ! maximumFontSize ) {
-		return null;
+		/*
+		 * If no minimumFontSize is provided, create one using
+		 * the given font size multiplied by the min font size scale factor.
+		 */
+		if ( ! minimumFontSize ) {
+			const calculatedMinimumFontSize = roundToPrecision(
+				fontSizeParsed.value * minimumFontSizeFactor,
+				3
+			);
+
+			// Only use calculated min font size if it's > $minimum_font_size_limit value.
+			if (
+				!! minimumFontSizeLimitParsed?.value &&
+				calculatedMinimumFontSize < minimumFontSizeLimitParsed?.value
+			) {
+				minimumFontSize = `${ minimumFontSizeLimitParsed.value }${ minimumFontSizeLimitParsed.unit }`;
+			} else {
+				minimumFontSize = `${ calculatedMinimumFontSize }${ fontSizeParsed.unit }`;
+			}
+		}
 	}
 
 	// Grab the minimum font size and normalize it in order to use the value for calculations.
-	const minimumFontSizeParsed =
-		getTypographyValueAndUnit( minimumFontSizeValue );
+	const minimumFontSizeParsed = getTypographyValueAndUnit( minimumFontSize );
 
 	// We get a 'preferred' unit to keep units consistent when calculating,
 	// otherwise the result will not be accurate.
@@ -159,12 +135,9 @@ export function getComputedFluidTypographyValue( {
 	}
 
 	// Uses rem for accessible fluid target font scaling.
-	const minimumFontSizeRem = getTypographyValueAndUnit(
-		minimumFontSizeValue,
-		{
-			coerceTo: 'rem',
-		}
-	);
+	const minimumFontSizeRem = getTypographyValueAndUnit( minimumFontSize, {
+		coerceTo: 'rem',
+	} );
 
 	// Viewport widths defined for fluid typography. Normalize units
 	const maximumViewPortWidthParsed = getTypographyValueAndUnit(
@@ -205,7 +178,7 @@ export function getComputedFluidTypographyValue( {
 	);
 	const fluidTargetFontSize = `${ minimumFontSizeRem.value }${ minimumFontSizeRem.unit } + ((1vw - ${ viewPortWidthOffset }) * ${ linearFactorScaled })`;
 
-	return `clamp(${ minimumFontSizeValue }, ${ fluidTargetFontSize }, ${ maximumFontSize })`;
+	return `clamp(${ minimumFontSize }, ${ fluidTargetFontSize }, ${ maximumFontSize })`;
 }
 
 /**

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

@@ -33,7 +33,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			fontSize: '30px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 2.704), 45px)'
+			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 0.901), 30px)'
 		);
 	} );
 
@@ -42,7 +42,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			fontSize: '30px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 2.704), 45px)'
+			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 0.901), 30px)'
 		);
 	} );
 
@@ -53,7 +53,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			maximumViewPortWidth: '1000px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 5px) * 4.5), 45px)'
+			'clamp(22.5px, 1.406rem + ((1vw - 5px) * 1.5), 30px)'
 		);
 	} );
 
@@ -63,7 +63,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			scaleFactor: '2',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 5.409), 45px)'
+			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 1.803), 30px)'
 		);
 	} );
 
@@ -74,7 +74,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			maximumFontSizeFactor: '2',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(15px, 0.938rem + ((1vw - 7.68px) * 5.409), 60px)'
+			'clamp(15px, 0.938rem + ((1vw - 7.68px) * 1.803), 30px)'
 		);
 	} );
 

package/src/components/font-sizes/with-font-sizes.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, pickBy, reduce, some } from 'lodash';
+import { find, pickBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -43,8 +43,7 @@ export default ( ...fontSizeNames ) => {
 	 * and the value is the custom font size attribute name.
 	 * Custom font size is automatically compted by appending custom followed by the font size attribute name in with the first letter capitalized.
 	 */
-	const fontSizeAttributeNames = reduce(
-		fontSizeNames,
+	const fontSizeAttributeNames = fontSizeNames.reduce(
 		( fontSizeAttributeNamesAccumulator, fontSizeAttributeName ) => {
 			fontSizeAttributeNamesAccumulator[
 				fontSizeAttributeName
@@ -81,12 +80,13 @@ export default ( ...fontSizeNames ) => {
 					}
 
 					createSetters() {
-						return reduce(
-							fontSizeAttributeNames,
+						return Object.entries( fontSizeAttributeNames ).reduce(
 							(
 								settersAccumulator,
-								customFontSizeAttributeName,
-								fontSizeAttributeName
+								[
+									fontSizeAttributeName,
+									customFontSizeAttributeName,
+								]
 							) => {
 								const upperFirstFontSizeAttributeName =
 									upperFirst( fontSizeAttributeName );
@@ -152,23 +152,25 @@ export default ( ...fontSizeNames ) => {
 						};
 
 						if (
-							! some(
-								fontSizeAttributeNames,
+							! Object.values( fontSizeAttributeNames ).some(
 								didAttributesChange
 							)
 						) {
 							return null;
 						}
 
-						const newState = reduce(
+						const newState = Object.entries(
 							pickBy(
 								fontSizeAttributeNames,
 								didAttributesChange
-							),
+							)
+						).reduce(
 							(
 								newStateAccumulator,
-								customFontSizeAttributeName,
-								fontSizeAttributeName
+								[
+									fontSizeAttributeName,
+									customFontSizeAttributeName,
+								]
 							) => {
 								const fontSizeAttributeValue =
 									attributes[ fontSizeAttributeName ];

package/src/components/iframe/index.js

@@ -282,7 +282,7 @@ function Iframe(
 
 	head = (
 		<>
-			<style>{ 'body{margin:0}' }</style>
+			<style>{ 'html{height:auto!important;}body{margin:0}' }</style>
 			{ styles.map(
 				( { tagName, href, id, rel, media, textContent } ) => {
 					const TagName = tagName.toLowerCase();

package/src/components/image-editor/constants.js

@@ -2,5 +2,5 @@ export const MIN_ZOOM = 100;
 export const MAX_ZOOM = 300;
 export const POPOVER_PROPS = {
 	position: 'bottom right',
-	isAlternate: true,
+	variant: 'toolbar',
 };

package/src/components/index.js

@@ -73,6 +73,7 @@ export { default as __experimentalLinkControlSearchResults } from './link-contro
 export { default as __experimentalLinkControlSearchItem } from './link-control/search-item';
 export { default as LineHeightControl } from './line-height-control';
 export { default as __experimentalListView } from './list-view';
+export { default as __experimentalOffCanvasEditor } from './off-canvas-editor';
 export { default as MediaReplaceFlow } from './media-replace-flow';
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as MediaUpload } from './media-upload';

package/src/components/inner-blocks/index.js

@@ -150,7 +150,10 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => {
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md
  */
 export function useInnerBlocksProps( props = {}, options = {} ) {
-	const { clientId } = useBlockEditContext();
+	const { __unstableDisableLayoutClassNames, __unstableDisableDropZone } =
+		options;
+	const { clientId, __unstableLayoutClassNames: layoutClassNames = '' } =
+		useBlockEditContext();
 	const isSmallScreen = useViewportMatch( 'medium', '<' );
 	const { __experimentalCaptureToolbars, hasOverlay } = useSelect(
 		( select ) => {
@@ -185,11 +188,13 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		[ clientId, isSmallScreen ]
 	);
 
+	const blockDropZoneRef = useBlockDropZone( {
+		rootClientId: clientId,
+	} );
+
 	const ref = useMergeRefs( [
 		props.ref,
-		useBlockDropZone( {
-			rootClientId: clientId,
-		} ),
+		__unstableDisableDropZone ? null : blockDropZoneRef,
 	] );
 
 	const innerBlocksProps = {
@@ -200,12 +205,14 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		innerBlocksProps.value && innerBlocksProps.onChange
 			? ControlledInnerBlocks
 			: UncontrolledInnerBlocks;
+
 	return {
 		...props,
 		ref,
 		className: classnames(
 			props.className,
 			'block-editor-block-list__layout',
+			__unstableDisableLayoutClassNames ? '' : layoutClassNames,
 			{
 				'has-overlay': hasOverlay,
 			}

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

@@ -1,3 +1,5 @@
+/* eslint-disable testing-library/render-result-naming-convention */
+
 /**
  * WordPress dependencies
  */
@@ -102,3 +104,5 @@ describe( 'InnerBlocks', () => {
 		expect( serialize( block ) ).toMatchSnapshot();
 	} );
 } );
+
+/* eslint-enable testing-library/render-result-naming-convention */