@wordpress/block-editor 17.0.0 → 17.0.2-next.v.202608281122.0

package/build-types/components/block-context/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/block-context/index.js"],"names":[],"mappings":"AAEI,YAA2B,SAAS,GAA1B,KAAK,CAAC,SAAS,CAAW;AAGrC,YAAS,yBAAyB,GAElC;;;;;IAA6B,KAAK,EAAvB,MAAM,CAAC,MAAM,EAAC,GAAC,CAAC,CAE3B;;;;IAA6B,QAAQ,EAA1B,SAAS,CACtB;CAAA,CAAA;AARD,2CAA2C;AAE3C;;;;;;GAMG;AAEH,8CAA8C;AAC9C,QAAA,MAAM,OAAO,EADF,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,EAAC,GAAC,CAAC,CACN,CAAC;AAGpC;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAF9C,yBAE8C,+BAQxD;eAEc,OAAO"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/block-context/index.jsx"],"names":[],"mappings":"AAEI,YAA2B,SAAS,GAA1B,KAAK,CAAC,SAAS,CAAW;AAGrC,YAAS,yBAAyB,GAElC;;;;;IAA6B,KAAK,EAAvB,MAAM,CAAC,MAAM,EAAC,GAAC,CAAC,CAE3B;;;;IAA6B,QAAQ,EAA1B,SAAS,CACtB;CAAA,CAAA;AARD,2CAA2C;AAE3C;;;;;;GAMG;AAEH,8CAA8C;AAC9C,QAAA,MAAM,OAAO,EADF,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,EAAC,GAAC,CAAC,CACN,CAAC;AAGpC;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAF9C,yBAE8C,+BAQxD;eAEc,OAAO"}

package/build-types/components/block-visibility/constants.d.ts

@@ -5,7 +5,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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "17.0.0",
+	"version": "17.0.2-next.v.202608281122.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -60,48 +60,45 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.54.0",
-		"@wordpress/base-styles": "^13.0.0",
-		"@wordpress/blob": "^4.54.0",
-		"@wordpress/block-serialization-default-parser": "^5.54.0",
-		"@wordpress/blocks": "^15.27.0",
-		"@wordpress/commands": "^1.54.0",
-		"@wordpress/components": "^40.0.0",
-		"@wordpress/compose": "^8.7.0",
-		"@wordpress/data": "^10.54.0",
-		"@wordpress/dataviews": "^18.1.0",
-		"@wordpress/date": "^5.54.0",
-		"@wordpress/deprecated": "^4.54.0",
-		"@wordpress/dom": "^4.54.0",
-		"@wordpress/element": "^8.6.0",
-		"@wordpress/escape-html": "^3.54.0",
-		"@wordpress/global-styles-engine": "^1.21.0",
-		"@wordpress/hooks": "^4.54.0",
-		"@wordpress/html-entities": "^4.54.0",
-		"@wordpress/i18n": "^6.27.0",
-		"@wordpress/icons": "^15.5.0",
-		"@wordpress/image-cropper": "^1.18.0",
-		"@wordpress/interactivity": "^6.54.0",
-		"@wordpress/is-shallow-equal": "^5.54.0",
-		"@wordpress/kebab-case": "^1.1.0",
-		"@wordpress/keyboard-shortcuts": "^5.54.0",
-		"@wordpress/keycodes": "^4.54.0",
-		"@wordpress/notices": "^5.54.0",
-		"@wordpress/preferences": "^4.54.0",
-		"@wordpress/priority-queue": "^3.54.0",
-		"@wordpress/private-apis": "^1.54.0",
-		"@wordpress/rich-text": "^7.54.0",
-		"@wordpress/style-engine": "^2.54.0",
-		"@wordpress/token-list": "^3.54.0",
-		"@wordpress/ui": "^0.21.0",
-		"@wordpress/upload-media": "^0.39.0",
-		"@wordpress/url": "^4.54.0",
-		"@wordpress/warning": "^3.54.0",
-		"@wordpress/wordcount": "^4.54.0",
+		"@wordpress/a11y": "^4.54.1-next.v.202608281122.0",
+		"@wordpress/base-styles": "^13.0.1-next.v.202608281122.0",
+		"@wordpress/blob": "^4.54.1-next.v.202608281122.0",
+		"@wordpress/block-serialization-default-parser": "^5.54.1-next.v.202608281122.0",
+		"@wordpress/blocks": "^16.0.1-next.v.202608281122.0",
+		"@wordpress/commands": "^1.54.2-next.v.202608281122.0",
+		"@wordpress/components": "^40.1.1-next.v.202608281122.0",
+		"@wordpress/compose": "^8.7.2-next.v.202608281122.0",
+		"@wordpress/data": "^10.54.2-next.v.202608281122.0",
+		"@wordpress/dataviews": "^18.1.2-next.v.202608281122.0",
+		"@wordpress/date": "^5.54.1-next.v.202608281122.0",
+		"@wordpress/deprecated": "^4.54.1-next.v.202608281122.0",
+		"@wordpress/dom": "^4.54.1-next.v.202608281122.0",
+		"@wordpress/element": "^8.6.2-next.v.202608281122.0",
+		"@wordpress/global-styles-engine": "^1.21.1-next.v.202608281122.0",
+		"@wordpress/hooks": "^4.54.1-next.v.202608281122.0",
+		"@wordpress/html-entities": "^4.54.1-next.v.202608281122.0",
+		"@wordpress/i18n": "^6.27.1-next.v.202608281122.0",
+		"@wordpress/icons": "^15.5.1-next.v.202608281122.0",
+		"@wordpress/image-cropper": "^1.18.2-next.v.202608281122.0",
+		"@wordpress/interactivity": "^6.54.1-next.v.202608281122.0",
+		"@wordpress/is-shallow-equal": "^5.54.1-next.v.202608281122.0",
+		"@wordpress/kebab-case": "^1.1.1-next.v.202608281122.0",
+		"@wordpress/keyboard-shortcuts": "^5.54.1-next.v.202608281122.0",
+		"@wordpress/keycodes": "^4.54.1-next.v.202608281122.0",
+		"@wordpress/notices": "^5.54.1-next.v.202608281122.0",
+		"@wordpress/preferences": "^4.54.2-next.v.202608281122.0",
+		"@wordpress/priority-queue": "^3.54.1-next.v.202608281122.0",
+		"@wordpress/private-apis": "^1.54.1-next.v.202608281122.0",
+		"@wordpress/rich-text": "^7.54.1-next.v.202608281122.0",
+		"@wordpress/style-engine": "^2.54.1-next.v.202608281122.0",
+		"@wordpress/token-list": "^3.54.1-next.v.202608281122.0",
+		"@wordpress/ui": "^0.22.1-next.v.202608281122.0",
+		"@wordpress/upload-media": "^0.39.2-next.v.202608281122.0",
+		"@wordpress/url": "^4.54.1-next.v.202608281122.0",
+		"@wordpress/warning": "^3.54.1-next.v.202608281122.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
-		"deepmerge": "^4.3.1",
 		"diff": "^8.0.3",
 		"fast-deep-equal": "^3.1.3",
 		"parsel-js": "^1.1.2",
@@ -118,7 +115,7 @@
 		"@testing-library/react": "^16.3.2",
 		"@testing-library/user-event": "^14.6.1",
 		"@types/postcss-prefix-selector": "^1.16.3",
-		"@wordpress/block-library": "^10.5.0",
+		"@wordpress/block-library": "^10.5.2-next.v.202608281122.0",
 		"deep-freeze": "^0.0.1",
 		"storybook": "^10.5.3"
 	},
@@ -135,5 +132,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5ef24f60261976bb198ad035db24bf81c1fb92b4"
+	"gitHead": "de479d415171765f7b573c81aeec5334ff506a12"
 }

package/src/components/background-image-control/README.md

@@ -2,7 +2,7 @@
 
 The `BackgroundImageControl` component provides an interface for selecting, positioning, and configuring background images in the WordPress block editor.
 
-_Note:_ This is an internal component. It is not exported from `@wordpress/block-editor` and is not part of the public API; it is rendered by the Global Styles [background panel](../global-styles/background-panel.js).
+_Note:_ This is an internal component. It is not exported from `@wordpress/block-editor` and is not part of the public API; it is rendered by the Global Styles [background panel](../global-styles/background-panel.jsx).
 
 ## Features
 

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

@@ -98,7 +98,7 @@ function StyleStateInspectorSlots( {
 	selectedBlockStyleState,
 } ) {
 	const borderPanelLabel = useBorderPanelLabel( { clientId } );
-	const showLayoutControls =
+	const isViewportStyleState =
 		hasViewportBlockStyleState( selectedBlockStyleState ) &&
 		! hasPseudoBlockStyleState( selectedBlockStyleState );
 	const showSectionStyleControls =
@@ -130,7 +130,7 @@ function StyleStateInspectorSlots( {
 						label={ __( 'Background' ) }
 						className="background-block-support-panel__inner-wrapper"
 					/>
-					{ showLayoutControls && (
+					{ isViewportStyleState && (
 						<InspectorControls.Slot
 							group="layout"
 							label={ __( 'Layout' ) }
@@ -151,6 +151,9 @@ function StyleStateInspectorSlots( {
 					/>
 				</>
 			) }
+			{ isViewportStyleState && (
+				<InspectorControls.Slot group="viewport" />
+			) }
 		</>
 	);
 }

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/global-styles/{background-panel.js → background-panel.jsx}

@@ -305,7 +305,7 @@ export default function BackgroundImagePanel( {
 	// Get current gradient value, decoding preset slug references.
 	// Fall back to color.gradient for legacy blocks that haven't migrated
 	// to background.gradient yet (mirrors block inspector fallback in
-	// packages/block-editor/src/hooks/background.js).
+	// packages/block-editor/src/hooks/background.jsx).
 	const currentGradient = decodeValue(
 		value?.background?.gradient ?? value?.color?.gradient
 	);
@@ -315,7 +315,7 @@ export default function BackgroundImagePanel( {
 
 	// Set gradient value, encoding preset matches as slug references.
 	// Also clear color.gradient to migrate from the legacy location,
-	// matching the block inspector behavior in hooks/background.js.
+	// matching the block inspector behavior in hooks/background.jsx.
 	const setGradient = ( newGradient, newSlug ) => {
 		let newValue = setImmutably(
 			value,

package/src/components/global-styles/test/{background-panel.js → background-panel.jsx}

@@ -105,7 +105,7 @@ describe( 'hasBackgroundGradientValue', () => {
  *   enabled.
  *
  * - Background gradient: renders `ColorPanelDropdown` (re-used from
- *   `color-panel.js`). The inner `Dropdown` indicator shows the inherited
+ *   `color-panel.jsx`). The inner `Dropdown` indicator shows the inherited
  *   gradient at-rest, and the `ColorPanelTab.onChange` interceptor commits
  *   the inherited value when the user clicks the active swatch.
  *

package/src/components/global-styles/test/inherited-value-context-core.js

@@ -31,7 +31,7 @@ jest.mock( '../../../store', () => ( {
 	store: { name: 'core/block-editor' },
 } ) );
 
-// `inherited-value-context.js` imports the blocks store for
+// `inherited-value-context.jsx` imports the blocks store for
 // `useVariationAndElements`. Its real import chain needs data-module exports
 // the stub above does not provide, so stub the blocks module too.
 jest.mock( '@wordpress/blocks', () => ( {

package/src/components/global-styles/test/{inherited-value-context.js → inherited-value-context.jsx}

@@ -46,7 +46,7 @@ jest.mock( '../../../store', () => ( {
 	store: { name: 'core/block-editor' },
 } ) );
 
-// `inherited-value-context.js` imports `store as blocksStore` from
+// `inherited-value-context.jsx` imports `store as blocksStore` from
 // `@wordpress/blocks` for `useVariationAndElements`. The blocks store's
 // transitive import chain fails under this file's `@wordpress/data` mock
 // (missing `createSelector`), so stub the blocks module with just the shape

package/src/components/global-styles/test/{typography-panel.js → typography-panel.jsx}

@@ -6,7 +6,7 @@ import TypographyPanel, { useHasTypographyPanel } from '../typography-panel';
 // The inheritance treatment sits behind the
 // `gutenberg-global-styles-inheritance-ui` experiment. Turn it on so these
 // tests exercise the inheriting path. The off path lives in
-// `typography-panel-core.js`.
+// `typography-panel-core.jsx`.
 beforeEach( () => {
 	window.__experimentalGlobalStylesInheritanceUI = true;
 } );

package/src/components/inserter/{menu.js → menu.jsx}

@@ -415,7 +415,7 @@ function InserterMenu(
 				<Popover
 					className="block-editor-inserter__preview-container__popover"
 					placement="right-start"
-					offset={ 16 }
+					offset={ { mainAxis: 16, crossAxis: 16 } }
 					focusOnMount={ false }
 					animate={ false }
 				>

package/src/components/inserter/style.scss

@@ -203,10 +203,6 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__preview-container__popover {
-	top: $grid-unit-20 !important;
-}
-
 .block-editor-inserter__preview-container {
 	display: none;
 	width: $sidebar-width;

package/src/components/inspector-controls/groups.js

@@ -18,6 +18,7 @@ const InspectorControlsPosition = createSlotFill( 'InspectorControlsPosition' );
 const InspectorControlsTypography = createSlotFill(
 	'InspectorControlsTypography'
 );
+const InspectorControlsViewport = createSlotFill( 'InspectorControlsViewport' );
 const InspectorControlsListView = createSlotFill( 'InspectorControlsListView' );
 const InspectorControlsStyles = createSlotFill( 'InspectorControlsStyles' );
 const InspectorControlsEffects = createSlotFill( 'InspectorControlsEffects' );
@@ -41,6 +42,7 @@ const groups = {
 	settings: InspectorControlsDefault, // Alias for default.
 	styles: InspectorControlsStyles,
 	typography: InspectorControlsTypography,
+	viewport: InspectorControlsViewport,
 };
 
 export default groups;

package/src/components/provider/{index.js → index.jsx}

@@ -1,6 +1,7 @@
 import { useDispatch } from '@wordpress/data';
 import { useEffect, useMemo, useRef } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 import {
 	MediaUploadProvider,
 	store as uploadStore,
@@ -44,6 +45,30 @@ let isHeicCanvasEnabledCache = null;
  */
 const HEIC_MIME_TYPES = [ 'image/heic', 'image/heif' ];
 
+/**
+ * Refuses a batch of more than one file on behalf of a caller that only takes
+ * one - a Cover block's placeholder, say.
+ *
+ * `uploadMedia()` in `@wordpress/media-utils` refuses such a batch with the
+ * same wording, but the `@wordpress/upload-media` pipeline below is a separate
+ * transport that never reaches that function. Without this check every dropped
+ * file uploads and the caller keeps whichever one lands last (gutenberg#82041).
+ *
+ * @param {Array<File>} filesList List of files.
+ * @param {boolean}     multiple  Whether the caller accepts more than one file.
+ * @param {Function}    onError   Function called when an error happens.
+ *
+ * @return {boolean} Whether the batch was refused.
+ */
+function refuseExtraFiles( filesList, multiple, onError ) {
+	if ( ! multiple && filesList.length > 1 ) {
+		onError( __( 'Only one file can be used here.' ) );
+		return true;
+	}
+
+	return false;
+}
+
 /**
  * Checks if client-side media processing should be enabled.
  *
@@ -143,6 +168,7 @@ function shouldEnableHeicCanvasProcessing() {
  * @param {Function}       $3.onFileChange   Function called each time a file or a temporary representation of the file is available.
  * @param {Function}       $3.onSuccess      Function called once a file has completely finished uploading, including thumbnails.
  * @param {Function}       $3.onBatchSuccess Function called once all files in a group have completely finished uploading, including thumbnails.
+ * @param {boolean}        $3.multiple       Whether the caller accepts more than one file.
  */
 function mediaUpload(
 	registry,
@@ -155,8 +181,13 @@ function mediaUpload(
 		onFileChange,
 		onSuccess,
 		onBatchSuccess,
+		multiple = true,
 	}
 ) {
+	if ( refuseExtraFiles( filesList, multiple, onError ) ) {
+		return;
+	}
+
 	void registry.dispatch( uploadStore ).addItems( {
 		files: Array.from( filesList ),
 		onChange: onFileChange,
@@ -189,6 +220,7 @@ function mediaUpload(
  * @param {Function}       $3.onFileChange   Function called each time a file or a temporary representation of the file is available.
  * @param {Function}       $3.onSuccess      Function called once a file has completely finished uploading, including thumbnails.
  * @param {Function}       $3.onBatchSuccess Function called once all files in a group have completely finished uploading, including thumbnails.
+ * @param {boolean}        $3.multiple       Whether the caller accepts more than one file.
  */
 function heicMediaUpload(
 	registry,
@@ -201,8 +233,13 @@ function heicMediaUpload(
 		onFileChange,
 		onSuccess,
 		onBatchSuccess,
+		multiple = true,
 	}
 ) {
+	if ( refuseExtraFiles( filesList, multiple, onError ) ) {
+		return;
+	}
+
 	const files = Array.from( filesList );
 	const heicFiles = files.filter( ( file ) =>
 		HEIC_MIME_TYPES.includes( file.type )
@@ -254,6 +291,7 @@ function heicMediaUpload(
 			onFileChange,
 			onSuccess,
 			onBatchSuccess: coordinatedBatchSuccess,
+			multiple,
 		} );
 	}
 }

package/src/components/rich-text/content.scss

@@ -54,3 +54,9 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .rich-text [contenteditable="false"]::selection {
 	background-color: transparent;
 }
+
+.is-selected .non-breaking-space {
+	outline: 1px solid currentColor;
+	outline-offset: -1px;
+	opacity: 0.8;
+}

package/src/hooks/block-hooks.scss

@@ -17,15 +17,6 @@
 	}
 }
 
-.block-editor-hooks__position-control-item {
-
-	/**
-	 * Try to make items match the width of the anchor, subtract any margin on
-	 * items to calculate the correct inner width.
-	 */
-	max-inline-size: max(calc(var(--anchor-width) - (2 * var(--wp-ui-popup-padding))), 223px);
-}
-
 .block-editor-hooks__position-control-item-hint {
 	color: var(--wpds-color-foreground-content-neutral-weak);
 	margin-block-start: $grid-unit-05;

package/src/hooks/{grid-visualizer.js → grid-visualizer.jsx}

@@ -29,7 +29,7 @@ function GridTools( { clientId, layout } ) {
 
 				// These calls are purposely ordered from least expensive to most expensive.
 				// Hides the visualizer in cases where the user is not or cannot interact with it.
-				// Also hide if a child block is selected, because layout-child.js will render
+				// Also hide if a child block is selected, because layout-child.jsx will render
 				// the visualizer in that case (with proper childGridClientId handling).
 				if (
 					( ! isDraggingBlocks() && ! isBlockSelected( clientId ) ) ||

package/src/hooks/{position.js → position.jsx}

@@ -261,6 +261,7 @@ export function PositionPanelPure( {
 				label={ __( 'Position' ) }
 				hideLabelFromVision
 				description={ stickyHelpText }
+				popupWidth="anchor"
 				items={ options }
 				value={ selectedOption }
 				onValueChange={ ( selectedItem ) => {
@@ -277,7 +278,6 @@ export function PositionPanelPure( {
 							key={ option.key }
 							value={ option }
 							label={ option.label }
-							className="block-editor-hooks__position-control-item"
 							aria-describedby={ hintId }
 						>
 							<div>{ option.label }</div>