@wordpress/block-editor 10.3.0 → 10.4.0

package/src/components/block-preview/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { castArray } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -36,7 +35,10 @@ export function BlockPreview( {
 		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
 		[ originalSettings ]
 	);
-	const renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
+	const renderedBlocks = useMemo(
+		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
+		[ blocks ]
+	);
 	if ( ! blocks || blocks.length === 0 ) {
 		return null;
 	}
@@ -99,7 +101,10 @@ export function useBlockPreview( {
 	);
 	const disabledRef = useDisabled();
 	const ref = useMergeRefs( [ props.ref, disabledRef ] );
-	const renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
+	const renderedBlocks = useMemo(
+		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
+		[ blocks ]
+	);
 
 	const children = (
 		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -41,7 +36,7 @@ const noop = () => {};
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
 	position: 'bottom right',
-	isAlternate: true,
+	variant: 'toolbar',
 };
 
 function CopyMenuItem( { blocks, onCopy } ) {
@@ -58,7 +53,9 @@ export function BlockSettingsDropdown( {
 	__unstableDisplayLocation,
 	...props
 } ) {
-	const blockClientIds = castArray( clientIds );
+	const blockClientIds = Array.isArray( clientIds )
+		? clientIds
+		: [ clientIds ];
 	const count = blockClientIds.length;
 	const firstBlockClientId = blockClientIds[ 0 ];
 	const {

package/src/components/block-switcher/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -52,7 +47,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 			const { getBlockStyles, getBlockType } = select( blocksStore );
 			const { canRemoveBlocks } = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId(
-				castArray( clientIds )[ 0 ]
+				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
 			);
 			const [ { name: firstBlockName } ] = blocks;
 			const _isSingleBlockSelected = blocks.length === 1;
@@ -163,7 +158,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 						label={ blockSwitcherLabel }
 						popoverProps={ {
 							position: 'bottom right',
-							isAlternate: true,
+							variant: 'toolbar',
 							className: 'block-editor-block-switcher__popover',
 						} }
 						icon={

package/src/components/block-switcher/preview-block-popover.js

@@ -15,7 +15,7 @@ export default function PreviewBlockPopover( { blocks } ) {
 			<div className="block-editor-block-switcher__popover__preview__container">
 				<Popover
 					className="block-editor-block-switcher__preview__popover"
-					position="bottom right"
+					placement="bottom-start"
 					focusOnMount={ false }
 				>
 					<div className="block-editor-block-switcher__preview">

package/src/components/block-tools/insertion-point.js

@@ -25,7 +25,7 @@ function InbetweenInsertionPointPopover( {
 	__unstablePopoverSlot,
 	__unstableContentRef,
 } ) {
-	const { selectBlock } = useDispatch( blockEditorStore );
+	const { selectBlock, hideInsertionPoint } = useDispatch( blockEditorStore );
 	const openRef = useContext( InsertionPointOpenRef );
 	const ref = useRef();
 	const {
@@ -89,6 +89,14 @@ function InbetweenInsertionPointPopover( {
 		}
 	}
 
+	function maybeHideInserterPoint( event ) {
+		// Only hide the inserter if it's triggered on the wrapper,
+		// and the inserter is not open.
+		if ( event.target === ref.current && ! openRef.current ) {
+			hideInsertionPoint();
+		}
+	}
+
 	function onFocus( event ) {
 		// Only handle click on the wrapper specifically, and not an event
 		// bubbled from the inserter itself.
@@ -200,6 +208,7 @@ function InbetweenInsertionPointPopover( {
 				className={ classnames( className, {
 					'is-with-inserter': isInserterShown,
 				} ) }
+				onHoverEnd={ maybeHideInserterPoint }
 			>
 				<motion.div
 					variants={ lineVariants }

package/src/components/block-variation-picker/README.md

@@ -68,7 +68,7 @@ The different variations of the block.
 
 -   Type: `Function`
 
-Callback called when a block variation is selected. It recieves the selected variation as a parameter.
+Callback called when a block variation is selected. It receives the selected variation as a parameter.
 
 #### `icon`
 

package/src/components/block-vertical-alignment-control/ui.js

@@ -28,7 +28,7 @@ const DEFAULT_CONTROLS = [ 'top', 'center', 'bottom' ];
 const DEFAULT_CONTROL = 'top';
 
 const POPOVER_PROPS = {
-	isAlternate: true,
+	variant: 'toolbar',
 };
 
 function BlockVerticalAlignmentUI( {

package/src/components/border-radius-control/all-input-control.js

@@ -61,6 +61,7 @@ export default function AllInputControl( {
 			onChange={ handleOnChange }
 			onUnitChange={ handleOnUnitChange }
 			placeholder={ allPlaceholder }
+			size={ '__unstable-large' }
 		/>
 	);
 }

package/src/components/border-radius-control/index.js

@@ -113,6 +113,7 @@ export default function BorderRadiusControl( { onChange, values } ) {
 							withInputField={ false }
 							onChange={ handleSliderChange }
 							step={ step }
+							__nextHasNoMarginBottom
 						/>
 					</>
 				) : (

package/src/components/border-radius-control/input-controls.js

@@ -80,6 +80,7 @@ export default function BoxInputControls( {
 								onUnitChange={ createHandleOnUnitChange(
 									corner
 								) }
+								size={ '__unstable-large' }
 							/>
 						</div>
 					</Tooltip>

package/src/components/border-radius-control/style.scss

@@ -10,24 +10,21 @@
 		justify-content: space-between;
 		align-items: flex-start;
 
-		> .components-unit-control-wrapper {
-			width: 110px;
+		.components-border-radius-control__unit-control {
+			width: calc((100% - #{$grid-unit-20}) / 2);
 			margin-bottom: 0;
-			margin-right: #{ $grid-unit-15 };
+			margin-right: $grid-unit-20;
 			flex-shrink: 0;
 		}
 
-		.components-range-control {
+		.components-border-radius-control__range-control {
 			flex: 1;
-			margin-bottom: 0;
-
-			.components-base-control__field {
-				margin-bottom: 0;
-				height: 30px;
-			}
+			margin-right: $grid-unit-15;
 
-			.components-range-control__wrapper {
-				margin-right: 10px;
+			> div {
+				height: 40px;
+				display: flex;
+				align-items: center;
 			}
 		}
 
@@ -37,22 +34,16 @@
 	}
 
 	.components-border-radius-control__input-controls-wrapper {
-		display: flex;
-		width: 70%;
-		flex-wrap: wrap;
-
-		.components-border-radius-control__tooltip-wrapper {
-			width: calc(50% - #{ $grid-unit-10 });
-			margin-bottom: $grid-unit-10;
-			margin-right: $grid-unit-10;
-		}
+		display: grid;
+		gap: $grid-unit-20;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		margin-right: $grid-unit-15;
 	}
 
-	.component-border-radius-control__linked-button.has-icon {
+	.component-border-radius-control__linked-button {
 		display: flex;
 		justify-content: center;
-		margin-left: 2px;
-		margin-top: 3px;
+		margin-top: $grid-unit-10;
 
 		svg {
 			margin-right: 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/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/with-font-sizes.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, pickBy, reduce, some } from 'lodash';
+import { find, pickBy, reduce } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -152,8 +152,7 @@ export default ( ...fontSizeNames ) => {
 						};
 
 						if (
-							! some(
-								fontSizeAttributeNames,
+							! Object.values( fontSizeAttributeNames ).some(
 								didAttributesChange
 							)
 						) {

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/inner-blocks/index.js

@@ -150,7 +150,9 @@ 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 } = options;
+	const { clientId, __unstableLayoutClassNames: layoutClassNames = '' } =
+		useBlockEditContext();
 	const isSmallScreen = useViewportMatch( 'medium', '<' );
 	const { __experimentalCaptureToolbars, hasOverlay } = useSelect(
 		( select ) => {
@@ -200,12 +202,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 */

package/src/components/inserter/hooks/use-insertion-point.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -118,14 +113,11 @@ function useInsertionPoint( {
 					meta
 				);
 			}
+			const blockLength = Array.isArray( blocks ) ? blocks.length : 1;
 			const message = sprintf(
 				// translators: %d: the name of the block that has been added
-				_n(
-					'%d block added.',
-					'%d blocks added.',
-					castArray( blocks ).length
-				),
-				castArray( blocks ).length
+				_n( '%d block added.', '%d blocks added.', blockLength ),
+				blockLength
 			);
 			speak( message );
 

package/src/components/inserter/search-items.js

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import removeAccents from 'remove-accents';
-import { find, words } from 'lodash';
+import { find } from 'lodash';
+import { noCase } from 'change-case';
 
 // Default search helpers.
 const defaultGetName = ( item ) => item.name || '';
@@ -12,6 +13,25 @@ const defaultGetKeywords = ( item ) => item.keywords || [];
 const defaultGetCategory = ( item ) => item.category;
 const defaultGetCollection = () => null;
 
+/**
+ * Extracts words from an input string.
+ *
+ * @param {string} input The input string.
+ *
+ * @return {Array} Words, extracted from the input string.
+ */
+function extractWords( input = '' ) {
+	return noCase( input, {
+		splitRegexp: [
+			/([\p{Ll}\p{Lo}\p{N}])([\p{Lu}\p{Lt}])/gu, // One lowercase or digit, followed by one uppercase.
+			/([\p{Lu}\p{Lt}])([\p{Lu}\p{Lt}][\p{Ll}\p{Lo}])/gu, // One uppercase followed by one uppercase and one lowercase.
+		],
+		stripRegexp: /(\p{C}|\p{P}|\p{S})+/giu, // Anything that's not a punctuation, symbol or control/format character.
+	} )
+		.split( ' ' )
+		.filter( Boolean );
+}
+
 /**
  * Sanitizes the search input string.
  *
@@ -43,7 +63,7 @@ function normalizeSearchInput( input = '' ) {
  * @return {string[]} The normalized list of search terms.
  */
 export const getNormalizedSearchTerms = ( input = '' ) => {
-	return words( normalizeSearchInput( input ) );
+	return extractWords( normalizeSearchInput( input ) );
 };
 
 const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
@@ -150,7 +170,7 @@ export function getItemSearchRank( item, searchTerm, config = {} ) {
 			category,
 			collection,
 		].join( ' ' );
-		const normalizedSearchTerms = words( normalizedSearchInput );
+		const normalizedSearchTerms = extractWords( normalizedSearchInput );
 		const unmatchedTerms = removeMatchingTerms(
 			normalizedSearchTerms,
 			terms

package/src/components/inserter/test/search-items.js

@@ -45,6 +45,12 @@ describe( 'getNormalizedSearchTerms', () => {
 
 	it( 'should support non-latin letters', () => {
 		expect( getNormalizedSearchTerms( 'მედია' ) ).toEqual( [ 'მედია' ] );
+		expect(
+			getNormalizedSearchTerms( '师父领进门，修行在个人。' )
+		).toEqual( [ '师父领进门', '修行在个人' ] );
+		expect(
+			getNormalizedSearchTerms( 'Бързата работа – срам за майстора.' )
+		).toEqual( [ 'бързата', 'работа', 'срам', 'за', 'майстора' ] );
 	} );
 } );
 

package/src/components/inserter-list-item/style.scss

@@ -49,6 +49,8 @@
 				border-radius: $radius-block-ui;
 				opacity: 0.04;
 				background: var(--wp-admin-theme-color);
+				// This fixes drag-and-drop in Firefox.
+				pointer-events: none;
 			}
 		}