Add Boundary Mode to visualize block boundaries

docs/reference-guides/data/data-core-editor.md

@@ -1582,6 +1582,10 @@ _Related_
 
 -   toggleBlockMode in core/block-editor store.
 
+### toggleBoundaryMode
+
+Action that toggles the Boundary Mode view option.
+
 ### toggleDistractionFree
 
 Action that toggles Distraction free mode. Distraction free mode expects there are no sidebars, as due to the z-index values set, you can't close sidebars.

packages/block-editor/README.md

@@ -811,6 +811,7 @@ _Properties_
 -   _hasFixedToolbar_ `boolean`: Whether or not the editor toolbar is fixed
 -   _distractionFree_ `boolean`: Whether or not the editor UI is distraction free
 -   _focusMode_ `boolean`: Whether the focus mode is enabled or not
+-   _boundaryMode_ `boolean`: Whether the boundary mode is enabled or not
 -   _styles_ `Array`: Editor Styles
 -   _keepCaretInsideBlock_ `boolean`: Whether caret should move between blocks in edit mode
 -   _bodyPlaceholder_ `string`: Empty post placeholder

packages/block-editor/src/components/block-list/content.scss

@@ -296,6 +296,37 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	}
 }
 
+// Boundary mode. Display visible borders around all blocks to visualize their boundaries.
+.is-boundary-mode .block-editor-block-list__block {
+	outline: 1px dashed var(--wp-admin-theme-color, #007cba);
+	position: relative;
+
+	&::before {
+		content: "";
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		pointer-events: none;
+		z-index: 1;
+	}
+
+	// When a block is selected in boundary mode, use a more visible border.
+	&.is-selected,
+	&.is-selected:focus {
+		outline: 2px solid var(--wp-admin-theme-color, #007cba);
+	}
+
+	.block-editor-block-list__block {
+		outline: 1px dashed rgba(0, 124, 186, 0.6);
+
+		.block-editor-block-list__block {
+			outline: 1px dashed rgba(0, 124, 186, 0.4);
+		}
+	}
+}
+
 .wp-block[data-align="left"] > *,
 .wp-block[data-align="right"] > *,
 .wp-block.alignleft,

packages/block-editor/src/components/block-list/index.js

@@ -43,17 +43,23 @@ export const IntersectionObserver = createContext();
 const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
 
 function Root( { className, ...settings } ) {
-	const { isOutlineMode, isFocusMode, temporarilyEditingAsBlocks } =
-		useSelect( ( select ) => {
-			const { getSettings, getTemporarilyEditingAsBlocks, isTyping } =
-				unlock( select( blockEditorStore ) );
-			const { outlineMode, focusMode } = getSettings();
-			return {
-				isOutlineMode: outlineMode && ! isTyping(),
-				isFocusMode: focusMode,
-				temporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks(),
-			};
-		}, [] );
+	const {
+		isOutlineMode,
+		isFocusMode,
+		isBoundaryMode,
+		temporarilyEditingAsBlocks,
+	} = useSelect( ( select ) => {
+		const { getSettings, getTemporarilyEditingAsBlocks, isTyping } = unlock(
+			select( blockEditorStore )
+		);
+		const { outlineMode, focusMode, boundaryMode } = getSettings();
+		return {
+			isOutlineMode: outlineMode && ! isTyping(),
+			isFocusMode: focusMode,
+			isBoundaryMode: boundaryMode,
+			temporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks(),
+		};
+	}, [] );
 	const registry = useRegistry();
 	const { setBlockVisibility } = useDispatch( blockEditorStore );
 
@@ -102,6 +108,7 @@ function Root( { className, ...settings } ) {
 			className: clsx( 'is-root-container', className, {
 				'is-outline-mode': isOutlineMode,
 				'is-focus-mode': isFocusMode,
+				'is-boundary-mode': isBoundaryMode,
 			} ),
 		},
 		settings

packages/block-editor/src/store/defaults.js

@@ -20,6 +20,7 @@ export const PREFERENCES_DEFAULTS = {
  * @property {boolean}       hasFixedToolbar                        Whether or not the editor toolbar is fixed
  * @property {boolean}       distractionFree                        Whether or not the editor UI is distraction free
  * @property {boolean}       focusMode                              Whether the focus mode is enabled or not
+ * @property {boolean}       boundaryMode                           Whether the boundary mode is enabled or not
  * @property {Array}         styles                                 Editor Styles
  * @property {boolean}       keepCaretInsideBlock                   Whether caret should move between blocks in edit mode
  * @property {string}        bodyPlaceholder                        Empty post placeholder

packages/editor/src/components/commands/index.js

@@ -18,6 +18,7 @@ import {
 	layout,
 	rotateRight,
 	rotateLeft,
+	grid,
 } from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -50,6 +51,7 @@ const getEditorCommandLoader = () =>
 			showBlockBreadcrumbs,
 			isDistractionFree,
 			isFocusMode,
+			isBoundaryMode,
 			isPreviewMode,
 			isViewable,
 			isCodeEditingEnabled,
@@ -68,6 +70,7 @@ const getEditorCommandLoader = () =>
 				showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
 				isDistractionFree: get( 'core', 'distractionFree' ),
 				isFocusMode: get( 'core', 'focusMode' ),
+				isBoundaryMode: get( 'core', 'boundaryMode' ),
 				isPreviewMode: getSettings().isPreviewMode,
 				isViewable:
 					getPostType( getCurrentPostType() )?.viewable ?? false,
@@ -154,6 +157,18 @@ const getEditorCommandLoader = () =>
 			},
 		} );
 
+		commands.push( {
+			name: 'core/toggle-boundary-mode',
+			label: isBoundaryMode
+				? __( 'Disable boundary mode' )
+				: __( 'Enable boundary mode' ),
+			icon: grid,
+			callback: ( { close } ) => {
+				toggle( 'core', 'boundaryMode' );
+				close();
+			},
+		} );
+
 		commands.push( {
 			name: 'core/toggle-list-view',
 			label: isListViewOpen

packages/editor/src/components/preferences-modal/index.js

@@ -231,6 +231,14 @@ function PreferencesModalContents( { extraSections = {} } ) {
 								) }
 								label={ __( 'Spotlight mode' ) }
 							/>
+							<PreferenceToggleControl
+								scope="core"
+								featureName="boundaryMode"
+								help={ __(
+									'Shows block outlines to help identify content boundaries.'
+								) }
+								label={ __( 'Boundary mode' ) }
+							/>
 							{ extraSections?.appearance }
 						</PreferencesModalSection>
 					),

packages/editor/src/components/provider/use-block-editor-settings.js

@@ -124,6 +124,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		userPatternCategories,
 		restBlockPatternCategories,
 		sectionRootClientId,
+		boundaryMode,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -169,6 +170,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 					postId
 				)?._links?.hasOwnProperty( 'wp:action-unfiltered-html' ),
 				focusMode: get( 'core', 'focusMode' ),
+				boundaryMode: get( 'core', 'boundaryMode' ),
 				hasFixedToolbar:
 					get( 'core', 'fixedToolbar' ) || ! isLargeViewport,
 				hiddenBlockTypes: get( 'core', 'hiddenBlockTypes' ),
@@ -288,6 +290,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			allowedBlockTypes,
 			allowRightClickOverrides,
 			focusMode: focusMode && ! forceDisableFocusMode,
+			boundaryMode,
 			hasFixedToolbar,
 			isDistractionFree,
 			keepCaretInsideBlock,
@@ -341,6 +344,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 	}, [
 		allowedBlockTypes,
 		allowRightClickOverrides,
+		boundaryMode,
 		focusMode,
 		forceDisableFocusMode,
 		hasFixedToolbar,

packages/editor/src/store/actions.js

@@ -916,6 +916,41 @@ export const toggleSpotlightMode =
 			);
 	};
 
+/**
+ * Action that toggles the Boundary Mode view option.
+ */
+export const toggleBoundaryMode =
+	() =>
+	( { registry } ) => {
+		registry.dispatch( preferencesStore ).toggle( 'core', 'boundaryMode' );
+
+		const isBoundaryMode = registry
+			.select( preferencesStore )
+			.get( 'core', 'boundaryMode' );
+
+		registry
+			.dispatch( noticesStore )
+			.createInfoNotice(
+				isBoundaryMode
+					? __( 'Boundary mode activated.' )
+					: __( 'Boundary mode deactivated.' ),
+				{
+					id: 'core/editor/toggle-boundary-mode/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: () => {
+								registry
+									.dispatch( preferencesStore )
+									.toggle( 'core', 'boundaryMode' );
+							},
+						},
+					],
+				}
+			);
+	};
+
 /**
  * Action that toggles the Top Toolbar view option.
  */