Add "Show block breadcrumbs" preference (#28133)

WordPress · Jan 20, 2021 · e9c7561 · e9c7561
1 parent 1c59a2c
commit e9c7561
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 5 deletions.
diff --git a/packages/e2e-tests/specs/editor/plugins/block-variations.js b/packages/e2e-tests/specs/editor/plugins/block-variations.js
@@ -9,6 +9,8 @@ import {
 	searchForBlock,
 	pressKeyWithModifier,
 	openDocumentSettingsSidebar,
+	toggleScreenOption,
+	toggleMoreMenu,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Block variations', () => {
@@ -107,6 +109,16 @@ describe( 'Block variations', () => {
 	} );
 	// @see @wordpres/block-editor/src/components/use-block-display-information (`useBlockDisplayInformation` hook).
 	describe( 'testing block display information with matching variations', () => {
+		beforeEach( async () => {
+			await toggleScreenOption( 'Display block breadcrumbs', true );
+			await toggleMoreMenu();
+		} );
+
+		afterEach( async () => {
+			await toggleScreenOption( 'Display block breadcrumbs', false );
+			await toggleMoreMenu();
+		} );
+
 		const getActiveBreadcrumb = async () =>
 			page.evaluate(
 				() =>

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -94,6 +94,7 @@ function Layout( { styles } ) {
 		isInserterOpened,
 		showIconLabels,
 		hasReducedUI,
+		showBlockBreadcrumbs,
 	} = useSelect( ( select ) => {
 		return {
 			hasFixedToolbar: select( editPostStore ).isFeatureActive(
@@ -129,6 +130,9 @@ function Layout( { styles } ) {
 			hasReducedUI: select( editPostStore ).isFeatureActive(
 				'reducedUI'
 			),
+			showBlockBreadcrumbs: select( editPostStore ).isFeatureActive(
+				'showBlockBreadcrumbs'
+			),
 		};
 	}, [] );
 	const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {
@@ -269,6 +273,7 @@ function Layout( { styles } ) {
 				}
 				footer={
 					! hasReducedUI &&
+					showBlockBreadcrumbs &&
 					! isMobileViewport &&
 					isRichEditingEnabled &&
 					mode === 'visual' && (

diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
@@ -8,8 +8,8 @@ import { get } from 'lodash';
  */
 import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { withSelect, withDispatch, useSelect } from '@wordpress/data';
+import { compose, useViewportMatch } from '@wordpress/compose';
 import {
 	PostTaxonomies,
 	PostExcerptCheck,
@@ -34,9 +34,26 @@ import { store as editPostStore } from '../../store';
 const MODAL_NAME = 'edit-post/preferences';
 
 export function PreferencesModal( { isModalActive, isViewable, closeModal } ) {
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const { mode, isRichEditingEnabled, hasReducedUI } = useSelect(
+		( select ) => {
+			return {
+				mode: select( editPostStore ).getEditorMode(),
+				isRichEditingEnabled: select(
+					'core/editor'
+				).getEditorSettings().richEditingEnabled,
+				hasReducedUI: select( editPostStore ).isFeatureActive(
+					'reducedUI'
+				),
+			};
+		},
+		[]
+	);
+
 	if ( ! isModalActive ) {
 		return null;
 	}
+
 	return (
 		<Modal
 			className="edit-post-preferences-modal"
@@ -93,6 +110,18 @@ export function PreferencesModal( { isModalActive, isViewable, closeModal } ) {
 					help={ __( 'Make the editor look like your theme.' ) }
 					label={ __( 'Use theme styles' ) }
 				/>
+				{ ! hasReducedUI &&
+					! isMobileViewport &&
+					isRichEditingEnabled &&
+					mode === 'visual' && (
+						<EnableFeature
+							featureName="showBlockBreadcrumbs"
+							help={ __(
+								'Shows block breadcrumbs at the bottom of the editor.'
+							) }
+							label={ __( 'Display block breadcrumbs' ) }
+						/>
+					) }
 			</Section>
 			<Section
 				title={ __( 'Document settings' ) }

diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
@@ -51,6 +51,11 @@ exports[`PreferencesModal should match snapshot when the modal is active 1`] = `
       help="Make the editor look like your theme."
       label="Use theme styles"
     />
+    <WithSelect(WithDispatch(BaseOption))
+      featureName="showBlockBreadcrumbs"
+      help="Shows block breadcrumbs at the bottom of the editor."
+      label="Display block breadcrumbs"
+    />
   </Section>
   <Section
     description="Choose what displays in the panel."

diff --git a/packages/edit-post/src/store/defaults.js b/packages/edit-post/src/store/defaults.js
@@ -11,6 +11,7 @@ export const PREFERENCES_DEFAULTS = {
 		fullscreenMode: true,
 		showIconLabels: false,
 		themeStyles: true,
+		showBlockBreadcrumbs: true,
 	},
 	hiddenBlockTypes: [],
 	preferredStyleVariations: {},

diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
@@ -72,7 +72,8 @@ function InterfaceSkeleton(
 			className={ classnames(
 				className,
 				'interface-interface-skeleton',
-				regionsClassName
+				regionsClassName,
+				!! footer && 'has-footer'
 			) }
 		>
 			{ !! drawer && (

diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss
@@ -64,8 +64,10 @@ html.interface-interface-skeleton__html-container {
 	overscroll-behavior-y: none;
 
 	// Footer overlap prevention
-	@include break-medium() {
-		padding-bottom: $button-size-small + $border-width;
+	.has-footer & {
+		@include break-medium() {
+			padding-bottom: $button-size-small + $border-width;
+		}
 	}
 }