@wordpress/block-editor 17.0.0 → 17.1.1-next.v.202609031004.0

package/src/components/background-image-control/{index.js → index.jsx}

@@ -360,6 +360,25 @@ function BackgroundImageControls( {
 		focusToggleButton( containerRef );
 	};
 
+	/*
+	 * Sets an image entered as a direct URL. There is no attachment `id`:
+	 * `source: 'url'` records that the image is externally hosted.
+	 */
+	const onSelectURL = ( newURL ) => {
+		if ( ! newURL || newURL === url ) {
+			return;
+		}
+		onChange(
+			setImmutably( style, [ 'background' ], {
+				...style?.background,
+				backgroundImage: {
+					url: newURL,
+					source: 'url',
+				},
+			} )
+		);
+	};
+
 	// Drag and drop callback, restricting image to one.
 	const onFilesDrop = ( filesList ) => {
 		getSettings().mediaUpload( {
@@ -382,6 +401,17 @@ function BackgroundImageControls( {
 			} )
 		);
 	const canRemove = ! hasValue && hasBackgroundImageValue( inheritedValue );
+	// theme.json accepts a plain string for `backgroundImage`; the editor
+	// stores an object with a `url`. Resolve either for the URL field.
+	const rawURL =
+		typeof style?.background?.backgroundImage === 'string'
+			? style.background.backgroundImage
+			: url;
+	// Offer only absolute `http(s)` addresses to the URL field. A theme.json
+	// value can be theme-relative (`file:./…`), which the field could neither
+	// display usefully nor re-apply without breaking the image, and removing
+	// an inherited image stores the `'none'` sentinel string.
+	const currentURL = /^https?:\/\//.test( rawURL ?? '' ) ? rawURL : undefined;
 	const imgLabel = title || getFilename( url ) || __( 'Image' );
 
 	return (
@@ -389,10 +419,11 @@ function BackgroundImageControls( {
 			{ isUploading && <LoadingSpinner /> }
 			<MediaReplaceFlow
 				mediaId={ id }
-				mediaURL={ url }
+				mediaURL={ currentURL }
 				allowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }
 				accept="image/*"
 				onSelect={ onSelectMedia }
+				onSelectURL={ onSelectURL }
 				popoverProps={ {
 					className: clsx( {
 						'block-editor-global-styles-background-panel__media-replace-popover':

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

@@ -170,11 +170,13 @@
 
 .block-editor-global-styles-background-panel__media-replace-popover {
 	.components-popover__content {
-		// width of block-editor-global-styles-background-panel__dropdown-content-wrapper minus padding.
-		width: 226px;
+		// Sized by the widest child: the URL field (LinkControl min-width),
+		// with the menu items stretching to match.
+		width: auto;
 	}
 
-	.components-button {
+	// Scoped to menu items so the URL field's buttons keep their own padding.
+	.components-menu-item__button.components-button {
 		padding: 0 $grid-unit-10;
 	}
 

package/src/components/block-alignment-control/test/__snapshots__/{index.js.snap → index.jsdom.test.jsx.snap}

@@ -16,15 +16,26 @@ exports[`BlockAlignmentUI should match snapshot when controls are hidden 1`] = `
     >
       <svg
         aria-hidden="true"
-        fill="currentColor"
         focusable="false"
         height="24"
+        stroke="currentColor"
+        stroke-width="1.5"
+        style="fill: none;"
         viewBox="0 0 24 24"
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M5 5.5h8V4H5v1.5ZM5 20h8v-1.5H5V20ZM19 9H5v6h14V9Z"
+          d="M5 4.75H13M5 19.25H13"
+          vector-effect="non-scaling-stroke"
+        />
+        <rect
+          fill="currentColor"
+          height="6"
+          stroke="none"
+          width="14"
+          x="5"
+          y="9"
         />
       </svg>
     </button>
@@ -49,15 +60,26 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM5 9h14v6H5V9Z"
+            d="M5 5H19M5 19H19"
+            vector-effect="non-scaling-stroke"
+          />
+          <rect
+            fill="currentColor"
+            height="6"
+            stroke="none"
+            width="14"
+            x="5"
+            y="9"
           />
         </svg>
       </button>
@@ -72,15 +94,26 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M5 5.5h8V4H5v1.5ZM5 20h8v-1.5H5V20ZM19 9H5v6h14V9Z"
+            d="M5 4.75H13M5 19.25H13"
+            vector-effect="non-scaling-stroke"
+          />
+          <rect
+            fill="currentColor"
+            height="6"
+            stroke="none"
+            width="14"
+            x="5"
+            y="9"
           />
         </svg>
       </button>
@@ -95,15 +128,26 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM7 9h10v6H7V9Z"
+            d="M5 4.75H19M5 19.25H19"
+            vector-effect="non-scaling-stroke"
+          />
+          <rect
+            fill="currentColor"
+            height="6"
+            stroke="none"
+            width="10"
+            x="7"
+            y="9"
           />
         </svg>
       </button>
@@ -118,15 +162,26 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M19 5.5h-8V4h8v1.5ZM19 20h-8v-1.5h8V20ZM5 9h14v6H5V9Z"
+            d="M11 4.75H19M11 19.25H19"
+            vector-effect="non-scaling-stroke"
+          />
+          <rect
+            fill="currentColor"
+            height="6"
+            stroke="none"
+            width="14"
+            x="5"
+            y="9"
           />
         </svg>
       </button>

package/src/components/block-edit/{edit.js → edit.jsx}

@@ -113,7 +113,7 @@ const EditWithGeneratedProps = ( props ) => {
 					let values = {};
 					if ( ! source.getValues ) {
 						Object.keys( bindings ).forEach( ( attr ) => {
-							// Default to the the source label when `getValues` doesn't exist.
+							// Default to the source label when `getValues` doesn't exist.
 							values[ attr ] = source.label;
 						} );
 					} else {

package/src/components/block-icon/test/__snapshots__/{index.js.snap → index.jsdom.test.jsx.snap}

@@ -7,15 +7,19 @@ exports[`BlockIcon renders a Icon 1`] = `
   >
     <svg
       aria-hidden="true"
-      fill="currentColor"
       focusable="false"
       height="24"
+      stroke="currentColor"
+      stroke-width="1.5"
+      style="fill: none;"
       viewBox="0 0 24 24"
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 4.5h14c.3 0 .5.2.5.5v8.4l-3-2.9c-.3-.3-.8-.3-1 0L11.9 14 9 12c-.3-.2-.6-.2-.8 0l-3.6 2.6V5c-.1-.3.1-.5.4-.5zm14 15H5c-.3 0-.5-.2-.5-.5v-2.4l4.1-3 3 1.9c.3.2.7.2.9-.1L16 12l3.5 3.4V19c0 .3-.2.5-.5.5z"
+        d="M3.75 16.2031L8.6 12.7L12 15L16 11L20.25 15.2517M5 20.25H19C19.6904 20.25 20.25 19.6904 20.25 19V5C20.25 4.30964 19.6904 3.75 19 3.75H5C4.30964 3.75 3.75 4.30964 3.75 5V19C3.75 19.6904 4.30964 20.25 5 20.25Z"
+        stroke-linejoin="round"
+        vector-effect="non-scaling-stroke"
       />
     </svg>
   </span>

package/src/components/block-inspector/{index.js → index.jsx}

@@ -29,7 +29,6 @@ import InspectorControlsLastItem from '../inspector-controls/last-item';
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 import PositionControls from '../inspector-controls-tabs/position-controls-panel';
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
-import { useBorderPanelLabel } from '../../hooks/border';
 import { BlockStateBadges, BlockStatesControl } from '../../hooks/states';
 import ContentTab from '../inspector-controls-tabs/content-tab';
 import ViewportVisibilityInfo from '../block-visibility/viewport-visibility-info';
@@ -42,12 +41,10 @@ import {
 } from '../../hooks/block-style-state';
 
 function StyleInspectorSlots( {
-	clientId,
 	showAdvancedControls = true,
 	showPositionControls = true,
 	showBindingsControls = true,
 } ) {
-	const borderPanelLabel = useBorderPanelLabel( { clientId } );
 	return (
 		<>
 			<InspectorControls.Slot />
@@ -70,7 +67,7 @@ function StyleInspectorSlots( {
 				group="dimensions"
 				label={ __( 'Dimensions' ) }
 			/>
-			<InspectorControls.Slot group="border" label={ borderPanelLabel } />
+			<InspectorControls.Slot group="border" label={ __( 'Borders' ) } />
 			<InspectorControls.Slot
 				group="elements"
 				label={ __( 'Elements' ) }
@@ -97,8 +94,7 @@ function StyleStateInspectorSlots( {
 	isSectionBlock,
 	selectedBlockStyleState,
 } ) {
-	const borderPanelLabel = useBorderPanelLabel( { clientId } );
-	const showLayoutControls =
+	const isViewportStyleState =
 		hasViewportBlockStyleState( selectedBlockStyleState ) &&
 		! hasPseudoBlockStyleState( selectedBlockStyleState );
 	const showSectionStyleControls =
@@ -130,7 +126,7 @@ function StyleStateInspectorSlots( {
 						label={ __( 'Background' ) }
 						className="background-block-support-panel__inner-wrapper"
 					/>
-					{ showLayoutControls && (
+					{ isViewportStyleState && (
 						<InspectorControls.Slot
 							group="layout"
 							label={ __( 'Layout' ) }
@@ -142,7 +138,7 @@ function StyleStateInspectorSlots( {
 					/>
 					<InspectorControls.Slot
 						group="border"
-						label={ borderPanelLabel }
+						label={ __( 'Borders' ) }
 					/>
 					<InspectorControls.Slot
 						group="elements"
@@ -151,6 +147,9 @@ function StyleStateInspectorSlots( {
 					/>
 				</>
 			) }
+			{ isViewportStyleState && (
+				<InspectorControls.Slot group="viewport" />
+			) }
 		</>
 	);
 }
@@ -527,11 +526,7 @@ const BlockInspectorSingleBlock = ( {
 					<InspectorControls.Slot group="content" />
 					<InspectorControls.Slot group="list" ref={ listViewRef } />
 					<ListViewContentPopover listViewRef={ listViewRef } />
-					{ ! isSectionBlock && (
-						<StyleInspectorSlots
-							clientId={ renderedBlockClientId }
-						/>
-					) }
+					{ ! isSectionBlock && <StyleInspectorSlots /> }
 				</>
 			) }
 			{ ! isEditingStyleState && <InspectorControlsLastItem.Slot /> }

package/src/components/block-list/content.scss

@@ -80,13 +80,16 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 		}
 	}
 
-	// Block highlight, and navigation mode, and focus.
+	// Block highlight, and navigation mode, and focus, and hover where the
+	// grab cursor shows what a drag would take.
 	// This piece of code has gone back and forth between using a pseudo element
 	// vs. styling the block directly. Ultimately we likely need a pseudo element
 	// (unless styles like focus and selection overlay can be rendered as separate elements),
 	// since things like border-radius need to be able to be set on the block itself.
 	.block-editor-block-list__block.is-highlighted,
 	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
+	.block-editor-block-list__block.is-hovered-draggable[draggable="true"]:not(.is-multi-selected),
+	.block-editor-block-list__block.is-hovered-draggable[data-draggable="true"]:not(.is-multi-selected),
 	.block-editor-block-list__block:not([contenteditable="true"]):focus {
 		outline: none;
 

package/src/components/block-list/use-block-props/use-is-hovered.js

@@ -22,15 +22,32 @@ export function useIsHovered( { isEnabled = true } = {} ) {
 				return;
 			}
 
+			let timeoutId;
+
 			function listener( event ) {
 				if ( event.defaultPrevented ) {
 					return;
 				}
 				event.preventDefault();
-				node.classList.toggle(
-					'is-hovered',
-					event.type === 'mouseover'
-				);
+				const isHovered = event.type === 'mouseover';
+				node.classList.toggle( 'is-hovered', isHovered );
+				clearTimeout( timeoutId );
+				if ( ! isHovered ) {
+					node.classList.remove( 'is-hovered-draggable' );
+					return;
+				}
+				// Over editable content the cursor is a text cursor, not
+				// the grab cursor, so no drag would start there. The
+				// editability check can force a style recalculation, so it
+				// runs once the pointer rests, which also keeps the
+				// outline from flashing on blocks it merely passes over.
+				const { target } = event;
+				timeoutId = setTimeout( () => {
+					node.classList.toggle(
+						'is-hovered-draggable',
+						! target.isContentEditable
+					);
+				}, 100 );
 			}
 
 			const unsubscribeOut = subscribeDelegatedListener(
@@ -48,8 +65,10 @@ export function useIsHovered( { isEnabled = true } = {} ) {
 				unsubscribeOut();
 				unsubscribeOver();
 
-				// Remove class in case it lingers.
+				// Remove classes in case they linger.
+				clearTimeout( timeoutId );
 				node.classList.remove( 'is-hovered' );
+				node.classList.remove( 'is-hovered-draggable' );
 			};
 		},
 		[ isEnabled ]

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

@@ -47,7 +47,9 @@
 
 	.block-editor-block-icon {
 		margin-right: 10px;
+		// Keep `fill` as a fallback for custom block icons that do not use `currentColor`.
 		fill: $gray-900;
+		color: $gray-900;
 	}
 }
 

package/src/components/block-mover/test/mover-description.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import {
 	getBlockMoverDescription,
 	getMultiBlockMoverDescription,

package/src/components/block-styles/test/utils.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import {
 	getActiveStyle,
 	getDefaultStyle,

package/src/components/block-switcher/test/use-transformed.patterns.js

@@ -1,3 +1,4 @@
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
 import { unregisterBlockType, registerBlockType } from '@wordpress/blocks';
 import {
 	transformMatchingBlock,

package/src/components/block-switcher/test/utils.js

@@ -1,3 +1,4 @@
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
 import { unregisterBlockType, registerBlockType } from '@wordpress/blocks';
 import { getMatchingBlockByName, getRetainedBlockAttributes } from '../utils';
 

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

@@ -295,7 +295,7 @@
 	.block-editor-block-patterns-list {
 		display: grid;
 		grid-template-columns: 1fr 1fr;
-		grid-gap: $grid-unit-15;
+		gap: $grid-unit-15;
 		.block-editor-block-patterns-list__list-item {
 			margin-bottom: 0;
 		}

package/src/components/block-variation-picker/content.scss

@@ -16,7 +16,9 @@
 	font-size: $helptext-font-size;
 
 	svg {
-		fill: $gray-600 !important;
+		// Keep `fill` as a fallback for custom variation icons that do not use `currentColor`.
+		fill: $gray-600;
+		color: $gray-600 !important;
 	}
 
 	.components-button {
@@ -28,7 +30,8 @@
 	}
 
 	.components-button:hover svg {
-		fill: var(--wp-admin-theme-color) !important;
+		fill: var(--wp-admin-theme-color);
+		color: var(--wp-admin-theme-color) !important;
 	}
 
 	& > li {
@@ -39,4 +42,3 @@
 		gap: $grid-unit-05;
 	}
 }
-

package/src/components/block-vertical-alignment-control/test/__snapshots__/{index.js.snap → index.jsdom.test.jsx.snap}

@@ -16,15 +16,26 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are hidden
     >
       <svg
         aria-hidden="true"
-        fill="currentColor"
         focusable="false"
         height="24"
+        stroke="currentColor"
+        stroke-width="1.5"
+        style="fill: none;"
         viewBox="0 0 24 24"
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
+        <rect
+          fill="currentColor"
+          height="11"
+          stroke="none"
+          width="6"
+          x="9"
+          y="9"
+        />
         <path
-          d="M9 20h6V9H9v11zM4 4v1.5h16V4H4z"
+          d="M4 4.75H20"
+          vector-effect="non-scaling-stroke"
         />
       </svg>
     </button>
@@ -49,15 +60,26 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
+          <rect
+            fill="currentColor"
+            height="11"
+            stroke="none"
+            width="6"
+            x="9"
+            y="9"
+          />
           <path
-            d="M9 20h6V9H9v11zM4 4v1.5h16V4H4z"
+            d="M4 4.75H20"
+            vector-effect="non-scaling-stroke"
           />
         </svg>
       </button>
@@ -72,15 +94,26 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M20 11h-5V4H9v7H4v1.5h5V20h6v-7.5h5z"
+            d="M4 12H20"
+            vector-effect="non-scaling-stroke"
+          />
+          <rect
+            fill="currentColor"
+            height="16"
+            stroke="none"
+            width="6"
+            x="9"
+            y="4"
           />
         </svg>
       </button>
@@ -95,15 +128,26 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M15 4H9v11h6V4zM4 18.5V20h16v-1.5H4z"
+            d="M4 19.25H20"
+            vector-effect="non-scaling-stroke"
+          />
+          <rect
+            fill="currentColor"
+            height="11"
+            stroke="none"
+            width="6"
+            x="9"
+            y="4"
           />
         </svg>
       </button>

package/src/components/block-visibility/constants.ts

@@ -10,7 +10,7 @@ export type BlockVisibilityViewport = 'desktop' | 'tablet' | 'mobile';
 /**
  * The choices for the block visibility.
  *
- * Duplicated in packages/editor/src/components/preview-dropdown/index.js (choices
+ * Duplicated in packages/editor/src/components/preview-dropdown/index.jsx (choices
  * array), packages/edit-site/src/components/block-editor/viewport.js and
  * packages/boot/src/components/canvas/viewport.ts (VALID_VIEWPORTS). Update all
  * four when adding new viewport types.

package/src/components/block-visibility/test/utils.js

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import {
 	getBlockVisibilityViewportEntries,
 	getViewportCheckboxState,
@@ -76,7 +77,7 @@ describe( 'block-visibility utils', () => {
 
 		it( 'should return null when some blocks are hidden for viewport', () => {
 			// Suppress console.log from getViewportCheckboxState
-			const consoleSpy = jest
+			const consoleSpy = vi
 				.spyOn( console, 'log' )
 				.mockImplementation( () => {} );
 

package/src/components/border-radius-control/test/utils.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import {
 	getAllUnit,
 	getAllValue,

package/src/components/button-block-appender/content.scss

@@ -64,7 +64,7 @@
 			}
 
 			.block-editor-inserter {
-				visibility: visible;
+				opacity: 1;
 			}
 		}
 	}

package/src/components/color-palette/test/__snapshots__/{control.js.snap → control.jsdom.test.jsx.snap}

@@ -107,15 +107,19 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                         />
                         <svg
                           aria-hidden="true"
-                          fill="#000"
+                          color="#000"
                           focusable="false"
                           height="24"
+                          stroke="currentColor"
+                          stroke-width="1.5"
+                          style="fill: none;"
                           viewBox="0 0 24 24"
                           width="24"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M16.5 7.5 10 13.9l-2.5-2.4-1 1 3.5 3.6 7.5-7.6z"
+                            d="M7 12L10 15L17 8"
+                            vector-effect="non-scaling-stroke"
                           />
                         </svg>
                       </div>

package/src/components/colors/test/utils.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import {
 	getColorObjectByAttributeValues,
 	getColorObjectByColorValue,

package/src/components/dimensions-tool/test/utils.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { findAspectRatioOption, parseAspectRatio } from '../utils';
 
 describe( 'parseAspectRatio', () => {

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

@@ -1,3 +1,4 @@
+import { afterEach, describe, expect, it } from 'vitest';
 import { logged } from '@wordpress/deprecated';
 import {
 	getComputedFluidTypographyValue,