@wordpress/block-editor 8.6.0 → 9.0.0

package/build-style/style-rtl.css

@@ -358,6 +358,9 @@
   border-radius: 1px;
 }
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected {
+  cursor: default;
+}
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected.rich-text {
   cursor: unset;
 }
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected::after {
@@ -386,21 +389,6 @@
   opacity: 1;
 }
 
-.is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity {
-  opacity: 0.5;
-  transition: opacity 0.1s linear;
-}
-@media (prefers-reduced-motion: reduce) {
-  .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-.is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity.is-active-entity, .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity.has-child-selected, .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity:not(.has-child-selected) .block-editor-block-list__block, .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity.is-active-entity .block-editor-block-list__block,
-.is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity .is-active-entity .block-editor-block-list__block {
-  opacity: 1;
-}
-
 .wp-block[data-align=left] > *,
 .wp-block[data-align=right] > *,
 .wp-block.alignleft,
@@ -912,7 +900,6 @@
   border: none;
   border-radius: 2px;
   z-index: 10;
-  pointer-events: none;
 }
 .block-editor-block-content-overlay:hover:not(.is-dragging-blocks).overlay-active::before, .block-editor-block-content-overlay.parent-highlighted.overlay-active::before {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
@@ -1099,6 +1086,7 @@
 .components-popover.block-editor-block-popover {
   z-index: 31;
   position: absolute;
+  margin: 0 !important;
 }
 .components-popover.block-editor-block-popover .components-popover__content {
   margin: 0 !important;
@@ -1679,21 +1667,6 @@
   margin-left: 0;
 }
 
-.components-border-style-control legend {
-  line-height: 1.4;
-  margin-bottom: 8px;
-  padding: 0;
-}
-.components-border-style-control .components-border-style-control__buttons {
-  display: inline-flex;
-}
-.components-border-style-control .components-border-style-control__buttons .components-button.has-icon {
-  min-width: 30px;
-  height: 30px;
-  padding: 3px;
-  margin-left: 4px;
-}
-
 .block-editor-button-block-appender {
   display: flex;
   flex-direction: column;
@@ -3725,6 +3698,19 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   border-radius: inherit;
 }
 
+.block-editor__padding-visualizer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  opacity: 0.5;
+  border-color: var(--wp-admin-theme-color);
+  border-style: solid;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
 /**
  * Block Toolbar
  */

package/build-style/style.css

@@ -358,6 +358,9 @@
   border-radius: 1px;
 }
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected {
+  cursor: default;
+}
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected.rich-text {
   cursor: unset;
 }
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected::after {
@@ -386,21 +389,6 @@
   opacity: 1;
 }
 
-.is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity {
-  opacity: 0.5;
-  transition: opacity 0.1s linear;
-}
-@media (prefers-reduced-motion: reduce) {
-  .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-.is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity.is-active-entity, .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity.has-child-selected, .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity:not(.has-child-selected) .block-editor-block-list__block, .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity.is-active-entity .block-editor-block-list__block,
-.is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity .is-active-entity .block-editor-block-list__block {
-  opacity: 1;
-}
-
 .wp-block[data-align=left] > *,
 .wp-block[data-align=right] > *,
 .wp-block.alignleft,
@@ -912,7 +900,6 @@
   border: none;
   border-radius: 2px;
   z-index: 10;
-  pointer-events: none;
 }
 .block-editor-block-content-overlay:hover:not(.is-dragging-blocks).overlay-active::before, .block-editor-block-content-overlay.parent-highlighted.overlay-active::before {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
@@ -1099,6 +1086,7 @@
 .components-popover.block-editor-block-popover {
   z-index: 31;
   position: absolute;
+  margin: 0 !important;
 }
 .components-popover.block-editor-block-popover .components-popover__content {
   margin: 0 !important;
@@ -1679,21 +1667,6 @@
   margin-right: 0;
 }
 
-.components-border-style-control legend {
-  line-height: 1.4;
-  margin-bottom: 8px;
-  padding: 0;
-}
-.components-border-style-control .components-border-style-control__buttons {
-  display: inline-flex;
-}
-.components-border-style-control .components-border-style-control__buttons .components-button.has-icon {
-  min-width: 30px;
-  height: 30px;
-  padding: 3px;
-  margin-right: 4px;
-}
-
 .block-editor-button-block-appender {
   display: flex;
   flex-direction: column;
@@ -3725,6 +3698,19 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   border-radius: inherit;
 }
 
+.block-editor__padding-visualizer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0.5;
+  border-color: var(--wp-admin-theme-color);
+  border-style: solid;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
 /**
  * Block Toolbar
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "8.6.0",
+	"version": "9.0.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,32 +33,32 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.2.4",
-		"@wordpress/a11y": "^3.7.0",
-		"@wordpress/api-fetch": "^6.4.0",
-		"@wordpress/blob": "^3.7.0",
-		"@wordpress/blocks": "^11.6.0",
-		"@wordpress/components": "^19.9.0",
-		"@wordpress/compose": "^5.5.0",
-		"@wordpress/data": "^6.7.0",
-		"@wordpress/date": "^4.7.0",
-		"@wordpress/deprecated": "^3.7.0",
-		"@wordpress/dom": "^3.7.0",
-		"@wordpress/element": "^4.5.0",
-		"@wordpress/hooks": "^3.7.0",
-		"@wordpress/html-entities": "^3.7.0",
-		"@wordpress/i18n": "^4.7.0",
-		"@wordpress/icons": "^8.3.0",
-		"@wordpress/is-shallow-equal": "^4.7.0",
-		"@wordpress/keyboard-shortcuts": "^3.5.0",
-		"@wordpress/keycodes": "^3.7.0",
-		"@wordpress/notices": "^3.7.0",
-		"@wordpress/rich-text": "^5.5.0",
-		"@wordpress/shortcode": "^3.7.0",
-		"@wordpress/style-engine": "^0.6.0",
-		"@wordpress/token-list": "^2.7.0",
-		"@wordpress/url": "^3.8.0",
-		"@wordpress/warning": "^2.7.0",
-		"@wordpress/wordcount": "^3.7.0",
+		"@wordpress/a11y": "^3.8.0",
+		"@wordpress/api-fetch": "^6.5.0",
+		"@wordpress/blob": "^3.8.0",
+		"@wordpress/blocks": "^11.7.0",
+		"@wordpress/components": "^19.10.0",
+		"@wordpress/compose": "^5.6.0",
+		"@wordpress/data": "^6.8.0",
+		"@wordpress/date": "^4.8.0",
+		"@wordpress/deprecated": "^3.8.0",
+		"@wordpress/dom": "^3.8.0",
+		"@wordpress/element": "^4.6.0",
+		"@wordpress/hooks": "^3.8.0",
+		"@wordpress/html-entities": "^3.8.0",
+		"@wordpress/i18n": "^4.8.0",
+		"@wordpress/icons": "^8.4.0",
+		"@wordpress/is-shallow-equal": "^4.8.0",
+		"@wordpress/keyboard-shortcuts": "^3.6.0",
+		"@wordpress/keycodes": "^3.8.0",
+		"@wordpress/notices": "^3.8.0",
+		"@wordpress/rich-text": "^5.6.0",
+		"@wordpress/shortcode": "^3.8.0",
+		"@wordpress/style-engine": "^0.7.0",
+		"@wordpress/token-list": "^2.8.0",
+		"@wordpress/url": "^3.9.0",
+		"@wordpress/warning": "^2.8.0",
+		"@wordpress/wordcount": "^3.8.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1ba52312b56db563df2d8d4fba5b00613fb46d8c"
+	"gitHead": "4631d515033397fcfeda77e5755960253caef9bf"
 }

package/src/components/block-alignment-control/constants.js

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import {
+	alignNone,
+	positionCenter,
+	positionLeft,
+	positionRight,
+	stretchFullWidth,
+	stretchWide,
+} from '@wordpress/icons';
+
+export const BLOCK_ALIGNMENTS_CONTROLS = {
+	none: {
+		icon: alignNone,
+		title: _x( 'None', 'Alignment option' ),
+	},
+	left: {
+		icon: positionLeft,
+		title: __( 'Align left' ),
+	},
+	center: {
+		icon: positionCenter,
+		title: __( 'Align center' ),
+	},
+	right: {
+		icon: positionRight,
+		title: __( 'Align right' ),
+	},
+	wide: {
+		icon: stretchWide,
+		title: __( 'Wide width' ),
+	},
+	full: {
+		icon: stretchFullWidth,
+		title: __( 'Full width' ),
+	},
+};
+
+export const DEFAULT_CONTROL = 'none';
+
+export const POPOVER_PROPS = {
+	isAlternate: true,
+};

package/src/components/block-alignment-control/ui.js

@@ -6,60 +6,23 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	ToolbarDropdownMenu,
 	ToolbarGroup,
 	MenuGroup,
 	MenuItem,
 } from '@wordpress/components';
-import {
-	alignNone,
-	positionCenter,
-	positionLeft,
-	positionRight,
-	stretchFullWidth,
-	stretchWide,
-} from '@wordpress/icons';
-import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import useAvailableAlignments from './use-available-alignments';
-
-const BLOCK_ALIGNMENTS_CONTROLS = {
-	none: {
-		icon: alignNone,
-		title: _x( 'None', 'Alignment option' ),
-	},
-	left: {
-		icon: positionLeft,
-		title: __( 'Align left' ),
-	},
-	center: {
-		icon: positionCenter,
-		title: __( 'Align center' ),
-	},
-	right: {
-		icon: positionRight,
-		title: __( 'Align right' ),
-	},
-	wide: {
-		icon: stretchWide,
-		title: __( 'Wide width' ),
-	},
-	full: {
-		icon: stretchFullWidth,
-		title: __( 'Full width' ),
-	},
-};
-
-const DEFAULT_CONTROL = 'none';
-
-const POPOVER_PROPS = {
-	isAlternate: true,
-};
+import {
+	BLOCK_ALIGNMENTS_CONTROLS,
+	DEFAULT_CONTROL,
+	POPOVER_PROPS,
+} from './constants';
 
 function BlockAlignmentUI( {
 	value,
@@ -92,72 +55,69 @@ function BlockAlignmentUI( {
 		label: __( 'Align' ),
 		toggleProps: { describedBy: __( 'Change alignment' ) },
 	};
-	const extraProps =
-		isToolbar || Platform.isNative
-			? {
-					isCollapsed: isToolbar ? isCollapsed : undefined,
-					controls: enabledControls.map(
-						( { name: controlName } ) => {
-							return {
-								...BLOCK_ALIGNMENTS_CONTROLS[ controlName ],
-								isActive:
-									value === controlName ||
-									( ! value && controlName === 'none' ),
-								role: isCollapsed ? 'menuitemradio' : undefined,
-								onClick: () => onChangeAlignment( controlName ),
-							};
-						}
-					),
-			  }
-			: {
-					children: ( { onClose } ) => {
-						return (
-							<>
-								<MenuGroup className="block-editor-block-alignment-control__menu-group">
-									{ enabledControls.map(
-										( { name: controlName, info } ) => {
-											const {
-												icon,
-												title,
-											} = BLOCK_ALIGNMENTS_CONTROLS[
-												controlName
-											];
-											// If no value is provided, mark as selected the `none` option.
-											const isSelected =
-												controlName === value ||
-												( ! value &&
-													controlName === 'none' );
-											return (
-												<MenuItem
-													key={ controlName }
-													icon={ icon }
-													iconPosition="left"
-													className={ classNames(
-														'components-dropdown-menu__menu-item',
-														{
-															'is-active': isSelected,
-														}
-													) }
-													isSelected={ isSelected }
-													onClick={ () => {
-														onChangeAlignment(
-															controlName
-														);
-														onClose();
-													} }
-													role="menuitemradio"
-													info={ info }
-												>
-													{ title }
-												</MenuItem>
-											);
-										}
-									) }
-								</MenuGroup>
-							</>
-						);
-					},
-			  };
+	const extraProps = isToolbar
+		? {
+				isCollapsed,
+				controls: enabledControls.map( ( { name: controlName } ) => {
+					return {
+						...BLOCK_ALIGNMENTS_CONTROLS[ controlName ],
+						isActive:
+							value === controlName ||
+							( ! value && controlName === 'none' ),
+						role: isCollapsed ? 'menuitemradio' : undefined,
+						onClick: () => onChangeAlignment( controlName ),
+					};
+				} ),
+		  }
+		: {
+				children: ( { onClose } ) => {
+					return (
+						<>
+							<MenuGroup className="block-editor-block-alignment-control__menu-group">
+								{ enabledControls.map(
+									( { name: controlName, info } ) => {
+										const {
+											icon,
+											title,
+										} = BLOCK_ALIGNMENTS_CONTROLS[
+											controlName
+										];
+										// If no value is provided, mark as selected the `none` option.
+										const isSelected =
+											controlName === value ||
+											( ! value &&
+												controlName === 'none' );
+										return (
+											<MenuItem
+												key={ controlName }
+												icon={ icon }
+												iconPosition="left"
+												className={ classNames(
+													'components-dropdown-menu__menu-item',
+													{
+														'is-active': isSelected,
+													}
+												) }
+												isSelected={ isSelected }
+												onClick={ () => {
+													onChangeAlignment(
+														controlName
+													);
+													onClose();
+												} }
+												role="menuitemradio"
+												info={ info }
+											>
+												{ title }
+											</MenuItem>
+										);
+									}
+								) }
+							</MenuGroup>
+						</>
+					);
+				},
+		  };
 
 	return <UIComponent { ...commonProps } { ...extraProps } />;
 }

package/src/components/block-alignment-control/ui.native.js

@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	ToolbarDropdownMenu,
+	ToolbarGroup,
+	BottomSheetSelectControl,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import useAvailableAlignments from './use-available-alignments';
+import {
+	BLOCK_ALIGNMENTS_CONTROLS,
+	DEFAULT_CONTROL,
+	POPOVER_PROPS,
+} from './constants';
+
+function BlockAlignmentUI( {
+	value,
+	onChange,
+	controls,
+	isToolbar,
+	isCollapsed = true,
+	isBottomSheetControl = false,
+} ) {
+	const enabledControls = useAvailableAlignments( controls );
+	const hasEnabledControls = !! enabledControls.length;
+
+	if ( ! hasEnabledControls ) {
+		return null;
+	}
+
+	function onChangeAlignment( align ) {
+		onChange( [ value, 'none' ].includes( align ) ? undefined : align );
+	}
+
+	const activeAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ value ];
+	const defaultAlignmentControl =
+		BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
+
+	const toolbarUIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
+	const UIComponent = isBottomSheetControl
+		? BottomSheetSelectControl
+		: toolbarUIComponent;
+
+	const commonProps = {
+		label: __( 'Align' ),
+	};
+	const extraProps = isBottomSheetControl
+		? {
+				options: enabledControls.map( ( { name: controlName } ) => {
+					const control = BLOCK_ALIGNMENTS_CONTROLS[ controlName ];
+					return {
+						value: controlName,
+						label: control.title,
+						icon: control.icon,
+					};
+				} ),
+				value: activeAlignmentControl ? value : 'none',
+				onChange: ( align ) => onChangeAlignment( align ),
+		  }
+		: {
+				icon: activeAlignmentControl
+					? activeAlignmentControl.icon
+					: defaultAlignmentControl.icon,
+				isCollapsed: isToolbar ? isCollapsed : undefined,
+				controls: enabledControls.map( ( { name: controlName } ) => {
+					return {
+						...BLOCK_ALIGNMENTS_CONTROLS[ controlName ],
+						isActive:
+							value === controlName ||
+							( ! value && controlName === 'none' ),
+						onClick: () => onChangeAlignment( controlName ),
+					};
+				} ),
+				popoverProps: POPOVER_PROPS,
+				toggleProps: { describedBy: __( 'Change alignment' ) },
+		  };
+
+	return <UIComponent { ...commonProps } { ...extraProps } />;
+}
+
+export default BlockAlignmentUI;

package/src/components/block-content-overlay/style.scss

@@ -10,7 +10,6 @@
 		border: none;
 		border-radius: $radius-block-ui;
 		z-index: z-index(".block-editor-block-content-overlay__overlay");
-		pointer-events: none;
 	}
 
 	&:hover:not(.is-dragging-blocks).overlay-active::before,

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

@@ -262,12 +262,17 @@
 			right: $border-width;
 			bottom: $border-width;
 			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
+			// Border is outset, so subtract the width to achieve correct radius.
+			border-radius: $radius-block-ui - $border-width;
 		}
 	}
 
 	&.is-selected {
-		cursor: unset;
+		cursor: default;
+
+		&.rich-text {
+			cursor: unset;
+		}
 
 		&::after {
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); // Selected not focussed.
@@ -303,22 +308,6 @@
 	}
 }
 
-// Active entity spotlight.
-// Disable if focus mode is active.
-.is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity {
-	opacity: 0.5;
-	transition: opacity 0.1s linear;
-	@include reduce-motion("transition");
-
-	&.is-active-entity,
-	&.has-child-selected,
-	&:not(.has-child-selected) .block-editor-block-list__block,
-	&.is-active-entity .block-editor-block-list__block,
-	.is-active-entity .block-editor-block-list__block {
-		opacity: 1;
-	}
-}
-
 .wp-block[data-align="left"] > *,
 .wp-block[data-align="right"] > *,
 .wp-block.alignleft,

package/src/components/block-list/use-block-props/use-block-class-names.js

@@ -33,12 +33,8 @@ export function useBlockClassNames( clientId ) {
 				getSettings,
 				hasSelectedInnerBlock,
 				isTyping,
-				__experimentalGetActiveBlockIdByBlockNames: getActiveBlockIdByBlockNames,
 			} = select( blockEditorStore );
-			const {
-				__experimentalSpotlightEntityBlocks: spotlightEntityBlocks,
-				outlineMode,
-			} = getSettings();
+			const { outlineMode } = getSettings();
 			const isDragging = isBlockBeingDragged( clientId );
 			const isSelected = isBlockSelected( clientId );
 			const name = getBlockName( clientId );
@@ -48,9 +44,6 @@ export function useBlockClassNames( clientId ) {
 				clientId,
 				checkDeep
 			);
-			const activeEntityBlockId = getActiveBlockIdByBlockNames(
-				spotlightEntityBlocks
-			);
 			return classnames( {
 				'is-selected': isSelected,
 				'is-highlighted': isBlockHighlighted( clientId ),
@@ -58,9 +51,6 @@ export function useBlockClassNames( clientId ) {
 				'is-reusable': isReusableBlock( getBlockType( name ) ),
 				'is-dragging': isDragging,
 				'has-child-selected': isAncestorOfSelectedBlock,
-				'has-active-entity': activeEntityBlockId,
-				// Determine if there is an active entity area to spotlight.
-				'is-active-entity': activeEntityBlockId === clientId,
 				'remove-outline': isSelected && outlineMode && isTyping(),
 			} );
 		},