@wordpress/block-editor 11.7.0 → 11.8.0

package/build-style/style-rtl.css

@@ -158,7 +158,8 @@
 .block-editor-block-inspector .components-base-control:last-child {
   margin-bottom: 8px;
 }
-.block-editor-block-inspector .components-focal-point-picker-control .components-base-control {
+.block-editor-block-inspector .components-focal-point-picker-control .components-base-control,
+.block-editor-block-inspector .components-query-controls .components-base-control {
   margin-bottom: 0;
 }
 .block-editor-block-inspector .components-panel__body {
@@ -1435,6 +1436,44 @@
   text-transform: capitalize;
 }
 
+.block-editor-global-styles-effects-panel__toggle-icon {
+  fill: currentColor;
+}
+
+.block-editor-global-styles-effects-panel__shadow-popover-container {
+  width: 230px;
+}
+
+.block-editor-global-styles-effects-panel__shadow-dropdown {
+  display: block;
+  padding: 0;
+}
+.block-editor-global-styles-effects-panel__shadow-dropdown > button {
+  width: 100%;
+  padding: 8px;
+}
+.block-editor-global-styles-effects-panel__shadow-dropdown > button.is-open {
+  background-color: #f0f0f0;
+}
+
+.block-editor-global-styles-effects-panel__shadow-indicator-wrapper {
+  padding: 6px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.block-editor-global-styles-effects-panel__shadow-indicator {
+  color: #2f2f2f;
+  border: #e0e0e0 1px solid;
+  border-radius: 2px;
+  cursor: pointer;
+  padding: 0;
+  height: 24px;
+  width: 24px;
+}
+
 .block-editor-height-control {
   border: 0;
   margin: 0;
@@ -2454,7 +2493,9 @@
 }
 .block-editor-list-view-drop-indicator .block-editor-list-view-drop-indicator__line {
   background: var(--wp-admin-theme-color);
-  height: 1px;
+  height: 6px;
+  border: 1px solid #fff;
+  border-radius: 4px;
 }
 
 .block-editor-list-view-placeholder {
@@ -3961,7 +4002,7 @@
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
-  grid-template-rows: 16px auto;
+  grid-template-rows: 24px auto;
 }
 
 .component-spacing-sizes-control {
@@ -3977,7 +4018,7 @@
   align-self: center;
 }
 .component-spacing-sizes-control .components-base-control__label {
-  margin-bottom: 0;
+  margin-bottom: 8px;
   height: 16px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__side-labels {
@@ -4006,6 +4047,7 @@
   grid-row: 1/1;
   align-self: center;
   margin-right: 4px;
+  margin-bottom: 8px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all {
   grid-column: 2/2;
@@ -4031,26 +4073,25 @@
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-range {
   grid-column: span 2;
   margin-right: 16px;
-  margin-top: 8px;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-value-input {
+.component-spacing-sizes-control .components-base-control.components-spacing-sizes-control__custom-value-input {
   width: 124px;
-  margin-top: 8px;
   grid-column: 1;
+  margin-bottom: 0;
 }
-.component-spacing-sizes-control .components-range-control {
+.component-spacing-sizes-control .components-base-control.components-range-control {
   height: 40px;
   /* Vertically center the RangeControl until it has true 40px height. */
   display: flex;
   align-items: center;
+  margin-bottom: 0;
 }
-.component-spacing-sizes-control .components-range-control > .components-base-control__field {
+.component-spacing-sizes-control .components-base-control.components-range-control > .components-base-control__field {
   /* Fixes RangeControl contents when the outer wrapper is flex */
   flex: 1;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__range-control {
   grid-column: span 3;
-  margin-top: 8px;
 }
 .component-spacing-sizes-control .components-range-control__mark {
   height: 4px;

package/build-style/style.css

@@ -158,7 +158,8 @@
 .block-editor-block-inspector .components-base-control:last-child {
   margin-bottom: 8px;
 }
-.block-editor-block-inspector .components-focal-point-picker-control .components-base-control {
+.block-editor-block-inspector .components-focal-point-picker-control .components-base-control,
+.block-editor-block-inspector .components-query-controls .components-base-control {
   margin-bottom: 0;
 }
 .block-editor-block-inspector .components-panel__body {
@@ -1435,6 +1436,44 @@
   text-transform: capitalize;
 }
 
+.block-editor-global-styles-effects-panel__toggle-icon {
+  fill: currentColor;
+}
+
+.block-editor-global-styles-effects-panel__shadow-popover-container {
+  width: 230px;
+}
+
+.block-editor-global-styles-effects-panel__shadow-dropdown {
+  display: block;
+  padding: 0;
+}
+.block-editor-global-styles-effects-panel__shadow-dropdown > button {
+  width: 100%;
+  padding: 8px;
+}
+.block-editor-global-styles-effects-panel__shadow-dropdown > button.is-open {
+  background-color: #f0f0f0;
+}
+
+.block-editor-global-styles-effects-panel__shadow-indicator-wrapper {
+  padding: 6px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.block-editor-global-styles-effects-panel__shadow-indicator {
+  color: #2f2f2f;
+  border: #e0e0e0 1px solid;
+  border-radius: 2px;
+  cursor: pointer;
+  padding: 0;
+  height: 24px;
+  width: 24px;
+}
+
 .block-editor-height-control {
   border: 0;
   margin: 0;
@@ -2454,7 +2493,9 @@
 }
 .block-editor-list-view-drop-indicator .block-editor-list-view-drop-indicator__line {
   background: var(--wp-admin-theme-color);
-  height: 1px;
+  height: 6px;
+  border: 1px solid #fff;
+  border-radius: 4px;
 }
 
 .block-editor-list-view-placeholder {
@@ -3961,7 +4002,7 @@
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
-  grid-template-rows: 16px auto;
+  grid-template-rows: 24px auto;
 }
 
 .component-spacing-sizes-control {
@@ -3977,7 +4018,7 @@
   align-self: center;
 }
 .component-spacing-sizes-control .components-base-control__label {
-  margin-bottom: 0;
+  margin-bottom: 8px;
   height: 16px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__side-labels {
@@ -4006,6 +4047,7 @@
   grid-row: 1/1;
   align-self: center;
   margin-left: 4px;
+  margin-bottom: 8px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all {
   grid-column: 2/2;
@@ -4031,26 +4073,25 @@
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-range {
   grid-column: span 2;
   margin-left: 16px;
-  margin-top: 8px;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-value-input {
+.component-spacing-sizes-control .components-base-control.components-spacing-sizes-control__custom-value-input {
   width: 124px;
-  margin-top: 8px;
   grid-column: 1;
+  margin-bottom: 0;
 }
-.component-spacing-sizes-control .components-range-control {
+.component-spacing-sizes-control .components-base-control.components-range-control {
   height: 40px;
   /* Vertically center the RangeControl until it has true 40px height. */
   display: flex;
   align-items: center;
+  margin-bottom: 0;
 }
-.component-spacing-sizes-control .components-range-control > .components-base-control__field {
+.component-spacing-sizes-control .components-base-control.components-range-control > .components-base-control__field {
   /* Fixes RangeControl contents when the outer wrapper is flex */
   flex: 1;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__range-control {
   grid-column: span 3;
-  margin-top: 8px;
 }
 .component-spacing-sizes-control .components-range-control__mark {
   height: 4px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "11.7.0",
+	"version": "11.8.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,35 +33,35 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.30.0",
-		"@wordpress/api-fetch": "^6.27.0",
-		"@wordpress/blob": "^3.30.0",
-		"@wordpress/blocks": "^12.7.0",
-		"@wordpress/components": "^23.7.0",
-		"@wordpress/compose": "^6.7.0",
-		"@wordpress/data": "^9.0.0",
-		"@wordpress/date": "^4.30.0",
-		"@wordpress/deprecated": "^3.30.0",
-		"@wordpress/dom": "^3.30.0",
-		"@wordpress/element": "^5.7.0",
-		"@wordpress/escape-html": "^2.30.0",
-		"@wordpress/hooks": "^3.30.0",
-		"@wordpress/html-entities": "^3.30.0",
-		"@wordpress/i18n": "^4.30.0",
-		"@wordpress/icons": "^9.21.0",
-		"@wordpress/is-shallow-equal": "^4.30.0",
-		"@wordpress/keyboard-shortcuts": "^4.7.0",
-		"@wordpress/keycodes": "^3.30.0",
-		"@wordpress/notices": "^3.30.0",
-		"@wordpress/preferences": "^3.7.0",
-		"@wordpress/private-apis": "^0.12.0",
-		"@wordpress/rich-text": "^6.7.0",
-		"@wordpress/shortcode": "^3.30.0",
-		"@wordpress/style-engine": "^1.13.0",
-		"@wordpress/token-list": "^2.30.0",
-		"@wordpress/url": "^3.31.0",
-		"@wordpress/warning": "^2.30.0",
-		"@wordpress/wordcount": "^3.30.0",
+		"@wordpress/a11y": "^3.31.0",
+		"@wordpress/api-fetch": "^6.28.0",
+		"@wordpress/blob": "^3.31.0",
+		"@wordpress/blocks": "^12.8.0",
+		"@wordpress/components": "^23.8.0",
+		"@wordpress/compose": "^6.8.0",
+		"@wordpress/data": "^9.1.0",
+		"@wordpress/date": "^4.31.0",
+		"@wordpress/deprecated": "^3.31.0",
+		"@wordpress/dom": "^3.31.0",
+		"@wordpress/element": "^5.8.0",
+		"@wordpress/escape-html": "^2.31.0",
+		"@wordpress/hooks": "^3.31.0",
+		"@wordpress/html-entities": "^3.31.0",
+		"@wordpress/i18n": "^4.31.0",
+		"@wordpress/icons": "^9.22.0",
+		"@wordpress/is-shallow-equal": "^4.31.0",
+		"@wordpress/keyboard-shortcuts": "^4.8.0",
+		"@wordpress/keycodes": "^3.31.0",
+		"@wordpress/notices": "^3.31.0",
+		"@wordpress/preferences": "^3.8.0",
+		"@wordpress/private-apis": "^0.13.0",
+		"@wordpress/rich-text": "^6.8.0",
+		"@wordpress/shortcode": "^3.31.0",
+		"@wordpress/style-engine": "^1.14.0",
+		"@wordpress/token-list": "^2.31.0",
+		"@wordpress/url": "^3.32.0",
+		"@wordpress/warning": "^2.31.0",
+		"@wordpress/wordcount": "^3.31.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -83,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d5c28a67b11e91e3e4b8e90346bfcb90909364d6"
+	"gitHead": "d61700b9f1c72ba0b030fc815ef1685b4f4031ec"
 }

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

@@ -18,10 +18,12 @@
 		}
 	}
 
-	// Reset unexpected margin-bottom from being applied to the `BaseControl`
-	// component of the `FocalPointPicker` component.
-	.components-focal-point-picker-control .components-base-control {
-		margin-bottom: 0;
+	// Reset unwanted margin-bottom from being applied to BaseControls within certain components.
+	.components-focal-point-picker-control,
+	.components-query-controls {
+		.components-base-control {
+			margin-bottom: 0;
+		}
 	}
 
 	.components-panel__body {

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

@@ -215,7 +215,7 @@ class BlockListBlock extends Component {
 			order + 1
 		);
 		const { isFullWidth, isContainerRelated } = alignmentHelpers;
-		const accessible = ! ( isSelected || isInnerBlockSelected );
+		const isFocused = isSelected || isInnerBlockSelected;
 		const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
 		const isScreenWidthEqual = blockWidth === screenWidth;
 		const isScreenWidthWider = blockWidth < screenWidth;
@@ -224,8 +224,9 @@ class BlockListBlock extends Component {
 		return (
 			<TouchableWithoutFeedback
 				onPress={ this.onFocus }
-				accessible={ accessible }
+				accessible={ ! isFocused }
 				accessibilityRole={ 'button' }
+				disabled={ isFocused }
 			>
 				<View
 					style={ { flex: 1 } }

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

@@ -6,7 +6,7 @@ import { View, Platform, TouchableWithoutFeedback } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Component, createContext } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { createBlock } from '@wordpress/blocks';
@@ -33,7 +33,6 @@ import {
 import { BlockDraggableWrapper } from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
 
-export const OnCaretVerticalPositionChange = createContext();
 const identity = ( x ) => x;
 
 const stylesMemo = {};
@@ -70,8 +69,6 @@ export class BlockList extends Component {
 		};
 		this.renderItem = this.renderItem.bind( this );
 		this.renderBlockListFooter = this.renderBlockListFooter.bind( this );
-		this.onCaretVerticalPositionChange =
-			this.onCaretVerticalPositionChange.bind( this );
 		this.scrollViewInnerRef = this.scrollViewInnerRef.bind( this );
 		this.addBlockToEndOfPost = this.addBlockToEndOfPost.bind( this );
 		this.shouldFlatListPreventAutomaticScroll =
@@ -94,15 +91,6 @@ export class BlockList extends Component {
 		this.props.insertBlock( newBlock, this.props.blockCount );
 	}
 
-	onCaretVerticalPositionChange( targetId, caretY, previousCaretY ) {
-		KeyboardAwareFlatList.handleCaretVerticalPositionChange(
-			this.scrollViewRef,
-			targetId,
-			caretY,
-			previousCaretY
-		);
-	}
-
 	scrollViewInnerRef( ref ) {
 		this.scrollViewRef = ref;
 	}
@@ -209,13 +197,7 @@ export class BlockList extends Component {
 			</BlockListConsumer>
 		);
 
-		return (
-			<OnCaretVerticalPositionChange.Provider
-				value={ this.onCaretVerticalPositionChange }
-			>
-				{ blockList }
-			</OnCaretVerticalPositionChange.Provider>
-		);
+		return blockList;
 	}
 
 	renderList( extraProps = {} ) {
@@ -237,8 +219,7 @@ export class BlockList extends Component {
 		} = this.props;
 		const { parentScrollRef, onScroll } = extraProps;
 
-		const { blockToolbar, blockBorder, headerToolbar, floatingToolbar } =
-			styles;
+		const { blockToolbar, headerToolbar, floatingToolbar } = styles;
 
 		const containerStyle = {
 			flex: isRootList ? 1 : 0,
@@ -250,6 +231,15 @@ export class BlockList extends Component {
 		const isContentStretch = contentResizeMode === 'stretch';
 		const isMultiBlocks = blockClientIds.length > 1;
 		const { isWider } = alignmentHelpers;
+		const extraScrollHeight =
+			headerToolbar.height +
+			blockToolbar.height +
+			( isFloatingToolbarVisible ? floatingToolbar.height : 0 );
+
+		const scrollViewStyle = [
+			{ flex: isRootList ? 1 : 0 },
+			! isRootList && styles.overflowVisible,
+		];
 
 		return (
 			<View
@@ -263,24 +253,12 @@ export class BlockList extends Component {
 						? { removeClippedSubviews: false }
 						: {} ) } // Disable clipping on Android to fix focus losing. See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
 					accessibilityLabel="block-list"
-					autoScroll={ this.props.autoScroll }
 					innerRef={ ( ref ) => {
 						this.scrollViewInnerRef( parentScrollRef || ref );
 					} }
-					extraScrollHeight={
-						blockToolbar.height + blockBorder.width
-					}
-					inputAccessoryViewHeight={
-						headerToolbar.height +
-						( isFloatingToolbarVisible
-							? floatingToolbar.height
-							: 0 )
-					}
+					extraScrollHeight={ extraScrollHeight }
 					keyboardShouldPersistTaps="always"
-					scrollViewStyle={ [
-						{ flex: isRootList ? 1 : 0 },
-						! isRootList && styles.overflowVisible,
-					] }
+					scrollViewStyle={ scrollViewStyle }
 					extraData={ this.getExtraData() }
 					scrollEnabled={ isRootList }
 					contentContainerStyle={ [
@@ -407,6 +385,7 @@ export default compose( [
 		( select, { rootClientId, orientation, filterInnerBlocks } ) => {
 			const {
 				getBlockCount,
+				getBlockHierarchyRootClientId,
 				getBlockOrder,
 				getSelectedBlockClientId,
 				isBlockInsertionPointVisible,
@@ -427,10 +406,12 @@ export default compose( [
 			const isReadOnly = getSettings().readOnly;
 
 			const blockCount = getBlockCount();
-			const hasRootInnerBlocks = !! blockCount;
+			const rootBlockId = getBlockHierarchyRootClientId(
+				selectedBlockClientId
+			);
 
 			const isFloatingToolbarVisible =
-				!! selectedBlockClientId && hasRootInnerBlocks;
+				!! selectedBlockClientId && !! getBlockCount( rootBlockId );
 			const isRTL = getSettings().isRTL;
 
 			return {

package/src/components/block-list/use-in-between-inserter.js

@@ -4,6 +4,7 @@
 import { useRefEffect } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useContext } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -93,7 +94,9 @@ export function useInBetweenInserter() {
 							blockElRect.top > offsetTop ) ||
 						( blockEl.classList.contains( 'wp-block' ) &&
 							orientation === 'horizontal' &&
-							blockElRect.left > offsetLeft )
+							( isRTL()
+								? blockElRect.right < offsetLeft
+								: blockElRect.left > offsetLeft ) )
 					);
 				} );
 

package/src/components/block-popover/inbetween.js

@@ -106,16 +106,7 @@ function BlockPopoverInbetween( {
 						nextRect && previousRect
 							? nextRect.top - previousRect.bottom
 							: 0;
-
-					if ( isRTL() ) {
-						// vertical, rtl
-						left = previousRect
-							? previousRect.right
-							: nextRect.right;
-					} else {
-						// vertical, ltr
-						left = previousRect ? previousRect.left : nextRect.left;
-					}
+					left = previousRect ? previousRect.left : nextRect.left;
 				} else {
 					top = previousRect ? previousRect.top : nextRect.top;
 					height = previousRect
@@ -124,9 +115,7 @@ function BlockPopoverInbetween( {
 
 					if ( isRTL() ) {
 						// non vertical, rtl
-						left = previousRect
-							? previousRect.left
-							: nextRect.right;
+						left = nextRect ? nextRect.right : previousRect.left;
 						width =
 							previousRect && nextRect
 								? previousRect.left - nextRect.right

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

@@ -29,7 +29,6 @@ import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
 import { store as blockEditorStore } from '../../store';
-import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import { useShowMoversGestures } from '../block-toolbar/utils';
 
 const noop = () => {};
@@ -138,11 +137,6 @@ export function BlockSettingsDropdown( {
 		[ __experimentalSelectBlock ]
 	);
 
-	const blockTitle = useBlockDisplayTitle( {
-		clientId: firstBlockClientId,
-		maximumLength: 25,
-	} );
-
 	const updateSelectionAfterRemove = useCallback(
 		__experimentalSelectBlock
 			? () => {
@@ -173,12 +167,8 @@ export function BlockSettingsDropdown( {
 		]
 	);
 
-	const label = sprintf(
-		/* translators: %s: block name */
-		__( 'Remove %s' ),
-		blockTitle
-	);
-	const removeBlockLabel = count === 1 ? label : __( 'Remove blocks' );
+	const removeBlockLabel =
+		count === 1 ? __( 'Delete' ) : __( 'Delete blocks' );
 
 	// Allows highlighting the parent block outline when focusing or hovering
 	// the parent block selector within the child.

package/src/components/caption/index.native.js

@@ -44,7 +44,6 @@ const Caption = ( {
 			onChange={ onChange }
 			placeholder={ placeholder }
 			placeholderTextColor={ placeholderTextColor }
-			rootTagsToEliminate={ [ 'p' ] }
 			style={ style }
 			tagName="p"
 			textAlign="center"

package/src/components/date-format-picker/index.js

@@ -142,7 +142,7 @@ function NonDefaultControls( { format, onChange } ) {
 							Link: (
 								<ExternalLink
 									href={ __(
-										'https://wordpress.org/support/article/formatting-date-and-time/'
+										'https://wordpress.org/documentation/article/customize-date-and-time-format/'
 									) }
 								/>
 							),