@wordpress/block-editor 14.12.0 → 14.14.0

package/src/components/grid/style.scss

@@ -126,10 +126,11 @@
 			right: $grid-unit-10;
 			z-index: -1;
 
-			// Animate in.
-			animation: components-button__appear-animation 0.1s ease;
-			animation-fill-mode: forwards;
-			@include reduce-motion("animation");
+			@media not ( prefers-reduced-motion ) {
+				// Animate in.
+				animation: components-button__appear-animation 0.1s ease;
+				animation-fill-mode: forwards;
+			}
 		}
 
 		// Don't show the focus inherited by the Button component.

package/src/components/iframe/content.scss

@@ -4,8 +4,11 @@
 
 .block-editor-iframe__html {
 	transform-origin: top center;
-	// Prevents a flash of background color change when entering/exiting zoom out
-	transition: background-color 400ms;
+
+	@media not ( prefers-reduced-motion ) {
+		// Prevents a flash of background color change when entering/exiting zoom out
+		transition: background-color 400ms;
+	}
 
 	&.zoom-out-animation {
 		$scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0);

package/src/components/iframe/index.js

@@ -131,8 +131,23 @@ function Iframe( {
 		function preventFileDropDefault( event ) {
 			event.preventDefault();
 		}
+
+		const { ownerDocument } = node;
+
+		// Ideally ALL classes that are added through get_body_class should
+		// be added in the editor too, which we'll somehow have to get from
+		// the server in the future (which will run the PHP filters).
+		setBodyClasses(
+			Array.from( ownerDocument.body.classList ).filter(
+				( name ) =>
+					name.startsWith( 'admin-color-' ) ||
+					name.startsWith( 'post-type-' ) ||
+					name === 'wp-embed-responsive'
+			)
+		);
+
 		function onLoad() {
-			const { contentDocument, ownerDocument } = node;
+			const { contentDocument } = node;
 			const { documentElement } = contentDocument;
 			iFrameDocument = contentDocument;
 
@@ -140,18 +155,6 @@ function Iframe( {
 
 			clearerRef( documentElement );
 
-			// Ideally ALL classes that are added through get_body_class should
-			// be added in the editor too, which we'll somehow have to get from
-			// the server in the future (which will run the PHP filters).
-			setBodyClasses(
-				Array.from( ownerDocument.body.classList ).filter(
-					( name ) =>
-						name.startsWith( 'admin-color-' ) ||
-						name.startsWith( 'post-type-' ) ||
-						name === 'wp-embed-responsive'
-				)
-			);
-
 			contentDocument.dir = ownerDocument.dir;
 
 			for ( const compatStyle of getCompatibilityStyles() ) {

package/src/components/image-editor/aspect-ratio-dropdown.js

@@ -93,7 +93,7 @@ export default function AspectRatioDropdown( { toggleProps } ) {
 							{
 								slug: 'original',
 								name: __( 'Original' ),
-								aspect: defaultAspect,
+								ratio: defaultAspect,
 							},
 							...( showDefaultRatios
 								? defaultRatios

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

@@ -174,11 +174,11 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => {
  * returns. Optionally, you can also pass any other props through this hook, and
  * they will be merged and returned.
  *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md
+ *
  * @param {Object} props   Optional. Props to pass to the element. Must contain
  *                         the ref if one is defined.
  * @param {Object} options Optional. Inner blocks options.
- *
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md
  */
 export function useInnerBlocksProps( props = {}, options = {} ) {
 	const {

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

@@ -35,11 +35,11 @@ import { MAX_NESTING_DEPTH } from './constants';
  * returns. Optionally, you can also pass any other props through this hook, and
  * they will be merged and returned.
  *
+ * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inner-blocks/README.md
+ *
  * @param {Object} props   Optional. Props to pass to the element. Must contain
  *                         the ref if one is defined.
  * @param {Object} options Optional. Inner blocks options.
- *
- * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inner-blocks/README.md
  */
 export function useInnerBlocksProps( props = {}, options = {} ) {
 	const fallbackRef = useRef();

package/src/components/inserter/block-patterns-explorer/index.js

@@ -12,10 +12,11 @@ import PatternExplorerSidebar from './pattern-explorer-sidebar';
 import PatternList from './pattern-list';
 import { usePatternCategories } from '../block-patterns-tab/use-pattern-categories';
 
-function PatternsExplorer( { initialCategory, rootClientId } ) {
+function PatternsExplorer( { initialCategory, rootClientId, onModalClose } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
-	const [ selectedCategory, setSelectedCategory ] =
-		useState( initialCategory );
+	const [ selectedCategory, setSelectedCategory ] = useState(
+		initialCategory?.name
+	);
 
 	const patternCategories = usePatternCategories( rootClientId );
 
@@ -33,6 +34,7 @@ function PatternsExplorer( { initialCategory, rootClientId } ) {
 				selectedCategory={ selectedCategory }
 				patternCategories={ patternCategories }
 				rootClientId={ rootClientId }
+				onModalClose={ onModalClose }
 			/>
 		</div>
 	);
@@ -45,7 +47,7 @@ function PatternsExplorerModal( { onModalClose, ...restProps } ) {
 			onRequestClose={ onModalClose }
 			isFullScreen
 		>
-			<PatternsExplorer { ...restProps } />
+			<PatternsExplorer onModalClose={ onModalClose } { ...restProps } />
 		</Modal>
 	);
 }

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

@@ -52,6 +52,7 @@ function PatternList( {
 	selectedCategory,
 	patternCategories,
 	rootClientId,
+	onModalClose,
 } ) {
 	const container = useRef();
 	const debouncedSpeak = useDebounce( speak, 500 );
@@ -152,7 +153,10 @@ function PatternList( {
 					<>
 						<BlockPatternsList
 							blockPatterns={ pagingProps.categoryPatterns }
-							onClickPattern={ onClickPattern }
+							onClickPattern={ ( pattern, blocks ) => {
+								onClickPattern( pattern, blocks );
+								onModalClose();
+							} }
 							isDraggable={ false }
 						/>
 						<BlockPatternsPaging { ...pagingProps } />

package/src/components/inserter/block-patterns-tab/index.js

@@ -70,9 +70,7 @@ function BlockPatternsTab( {
 			) }
 			{ showPatternsExplorer && (
 				<PatternsExplorerModal
-					initialCategory={
-						selectedCategory?.name || categories[ 0 ]?.name
-					}
+					initialCategory={ selectedCategory || categories[ 0 ] }
 					patternCategories={ categories }
 					onModalClose={ () => setShowPatternsExplorer( false ) }
 					rootClientId={ rootClientId }

package/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -69,19 +69,19 @@ export function PatternCategoryPreviews( {
 					return false;
 				}
 
-				if ( category.name === allPatternsCategory?.name ) {
+				if ( category.name === allPatternsCategory.name ) {
 					return true;
 				}
 
 				if (
-					category.name === myPatternsCategory?.name &&
+					category.name === myPatternsCategory.name &&
 					pattern.type === INSERTER_PATTERN_TYPES.user
 				) {
 					return true;
 				}
 
 				if (
-					category.name === starterPatternsCategory?.name &&
+					category.name === starterPatternsCategory.name &&
 					pattern.blockTypes?.includes( 'core/post-content' )
 				) {
 					return true;
@@ -149,7 +149,7 @@ export function PatternCategoryPreviews( {
 							level={ 4 }
 							as="div"
 						>
-							{ category?.label }
+							{ category.label }
 						</Heading>
 					</FlexBlock>
 					<PatternsFilter

package/src/components/inserter/block-patterns-tab/patterns-filter.js

@@ -25,7 +25,7 @@ import {
 const getShouldDisableSyncFilter = ( sourceFilter ) =>
 	sourceFilter !== 'all' && sourceFilter !== 'user';
 const getShouldHideSourcesFilter = ( category ) => {
-	return category?.name === myPatternsCategory.name;
+	return category.name === myPatternsCategory.name;
 };
 
 const PATTERN_SOURCE_MENU_OPTIONS = [
@@ -60,7 +60,7 @@ export function PatternsFilter( {
 	// the user may be confused when switching to another category if the haven't explicitly set
 	// this filter themselves.
 	const currentPatternSourceFilter =
-		category?.name === myPatternsCategory.name
+		category.name === myPatternsCategory.name
 			? INSERTER_PATTERN_TYPES.user
 			: patternSourceFilter;
 

package/src/components/inserter/category-tabs/index.js

@@ -65,9 +65,7 @@ function CategoryTabs( {
 						key={ category.name }
 						tabId={ category.name }
 						aria-current={
-							category.name === selectedCategory?.name
-								? 'true'
-								: undefined
+							category === selectedCategory ? 'true' : undefined
 						}
 					>
 						{ category.label }

package/src/components/inserter/no-results.js

@@ -2,15 +2,10 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Icon, blockDefault } from '@wordpress/icons';
 
 function InserterNoResults() {
 	return (
 		<div className="block-editor-inserter__no-results">
-			<Icon
-				className="block-editor-inserter__no-results-icon"
-				icon={ blockDefault }
-			/>
 			<p>{ __( 'No results found.' ) }</p>
 		</div>
 	);

package/src/components/inserter/quick-inserter.js

@@ -21,6 +21,7 @@ import { store as blockEditorStore } from '../../store';
 
 const SEARCH_THRESHOLD = 6;
 const SHOWN_BLOCK_TYPES = 6;
+const SHOWN_BLOCK_PATTERNS = 2;
 
 export default function QuickInserter( {
 	onSelect,
@@ -106,7 +107,9 @@ export default function QuickInserter( {
 					rootClientId={ rootClientId }
 					clientId={ clientId }
 					isAppender={ isAppender }
-					maxBlockPatterns={ 0 }
+					maxBlockPatterns={
+						!! filterValue ? SHOWN_BLOCK_PATTERNS : 0
+					}
 					maxBlockTypes={ SHOWN_BLOCK_TYPES }
 					isDraggable={ false }
 					selectBlockOnInsert={ selectBlockOnInsert }

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

@@ -84,7 +84,9 @@ function InserterSearchResults( {
 	] = useBlockTypesState( destinationRootClientId, onInsertBlocks, isQuick );
 	const [ patterns, , onClickPattern ] = usePatternsState(
 		onInsertBlocks,
-		destinationRootClientId
+		destinationRootClientId,
+		undefined,
+		isQuick
 	);
 
 	const filteredBlockPatterns = useMemo( () => {

package/src/components/inserter/style.scss

@@ -83,8 +83,9 @@ $block-inserter-tabs-height: 44px;
 	border: none;
 	outline: none;
 	padding: 0;
-	transition: color 0.2s ease;
-	@include reduce-motion("transition");
+	@media not ( prefers-reduced-motion ) {
+		transition: color 0.2s ease;
+	}
 }
 
 .block-editor-inserter__menu {
@@ -167,10 +168,6 @@ $block-inserter-tabs-height: 44px;
 	text-align: center;
 }
 
-.block-editor-inserter__no-results-icon {
-	fill: $gray-600;
-}
-
 .block-editor-inserter__child-blocks {
 	padding: 0 $grid-unit-20;
 }
@@ -563,8 +560,9 @@ $block-inserter-tabs-height: 44px;
 		outline-color: var(--wp-admin-theme-color);
 		outline-width: var(--wp-admin-border-width-focus);
 		outline-offset: calc((-1 * var(--wp-admin-border-width-focus)));
-		transition: outline 0.1s linear;
-		@include reduce-motion("transition");
+		@media not ( prefers-reduced-motion ) {
+			transition: outline 0.1s linear;
+		}
 	}
 }
 
@@ -646,5 +644,10 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-tabbed-sidebar__tabpanel .block-editor-inserter__help-text {
+	display: none;
 	padding: 0 $grid-unit-30 $grid-unit-20;
+
+	@include break-mobile {
+		display: block;
+	}
 }

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

@@ -43,8 +43,9 @@
 	cursor: pointer;
 	background: transparent;
 	word-break: break-word;
-	transition: all 0.05s ease-in-out;
-	@include reduce-motion("transition");
+	@media not ( prefers-reduced-motion ) {
+		transition: all 0.05s ease-in-out;
+	}
 	position: relative;
 	height: auto;
 
@@ -97,8 +98,9 @@
 .block-editor-block-types-list__item-icon {
 	padding: 12px 20px;
 	color: $gray-900;
-	transition: all 0.05s ease-in-out;
-	@include reduce-motion("transition");
+	@media not ( prefers-reduced-motion ) {
+		transition: all 0.05s ease-in-out;
+	}
 
 	.block-editor-block-icon {
 		margin-left: auto;
@@ -106,8 +108,9 @@
 	}
 
 	svg {
-		transition: all 0.15s ease-out;
-		@include reduce-motion("transition");
+		@media not ( prefers-reduced-motion ) {
+			transition: all 0.15s ease-out;
+		}
 	}
 
 	.block-editor-block-types-list__list-item[draggable="true"] & {

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

@@ -14,6 +14,36 @@ function KeyboardShortcutsRegister() {
 	// Registering the shortcuts.
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	useEffect( () => {
+		registerShortcut( {
+			name: 'core/block-editor/copy',
+			category: 'block',
+			description: __( 'Copy the selected block(s).' ),
+			keyCombination: {
+				modifier: 'primary',
+				character: 'c',
+			},
+		} );
+
+		registerShortcut( {
+			name: 'core/block-editor/cut',
+			category: 'block',
+			description: __( 'Cut the selected block(s).' ),
+			keyCombination: {
+				modifier: 'primary',
+				character: 'x',
+			},
+		} );
+
+		registerShortcut( {
+			name: 'core/block-editor/paste',
+			category: 'block',
+			description: __( 'Paste the selected block(s).' ),
+			keyCombination: {
+				modifier: 'primary',
+				character: 'v',
+			},
+		} );
+
 		registerShortcut( {
 			name: 'core/block-editor/duplicate',
 			category: 'block',
@@ -29,7 +59,7 @@ function KeyboardShortcutsRegister() {
 			category: 'block',
 			description: __( 'Remove the selected block(s).' ),
 			keyCombination: {
-				modifier: 'shift',
+				modifier: 'primaryShift',
 				character: 'backspace',
 			},
 		} );

package/src/components/link-control/style.scss

@@ -289,8 +289,10 @@ $block-editor-link-control-number-of-actions: 1;
 			right: 0;
 			bottom: 0;
 			border-radius: 100%;
-			animation: loadingpulse 1s linear infinite;
-			animation-delay: 0.5s; // avoid animating for fast network responses
+			@media not ( prefers-reduced-motion ) {
+				animation: loadingpulse 1s linear infinite;
+				animation-delay: 0.5s; // avoid animating for fast network responses
+			}
 		}
 	}
 }
@@ -381,16 +383,19 @@ $block-editor-link-control-number-of-actions: 1;
 		// Point downwards when open (same as list view expander)
 		&[aria-expanded="true"] svg {
 			visibility: visible;
-			transition: transform 0.1s ease;
+			@media not ( prefers-reduced-motion ) {
+				transition: transform 0.1s ease;
+			}
 			transform: rotate(90deg);
-			@include reduce-motion("transition");
+
 		}
 		// Point rightwards when closed (same as list view expander)
 		&[aria-expanded="false"] svg {
 			visibility: visible;
 			transform: rotate(0deg);
-			transition: transform 0.1s ease;
-			@include reduce-motion("transition");
+			@media not ( prefers-reduced-motion ) {
+				transition: transform 0.1s ease;
+			}
 		}
 	}
 }

package/src/components/list-view/style.scss

@@ -158,21 +158,27 @@
 	// without attaching the transition to the list view leaf itself. This prevents rows
 	// from animating too much once the user has dropped the block.
 	&.is-displacement-normal {
-		transition: transform 0.2s;
+		@media not ( prefers-reduced-motion ) {
+			transition: transform 0.2s;
+		}
 		transform: translateY(0);
-		@include reduce-motion("transition");
+
 	}
 
 	&.is-displacement-up {
-		transition: transform 0.2s;
+		@media not ( prefers-reduced-motion ) {
+			transition: transform 0.2s;
+		}
 		transform: translateY(-32px);
-		@include reduce-motion("transition");
+
 	}
 
 	&.is-displacement-down {
-		transition: transform 0.2s;
+		@media not ( prefers-reduced-motion ) {
+			transition: transform 0.2s;
+		}
 		transform: translateY(32px);
-		@include reduce-motion("transition");
+
 	}
 
 	// Collapse multi-selections down into a single row space while dragging. The following
@@ -180,23 +186,30 @@
 	// when displacing up and down. The result is that there should only ever be a single row's
 	// worth of space for the visual indicator of where a block will be placed when dropped.
 	&.is-after-dragged-blocks {
-		transition: transform 0.2s;
+
+		@media not ( prefers-reduced-motion ) {
+			transition: transform 0.2s;
+		}
 		transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
-		@include reduce-motion("transition");
+
 	}
 
 	&.is-after-dragged-blocks.is-displacement-up {
-		transition: transform 0.2s;
+		@media not ( prefers-reduced-motion ) {
+			transition: transform 0.2s;
+		}
 		transform: translateY(calc(-32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
-		@include reduce-motion("transition");
+
 	}
 
 	&.is-after-dragged-blocks.is-displacement-down {
-		transition: transform 0.2s;
+		@media not ( prefers-reduced-motion ) {
+			transition: transform 0.2s;
+		}
 		transform:
 			translateY(calc(32px + var(--wp-admin--list-view-dragged-items-height, 32px) *
 			-1));
-		@include reduce-motion("transition");
+
 	}
 
 	// To ensure displaced rows behave correctly, ensure that blocks that are currently being dragged
@@ -233,7 +246,9 @@
 		font-weight: 400;
 		margin: 0;
 		text-decoration: none;
-		transition: box-shadow 0.1s linear;
+		@media not ( prefers-reduced-motion ) {
+			transition: box-shadow 0.1s linear;
+		}
 
 		.components-modal__content & {
 			padding-left: 0;
@@ -496,9 +511,10 @@ $block-navigation-max-indent: 8;
 .block-editor-list-view__expander
 svg {
 	visibility: visible;
-	transition: transform 0.2s ease;
+	@media not ( prefers-reduced-motion ) {
+		transition: transform 0.2s ease;
+	}
 	transform: rotate(90deg);
-	@include reduce-motion("transition");
 }
 
 // Point rightwards when closed
@@ -507,8 +523,9 @@ svg {
 svg {
 	visibility: visible;
 	transform: rotate(0deg);
-	transition: transform 0.2s ease;
-	@include reduce-motion("transition");
+	@media not ( prefers-reduced-motion ) {
+		transition: transform 0.2s ease;
+	}
 }
 
 .block-editor-list-view-drop-indicator {

package/src/components/media-placeholder/index.js

@@ -227,6 +227,7 @@ export function MediaPlaceholder( {
 			filesList: files,
 			onFileChange: setMedia,
 			onError,
+			multiple,
 		} );
 	};
 

package/src/components/rich-text/event-listeners/delete.js

@@ -6,7 +6,7 @@ import { isCollapsed, isEmpty } from '@wordpress/rich-text';
 
 export default ( props ) => ( element ) => {
 	function onKeyDown( event ) {
-		const { keyCode, shiftKey } = event;
+		const { keyCode, shiftKey, ctrlKey, metaKey } = event;
 
 		if ( event.defaultPrevented ) {
 			return;
@@ -30,8 +30,8 @@ export default ( props ) => ( element ) => {
 				return;
 			}
 
-			// Exclude shift+backspace as they are shortcuts for deleting blocks.
-			if ( shiftKey ) {
+			// Exclude (command|ctrl)+shift+backspace as they are shortcuts for deleting blocks.
+			if ( shiftKey && ( ctrlKey || metaKey ) ) {
 				return;
 			}
 

package/src/components/tool-selector/index.js

@@ -95,7 +95,7 @@ function ToolSelector( props, ref ) {
 					</NavigableMenu>
 					<div className="block-editor-tool-selector__help">
 						{ __(
-							'Tools provide different sets of interactions for blocks. Toggle between simplified content tools (Write) and advanced visual editing tools (Design).'
+							'Tools provide different sets of interactions for blocks. Choose between simplified content tools (Write) and advanced visual editing tools (Design).'
 						) }
 					</div>
 				</>

package/src/components/url-input/style.scss

@@ -33,8 +33,9 @@ $input-size: 300px;
 // Suggestions
 .block-editor-url-input__suggestions {
 	max-height: 200px;
-	transition: all 0.15s ease-in-out;
-	@include reduce-motion("transition");
+	@media not ( prefers-reduced-motion ) {
+		transition: all 0.15s ease-in-out;
+	}
 	padding: 4px 0;
 	// To match the url-input width: input width + padding + 2 buttons.
 	width: $input-size + 2;

package/src/components/writing-flow/use-tab-nav.js

@@ -125,6 +125,10 @@ export default function useTabNav() {
 				return;
 			}
 
+			if ( ! hasMultiSelection() && ! getSelectedBlockClientId() ) {
+				return;
+			}
+
 			const isShift = event.shiftKey;
 			const direction = isShift ? 'findPrevious' : 'findNext';
 			const nextTabbable = focus.tabbable[ direction ]( event.target );

package/src/hooks/aria-label.js

@@ -4,13 +4,6 @@
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 
-const ARIA_LABEL_SCHEMA = {
-	type: 'string',
-	source: 'attribute',
-	attribute: 'aria-label',
-	selector: '*',
-};
-
 /**
  * Filters registered block settings, extending attributes with ariaLabel using aria-label
  * of the first node.
@@ -28,7 +21,9 @@ export function addAttribute( settings ) {
 		// Gracefully handle if settings.attributes is undefined.
 		settings.attributes = {
 			...settings.attributes,
-			ariaLabel: ARIA_LABEL_SCHEMA,
+			ariaLabel: {
+				type: 'string',
+			},
 		};
 	}
 

package/src/hooks/layout.js

@@ -257,7 +257,7 @@ function LayoutPanelPure( {
 												'Nested blocks use content width with options for full and wide widths.'
 										  )
 										: __(
-												'Nested blocks will fill the width of this container. Toggle to constrain.'
+												'Nested blocks will fill the width of this container.'
 										  )
 								}
 							/>