@wordpress/block-editor 14.15.0 → 14.17.0

package/build-style/style.css

@@ -1739,6 +1739,8 @@ iframe[name=editor-canvas] {
   display: block;
   padding: 0;
   position: relative;
+  border: 1px solid #ddd;
+  border-radius: 2px;
 }
 
 .block-editor-global-styles-filters-panel__dropdown-toggle,
@@ -1772,11 +1774,6 @@ iframe[name=editor-canvas] {
   }
 }
 
-.block-editor-global-styles-filters-panel__dropdown {
-  border: 1px solid #ddd;
-  border-radius: 2px;
-}
-
 .block-editor-global-styles__shadow-indicator {
   appearance: none;
   background: none;
@@ -4137,7 +4134,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   width: 280px;
   padding: 24px 32px 32px;
   overflow-x: visible;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 .block-editor-block-patterns-explorer__sidebar__categories-list__item {
   display: block;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.15.0",
+	"version": "14.17.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,38 +37,38 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.20.0",
-		"@wordpress/api-fetch": "^7.20.0",
-		"@wordpress/blob": "^4.20.0",
-		"@wordpress/block-serialization-default-parser": "^5.20.0",
-		"@wordpress/blocks": "^14.9.0",
-		"@wordpress/commands": "^1.20.0",
-		"@wordpress/components": "^29.6.0",
-		"@wordpress/compose": "^7.20.0",
-		"@wordpress/data": "^10.20.0",
-		"@wordpress/date": "^5.20.0",
-		"@wordpress/deprecated": "^4.20.0",
-		"@wordpress/dom": "^4.20.0",
-		"@wordpress/element": "^6.20.0",
-		"@wordpress/escape-html": "^3.20.0",
-		"@wordpress/hooks": "^4.20.0",
-		"@wordpress/html-entities": "^4.20.0",
-		"@wordpress/i18n": "^5.20.0",
-		"@wordpress/icons": "^10.20.0",
-		"@wordpress/is-shallow-equal": "^5.20.0",
-		"@wordpress/keyboard-shortcuts": "^5.20.0",
-		"@wordpress/keycodes": "^4.20.0",
-		"@wordpress/notices": "^5.20.0",
-		"@wordpress/preferences": "^4.20.0",
-		"@wordpress/priority-queue": "^3.20.0",
-		"@wordpress/private-apis": "^1.20.0",
-		"@wordpress/rich-text": "^7.20.0",
-		"@wordpress/style-engine": "^2.20.0",
-		"@wordpress/token-list": "^3.20.0",
-		"@wordpress/upload-media": "^0.5.0",
-		"@wordpress/url": "^4.20.0",
-		"@wordpress/warning": "^3.20.0",
-		"@wordpress/wordcount": "^4.20.0",
+		"@wordpress/a11y": "^4.22.0",
+		"@wordpress/api-fetch": "^7.22.0",
+		"@wordpress/blob": "^4.22.0",
+		"@wordpress/block-serialization-default-parser": "^5.22.0",
+		"@wordpress/blocks": "^14.11.0",
+		"@wordpress/commands": "^1.22.0",
+		"@wordpress/components": "^29.8.0",
+		"@wordpress/compose": "^7.22.0",
+		"@wordpress/data": "^10.22.0",
+		"@wordpress/date": "^5.22.0",
+		"@wordpress/deprecated": "^4.22.0",
+		"@wordpress/dom": "^4.22.0",
+		"@wordpress/element": "^6.22.0",
+		"@wordpress/escape-html": "^3.22.0",
+		"@wordpress/hooks": "^4.22.0",
+		"@wordpress/html-entities": "^4.22.0",
+		"@wordpress/i18n": "^5.22.0",
+		"@wordpress/icons": "^10.22.0",
+		"@wordpress/is-shallow-equal": "^5.22.0",
+		"@wordpress/keyboard-shortcuts": "^5.22.0",
+		"@wordpress/keycodes": "^4.22.0",
+		"@wordpress/notices": "^5.22.0",
+		"@wordpress/preferences": "^4.22.0",
+		"@wordpress/priority-queue": "^3.22.0",
+		"@wordpress/private-apis": "^1.22.0",
+		"@wordpress/rich-text": "^7.22.0",
+		"@wordpress/style-engine": "^2.22.0",
+		"@wordpress/token-list": "^3.22.0",
+		"@wordpress/upload-media": "^0.7.0",
+		"@wordpress/url": "^4.22.0",
+		"@wordpress/warning": "^3.22.0",
+		"@wordpress/wordcount": "^4.22.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +91,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "72476970386146d450c375e5c71a96dda7c9aaa8"
+	"gitHead": "01a314d7e46a50101e328fdb11959c441e49372d"
 }

package/src/components/background-image-control/index.js

@@ -17,7 +17,6 @@ import {
 	FocalPointPicker,
 	MenuItem,
 	VisuallyHidden,
-	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
 	Dropdown,
@@ -119,13 +118,16 @@ function InspectorImagePreviewItem( {
 	className,
 	onToggleCallback = noop,
 } ) {
+	const { isOpen, ...restToggleProps } = toggleProps;
+
 	useEffect( () => {
-		if ( typeof toggleProps?.isOpen !== 'undefined' ) {
-			onToggleCallback( toggleProps?.isOpen );
+		if ( typeof isOpen !== 'undefined' ) {
+			onToggleCallback( isOpen );
 		}
-	}, [ toggleProps?.isOpen, onToggleCallback ] );
-	return (
-		<ItemGroup as={ as } className={ className } { ...toggleProps }>
+	}, [ isOpen, onToggleCallback ] );
+
+	const renderPreviewContent = () => {
+		return (
 			<HStack
 				justify="flex-start"
 				as="span"
@@ -162,7 +164,20 @@ function InspectorImagePreviewItem( {
 					</VisuallyHidden>
 				</FlexItem>
 			</HStack>
-		</ItemGroup>
+		);
+	};
+
+	return as === 'button' ? (
+		<Button
+			__next40pxDefaultSize
+			className={ className }
+			{ ...restToggleProps }
+			aria-expanded={ isOpen }
+		>
+			{ renderPreviewContent() }
+		</Button>
+	) : (
+		renderPreviewContent()
 	);
 }
 

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

@@ -82,7 +82,7 @@ function BlockBreadcrumb( { rootLabelText } ) {
 						{ rootLabel }
 					</Button>
 				) }
-				{ ! hasSelection && rootLabel }
+				{ ! hasSelection && <span>{ rootLabel }</span> }
 				{ !! clientId && (
 					<Icon
 						icon={ chevronRightSmall }

package/src/components/block-breadcrumb/test/__snapshots__/index.js.snap

@@ -11,7 +11,9 @@ exports[`BlockBreadcrumb should render correctly 1`] = `
       aria-current="true"
       class="block-editor-block-breadcrumb__current"
     >
-      Document
+      <span>
+        Document
+      </span>
     </li>
   </ul>
 </div>

package/src/components/block-list/block.js

@@ -262,15 +262,19 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 	// Do not add new properties here, use `useDispatch` instead to avoid
 	// leaking new props to the public API (editor.BlockListBlock filter).
 	return {
-		setAttributes( newAttributes ) {
+		setAttributes( nextAttributes ) {
 			const { getMultiSelectedBlockClientIds } =
 				registry.select( blockEditorStore );
 			const multiSelectedBlockClientIds =
 				getMultiSelectedBlockClientIds();
-			const { clientId } = ownProps;
+			const { clientId, attributes } = ownProps;
 			const clientIds = multiSelectedBlockClientIds.length
 				? multiSelectedBlockClientIds
 				: [ clientId ];
+			const newAttributes =
+				typeof nextAttributes === 'function'
+					? nextAttributes( attributes )
+					: nextAttributes;
 
 			updateBlockAttributes( clientIds, newAttributes );
 		},

package/src/components/block-list/use-block-props/use-firefox-draggable-compatibility.js

@@ -41,12 +41,15 @@ function restore( node ) {
 
 function down( event ) {
 	const { target } = event;
-	const { ownerDocument, isContentEditable } = target;
+	const { ownerDocument, isContentEditable, tagName } = target;
+	const isInputOrTextArea = [ 'INPUT', 'TEXTAREA' ].includes( tagName );
+
 	const nodes = nodesByDocument.get( ownerDocument );
 
-	if ( isContentEditable ) {
-		// Whenever an editable element is clicked, check which draggable
-		// blocks contain this element, and temporarily disable draggability.
+	if ( isContentEditable || isInputOrTextArea ) {
+		// Whenever an editable element or an input or textarea is clicked,
+		// check which draggable blocks contain this element, and temporarily
+		// disable draggability.
 		for ( const node of nodes ) {
 			if (
 				node.getAttribute( 'draggable' ) === 'true' &&
@@ -57,8 +60,8 @@ function down( event ) {
 			}
 		}
 	} else {
-		// Whenever a non-editable element is clicked, re-enable draggability
-		// for any blocks that were previously disabled.
+		// Whenever a non-editable element or an input or textarea is clicked,
+		// re-enable draggability for any blocks that were previously disabled.
 		for ( const node of nodes ) {
 			restore( node );
 		}
@@ -66,11 +69,11 @@ function down( event ) {
 }
 
 /**
- * In Firefox, the `draggable` and `contenteditable` attributes don't play well
- * together. When `contenteditable` is within a `draggable` element, selection
- * doesn't get set in the right place. The only solution is to temporarily
- * remove the `draggable` attribute clicking inside `contenteditable` elements.
- *
+ * In Firefox, the `draggable` and `contenteditable` or `input` or `textarea`
+ * elements don't play well together. When these elements are within a
+ * `draggable` element, selection doesn't get set in the right place. The only
+ * solution is to temporarily remove the `draggable` attribute clicking inside
+ * these elements.
  * @return {Function} Cleanup function.
  */
 export function useFirefoxDraggableCompatibility() {

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

@@ -29,7 +29,10 @@ export default function PreviewBlockPopover( { blocks } ) {
 					<div className="block-editor-block-switcher__preview-title">
 						{ __( 'Preview' ) }
 					</div>
-					<BlockPreview viewportWidth={ 500 } blocks={ blocks } />
+					{ /* 600px is the value of $break-small in base-styles/_breakpoints.scss.
+						We set the viewport width to 601px to make sure that the media-text 
+						block which uses this breakpoint has the correct padding. */ }
+					<BlockPreview viewportWidth={ 601 } blocks={ blocks } />
 				</div>
 			</Popover>
 		</div>

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

@@ -24,6 +24,7 @@ import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
 import { useShowBlockTools } from './use-show-block-tools';
 import { unlock } from '../../lock-unlock';
+import usePasteStyles from '../use-paste-styles';
 
 function selector( select ) {
 	const {
@@ -74,6 +75,7 @@ export default function BlockTools( {
 	const { getGroupingBlockName } = useSelect( blocksStore );
 	const { showEmptyBlockSideInserter, showBlockToolbarPopover } =
 		useShowBlockTools();
+	const pasteStyles = usePasteStyles();
 
 	const {
 		duplicateBlocks,
@@ -134,6 +136,13 @@ export default function BlockTools( {
 				event.preventDefault();
 				removeBlocks( clientIds );
 			}
+		} else if ( isMatch( 'core/block-editor/paste-styles', event ) ) {
+			const clientIds = getSelectedBlockClientIds();
+			if ( clientIds.length ) {
+				event.preventDefault();
+				const blocks = getBlocksByClientId( clientIds );
+				pasteStyles( blocks );
+			}
 		} else if ( isMatch( 'core/block-editor/insert-after', event ) ) {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {

package/src/components/block-tools/use-show-block-tools.js

@@ -25,6 +25,7 @@ export function useShowBlockTools() {
 			getSettings,
 			__unstableGetEditorMode,
 			isTyping,
+			isBlockInterfaceHidden,
 		} = unlock( select( blockEditorStore ) );
 
 		const clientId =
@@ -45,6 +46,7 @@ export function useShowBlockTools() {
 			editorMode !== 'navigation' &&
 			isEmptyDefaultBlock;
 		const _showBlockToolbarPopover =
+			! isBlockInterfaceHidden() &&
 			! getSettings().hasFixedToolbar &&
 			! _showEmptyBlockSideInserter &&
 			hasSelectedBlock &&

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

@@ -7,7 +7,6 @@ import {
 	__experimentalIsDefinedBorder as isDefinedBorder,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalItemGroup as ItemGroup,
 	BaseControl,
 } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
@@ -298,13 +297,11 @@ export default function BorderPanel( {
 						</BaseControl.VisualLabel>
 					) : null }
 
-					<ItemGroup isBordered isSeparated>
-						<ShadowPopover
-							shadow={ shadow }
-							onShadowChange={ setShadow }
-							settings={ settings }
-						/>
-					</ItemGroup>
+					<ShadowPopover
+						shadow={ shadow }
+						onShadowChange={ setShadow }
+						settings={ settings }
+					/>
 				</ToolsPanelItem>
 			) }
 		</Wrapper>

package/src/components/global-styles/style.scss

@@ -25,6 +25,8 @@
 	display: block;
 	padding: 0;
 	position: relative;
+	border: 1px solid $gray-300;
+	border-radius: $radius-small;
 }
 
 .block-editor-global-styles-filters-panel__dropdown-toggle,
@@ -59,11 +61,6 @@
 	}
 }
 
-.block-editor-global-styles-filters-panel__dropdown {
-	border: 1px solid $gray-300;
-	border-radius: $radius-small;
-}
-
 // These styles are similar to the color palette.
 .block-editor-global-styles__shadow-indicator {
 	appearance: none;

package/src/components/inserter/block-patterns-explorer/pattern-list.js

@@ -21,6 +21,7 @@ import {
 	INSERTER_PATTERN_TYPES,
 	allPatternsCategory,
 	myPatternsCategory,
+	starterPatternsCategory,
 } from '../block-patterns-tab/utils';
 
 function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
@@ -85,6 +86,12 @@ function PatternList( {
 			) {
 				return true;
 			}
+			if (
+				selectedCategory === starterPatternsCategory.name &&
+				pattern.blockTypes?.includes( 'core/post-content' )
+			) {
+				return true;
+			}
 			if ( selectedCategory === 'uncategorized' ) {
 				const hasKnownCategory =
 					pattern.categories?.some( ( category ) =>

package/src/components/inserter/media-tab/media-preview.js

@@ -36,7 +36,6 @@ import { getBlockAndPreviewFromMedia } from './utils';
 import { store as blockEditorStore } from '../../../store';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
-const MAXIMUM_TITLE_LENGTH = 25;
 const MEDIA_OPTIONS_POPOVER_PROPS = {
 	position: 'bottom left',
 	className:
@@ -239,12 +238,6 @@ export function MediaPreview( { media, onClick, category } ) {
 			? media.title
 			: media.title?.rendered || __( 'no title' );
 
-	let truncatedTitle;
-	if ( title.length > MAXIMUM_TITLE_LENGTH ) {
-		const omission = '...';
-		truncatedTitle =
-			title.slice( 0, MAXIMUM_TITLE_LENGTH - omission.length ) + omission;
-	}
 	const onMouseEnter = useCallback( () => setIsHovered( true ), [] );
 	const onMouseLeave = useCallback( () => setIsHovered( false ), [] );
 	return (
@@ -268,7 +261,7 @@ export function MediaPreview( { media, onClick, category } ) {
 							onMouseEnter={ onMouseEnter }
 							onMouseLeave={ onMouseLeave }
 						>
-							<Tooltip text={ truncatedTitle || title }>
+							<Tooltip text={ title }>
 								<Composite.Item
 									render={
 										<div

package/src/components/inserter/style.scss

@@ -379,7 +379,7 @@ $block-inserter-tabs-height: 44px;
 		width: $sidebar-width;
 		padding: $grid-unit-30 $grid-unit-40 $grid-unit-40;
 		overflow-x: visible;
-		overflow-y: scroll;
+		overflow-y: auto;
 
 		&__categories-list__item {
 			display: block;

package/src/components/keyboard-shortcuts/index.js

@@ -64,6 +64,18 @@ function KeyboardShortcutsRegister() {
 			},
 		} );
 
+		registerShortcut( {
+			name: 'core/block-editor/paste-styles',
+			category: 'block',
+			description: __(
+				'Paste the copied style to the selected block(s).'
+			),
+			keyCombination: {
+				modifier: 'primaryAlt',
+				character: 'v',
+			},
+		} );
+
 		registerShortcut( {
 			name: 'core/block-editor/insert-before',
 			category: 'block',

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

@@ -501,7 +501,7 @@ function LinkControl( {
 LinkControl.ViewerFill = ViewerFill;
 LinkControl.DEFAULT_LINK_SETTINGS = DEFAULT_LINK_SETTINGS;
 
-export const DeprecatedExperimentalLinkControl = ( props ) => {
+const DeprecatedExperimentalLinkControl = ( props ) => {
 	deprecated( 'wp.blockEditor.__experimentalLinkControl', {
 		since: '6.8',
 		alternative: 'wp.blockEditor.LinkControl',
@@ -510,4 +510,9 @@ export const DeprecatedExperimentalLinkControl = ( props ) => {
 	return <LinkControl { ...props } />;
 };
 
+DeprecatedExperimentalLinkControl.ViewerFill = LinkControl.ViewerFill;
+DeprecatedExperimentalLinkControl.DEFAULT_LINK_SETTINGS =
+	LinkControl.DEFAULT_LINK_SETTINGS;
+
+export { DeprecatedExperimentalLinkControl };
 export default LinkControl;

package/src/components/link-control/search-input.js

@@ -114,18 +114,16 @@ const LinkControlSearchInput = forwardRef(
 			}
 		};
 
-		const inputLabel = placeholder ?? __( 'Search or type URL' );
-
 		return (
 			<div className="block-editor-link-control__search-input-container">
 				<URLInput
 					disableSuggestions={ currentLink?.url === value }
-					label={ inputLabel }
+					label={ __( 'Link' ) }
 					hideLabelFromVision={ hideLabelFromVision }
 					className={ className }
 					value={ value }
 					onChange={ onInputChange }
-					placeholder={ inputLabel }
+					placeholder={ placeholder ?? __( 'Search or type URL' ) }
 					__experimentalRenderSuggestions={
 						showSuggestions ? handleRenderSuggestions : null
 					}