Skip to content

Patterns: Disable the preview option button when editing #53913

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

Merged
t-hamano 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 1 commit
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
Prev Previous commit
Next Next commit
Use isEnabled prop
  • Loading branch information
@t-hamano
t-hamano committed Aug 29, 2023
commit 7f550cc69baf7a6a5f916e58c423cf5d4d6da2a0
1 change: 1 addition & 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

@Mamaduka Mamaduka Aug 29, 2023

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

@t-hamano t-hamano Aug 29, 2023

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 Down
68 changes: 28 additions & 40 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 @@ -19,13 +19,7 @@ import {
import { useSelect, useDispatch } from '@wordpress/data';
import { PinnedItems } from '@wordpress/interface';
import { _x, __ } from '@wordpress/i18n';
import {
desktop,
listView,
plus,
external,
chevronUpDown,
} from '@wordpress/icons';
import { listView, plus, external, chevronUpDown } from '@wordpress/icons';
import {
__unstableMotion as motion,
Button,
Expand Down Expand Up @@ -325,39 +319,33 @@ export default function HeaderEditMode() {
{ 'is-zoomed-out': isZoomedOutView }
) }
>
{ ! 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>
) : (
<Button
label={ __( 'View' ) }
icon={ desktop }
disabled
__experimentalIsFocusable
/>
) }
<PreviewOptions
deviceType={ deviceType }
setDeviceType={ setPreviewDeviceType }
label={ __( 'View' ) }
isEnabled={
! isFocusMode && hasDefaultEditorCanvasView
}
>
{ ( { 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 && (
Expand Down