Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add "Show block breadcrumbs" preference #28133

Merged
merged 13 commits into from
Jan 20, 2021
Merged

Add "Show block breadcrumbs" preference #28133

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
5a74dd7
Add feature into preferences modal
david-szabo97 Jan 12, 2021
619d315
Show block breadcrumbs based on the preference
david-szabo97 Jan 12, 2021
c2117da
Remove empty space below editor when breadcrumbs are hidden
david-szabo97 Jan 12, 2021
3a71f00
Update snapshot
david-szabo97 Jan 12, 2021
845e052
Update e2e test
david-szabo97 Jan 12, 2021
00dfa3a
Fix e2e tests
david-szabo97 Jan 12, 2021
27a79ed
Enable breadcrumbs by default
david-szabo97 Jan 13, 2021
0e6ac19
Fix grammar
david-szabo97 Jan 14, 2021
dcb0060
Re-add reducedUI check
david-szabo97 Jan 14, 2021
8d0bcb6
Tie classname to actual footer condition
david-szabo97 Jan 14, 2021
6db8517
Conditionally show "show block breadcrumbs" feature toggle
david-szabo97 Jan 15, 2021
64c6868
Add has-footer class if footer is specified
david-szabo97 Jan 18, 2021
9980482
Inline condition and use has-footer class instead
david-szabo97 Jan 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions packages/e2e-tests/specs/editor/plugins/block-variations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import {
searchForBlock,
pressKeyWithModifier,
openDocumentSettingsSidebar,
toggleScreenOption,
toggleMoreMenu,
} from '@wordpress/e2e-test-utils';

describe( 'Block variations', () => {
Expand Down Expand Up @@ -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(
() =>
Expand Down
16 changes: 12 additions & 4 deletions packages/edit-post/src/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ function Layout( { styles } ) {
isInserterOpened,
showIconLabels,
hasReducedUI,
showBlockBreadcrumbs,
} = useSelect( ( select ) => {
return {
hasFixedToolbar: select( editPostStore ).isFeatureActive(
Expand Down Expand Up @@ -129,13 +130,23 @@ function Layout( { styles } ) {
hasReducedUI: select( editPostStore ).isFeatureActive(
'reducedUI'
),
showBlockBreadcrumbs: select( editPostStore ).isFeatureActive(
'showBlockBreadcrumbs'
),
};
}, [] );
const shouldShowBlockBreadcrumb =
! hasReducedUI &&
showBlockBreadcrumbs &&
! isMobileViewport &&
isRichEditingEnabled &&
mode === 'visual';
const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {
'is-sidebar-opened': sidebarIsOpened,
'has-fixed-toolbar': hasFixedToolbar,
'has-metaboxes': hasActiveMetaboxes,
'show-icon-labels': showIconLabels,
'show-block-breadcrumbs': shouldShowBlockBreadcrumb,
Addison-Stavlo marked this conversation as resolved.
Show resolved Hide resolved
} );
const openSidebarPanel = () =>
openGeneralSidebar(
Expand Down Expand Up @@ -268,10 +279,7 @@ function Layout( { styles } ) {
</>
}
footer={
! hasReducedUI &&
! isMobileViewport &&
isRichEditingEnabled &&
mode === 'visual' && (
shouldShowBlockBreadcrumb && (
<div className="edit-post-layout__footer">
<BlockBreadcrumb />
</div>
Expand Down
7 changes: 7 additions & 0 deletions packages/edit-post/src/components/preferences-modal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,13 @@ export function PreferencesModal( { isModalActive, isViewable, closeModal } ) {
help={ __( 'Make the editor look like your theme.' ) }
label={ __( 'Use theme styles' ) }
/>
<EnableFeature
featureName="showBlockBreadcrumbs"
help={ __(
'Shows block breadcrumbs at the bottom of the editor.'
) }
label={ __( 'Display block breadcrumbs' ) }
/>
Addison-Stavlo marked this conversation as resolved.
Show resolved Hide resolved
</Section>
<Section
title={ __( 'Document settings' ) }
Expand Down
5 changes: 5 additions & 0 deletions packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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."
Expand Down
1 change: 1 addition & 0 deletions packages/edit-post/src/store/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const PREFERENCES_DEFAULTS = {
fullscreenMode: true,
showIconLabels: false,
themeStyles: true,
showBlockBreadcrumbs: true,
},
hiddenBlockTypes: [],
preferredStyleVariations: {},
Expand Down
6 changes: 4 additions & 2 deletions packages/interface/src/components/interface-skeleton/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,10 @@ html.interface-interface-skeleton__html-container {
overscroll-behavior-y: none;

// Footer overlap prevention
@include break-medium() {
padding-bottom: $button-size-small + $border-width;
.show-block-breadcrumbs & {
Addison-Stavlo marked this conversation as resolved.
Show resolved Hide resolved
@include break-medium() {
padding-bottom: $button-size-small + $border-width;
}
}
}

Expand Down