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 4 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: 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
37 changes: 25 additions & 12 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,7 +19,13 @@ import {
import { useSelect, useDispatch } from '@wordpress/data';
import { PinnedItems } from '@wordpress/interface';
import { _x, __ } from '@wordpress/i18n';
import { listView, plus, external, chevronUpDown } from '@wordpress/icons';
import {
desktop,
listView,
plus,
external,
chevronUpDown,
} from '@wordpress/icons';
import {
__unstableMotion as motion,
Button,
Expand All @@ -45,6 +51,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 +163,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,13 +319,13 @@ 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 }
) }
>
{ ! isFocusMode && hasDefaultEditorCanvasView ? (
<PreviewOptions
deviceType={ deviceType }
setDeviceType={ setPreviewDeviceType }
Copy link
Member

@Mamaduka Mamaduka 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.

The PreviewOptions component has an isEnabled prop that can handle this state for us. You don't need to render components conditionally.

Side note: Disabling the toggle doesn't match a11y best practices, but that's a matter of general component improvement and shouldn't be a blocker here.

Expand All @@ -344,8 +350,15 @@ export default function HeaderEditMode() {
</MenuGroup>
) }
</PreviewOptions>
</div>
) }
) : (
<Button
label={ __( 'View' ) }
icon={ desktop }
disabled
__experimentalIsFocusable
/>
) }
</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.