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

Patterns: Disable the preview option button when editing #53913

Merged
merged 9 commits into from
Aug 29, 2023
Merged

Patterns: Disable the preview option button when editing #53913

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
dca0253
Don't show the preview options button when editing patterns
t-hamano Aug 24, 2023
666a8c9
Refactor with FOCUSABLE_ENTITIES
t-hamano Aug 24, 2023
76dcc0c
Merge branch 'trunk' into fix/pattern-preview-options
t-hamano Aug 27, 2023
572e6fd
Use disabled view icon
t-hamano Aug 27, 2023
f30f3b9
Merge branch 'trunk' into fix/pattern-preview-options
t-hamano Aug 29, 2023
7f550cc
Use isEnabled prop
t-hamano Aug 29, 2023
758e448
Also set 'disableOpenOnArrowDown'
Mamaduka Aug 29, 2023
70e6e63
Fix e2e test
t-hamano Aug 29, 2023
a5c6ae8
Use `toBeDisabled`
t-hamano Aug 29, 2023
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
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/preview-options/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export default function PreviewOptions( {
const toggleProps = {
className: 'block-editor-post-preview__button-toggle',
disabled: ! isEnabled,
__experimentalIsFocusable: ! isEnabled,
Copy link
Contributor Author

@t-hamano t-hamano Aug 29, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have added this prop to make the dropdown focusable even when it is disabled and to show the tooltip. This change will also affect the preview option button in the Post Editor. Do you think this should not be added in this PR?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, that's fine and a good improvement here.

I just realized that we also need to set disableOpenOnArrowDown based on the enabled status to avoid the opening drop via the arrow-down key. Pushed changes here 758e448.

Screencast

CleanShot.2023-08-29.at.17.13.47.mp4

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for finding it, @Mamaduka!

children: viewLabel,
};
const menuProps = {
Expand All @@ -53,6 +54,7 @@ export default function PreviewOptions( {
menuProps={ menuProps }
icon={ deviceIcons[ deviceType.toLowerCase() ] }
label={ label || __( 'Preview' ) }
disableOpenOnArrowDown={ ! isEnabled }
>
{ ( renderProps ) => (
<>
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/block-editor/site-editor-canvas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import EditorCanvas from './editor-canvas';
import EditorCanvasContainer from '../editor-canvas-container';
import useSiteEditorSettings from './use-site-editor-settings';
import { store as editSiteStore } from '../../store';
import { FOCUSABLE_ENTITIES } from './constants';
import { FOCUSABLE_ENTITIES } from '../../utils/constants';
import { unlock } from '../../lock-unlock';
import PageContentFocusManager from '../page-content-focus-manager';

Expand Down
69 changes: 35 additions & 34 deletions packages/edit-site/src/components/header-edit-mode/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ import {
useHasEditorCanvasContainer,
} from '../editor-canvas-container';
import { unlock } from '../../lock-unlock';
import { FOCUSABLE_ENTITIES } from '../../utils/constants';

const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );

Expand Down Expand Up @@ -156,8 +157,7 @@ export default function HeaderEditMode() {

const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();

const isFocusMode =
templateType === 'wp_template_part' || templateType === 'wp_navigation';
const isFocusMode = FOCUSABLE_ENTITIES.includes( templateType );

/* translators: button label text should, if possible, be under 16 characters. */
const longLabel = _x(
Expand Down Expand Up @@ -313,39 +313,40 @@ export default function HeaderEditMode() {
variants={ toolbarVariants }
transition={ toolbarTransition }
>
{ ! isFocusMode && hasDefaultEditorCanvasView && (
<div
className={ classnames(
'edit-site-header-edit-mode__preview-options',
{ 'is-zoomed-out': isZoomedOutView }
) }
<div
className={ classnames(
'edit-site-header-edit-mode__preview-options',
{ 'is-zoomed-out': isZoomedOutView }
) }
>
<PreviewOptions
deviceType={ deviceType }
setDeviceType={ setPreviewDeviceType }
label={ __( 'View' ) }
isEnabled={
! isFocusMode && hasDefaultEditorCanvasView
}
>
<PreviewOptions
deviceType={ deviceType }
setDeviceType={ setPreviewDeviceType }
label={ __( 'View' ) }
>
{ ( { onClose } ) => (
<MenuGroup>
<MenuItem
href={ homeUrl }
target="_blank"
icon={ external }
onClick={ onClose }
>
{ __( 'View site' ) }
<VisuallyHidden as="span">
{
/* translators: accessibility text */
__( '(opens in a new tab)' )
}
</VisuallyHidden>
</MenuItem>
</MenuGroup>
) }
</PreviewOptions>
</div>
) }
{ ( { onClose } ) => (
<MenuGroup>
<MenuItem
href={ homeUrl }
target="_blank"
icon={ external }
onClick={ onClose }
>
{ __( 'View site' ) }
<VisuallyHidden as="span">
{
/* translators: accessibility text */
__( '(opens in a new tab)' )
}
</VisuallyHidden>
</MenuItem>
</MenuGroup>
) }
</PreviewOptions>
</div>
<SaveButton />
{ ! isDistractionFree && (
<PinnedItems.Slot scope="core/edit-site" />
Expand Down
0 .../src/components/block-editor/constants.js → packages/edit-site/src/utils/constants.js
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion test/e2e/specs/site-editor/style-book.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ test.describe( 'Style Book', () => {
).not.toBeVisible();
await expect(
page.locator( 'role=button[name="View"i]' )
).not.toBeVisible();
).toHaveAttribute( 'aria-disabled', 'true' );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should use .toBeDisabled() here. It checks both disabled and aria-disabled.

Ref: https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-be-disabled.

} );

test( 'should have tabs containing block examples', async ( { page } ) => {
Expand Down