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

Disable Zoom Out if no section root to allow for Theme opt in - 6.7 #68229

Open
wants to merge 1 commit into
base: wp/6.7
Choose a base branch
from
Open

Disable Zoom Out if no section root to allow for Theme opt in - 6.7 #68229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 9 additions & 1 deletion packages/block-editor/src/components/inserter/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import useInsertionPoint from './hooks/use-insertion-point';
import { store as blockEditorStore } from '../../store';
import TabbedSidebar from '../tabbed-sidebar';
import { useZoomOut } from '../../hooks/use-zoom-out';
import { unlock } from '../../lock-unlock';

const NOOP = () => {};
function InserterMenu(
Expand All @@ -58,6 +59,11 @@ function InserterMenu(
select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
[]
);
const hasSectionRootClientId = useSelect(
( select ) =>
!! unlock( select( blockEditorStore ) ).getSectionRootClientId(),
[]
);
const [ filterValue, setFilterValue, delayedFilterValue ] =
useDebouncedInput( __experimentalFilterValue );
const [ hoveredItem, setHoveredItem ] = useState( null );
Expand All @@ -82,7 +88,9 @@ function InserterMenu(
const [ selectedTab, setSelectedTab ] = useState( getInitialTab() );

const shouldUseZoomOut =
selectedTab === 'patterns' || selectedTab === 'media';
hasSectionRootClientId &&
( selectedTab === 'patterns' || selectedTab === 'media' );

useZoomOut( shouldUseZoomOut && isLargeViewport );

const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
Expand Down
19 changes: 16 additions & 3 deletions packages/editor/src/components/header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import PostViewLink from '../post-view-link';
import PreviewDropdown from '../preview-dropdown';
import ZoomOutToggle from '../zoom-out-toggle';
import { store as editorStore } from '../../store';
import { unlock } from '../../lock-unlock';

const toolbarVariations = {
distractionFreeDisabled: { y: '-50px' },
Expand Down Expand Up @@ -91,6 +92,16 @@ function Header( {

// The edit-post-header classname is only kept for backward compatibilty
// as some plugins might be relying on its presence.
const hasSectionRootClientId = useSelect(
( select ) =>
!! unlock( select( blockEditorStore ) ).getSectionRootClientId(),
[]
);

/*
* The edit-post-header classname is only kept for backward compatability
* as some plugins might be relying on its presence.
*/
return (
<div className="editor-header edit-post-header">
{ hasBackButton && (
Expand Down Expand Up @@ -150,9 +161,11 @@ function Header( {
/>
<PostViewLink />

{ isEditorIframed && isWideViewport && (
<ZoomOutToggle disabled={ forceDisableBlockTools } />
) }
{ isEditorIframed &&
isWideViewport &&
hasSectionRootClientId && (
<ZoomOutToggle disabled={ forceDisableBlockTools } />
) }

{ ( isWideViewport || ! showIconLabels ) && (
<PinnedItems.Slot scope="core" />
Expand Down
3 changes: 1 addition & 2 deletions test/e2e/specs/editor/various/parsing-patterns.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,8 @@ test.describe( 'Parsing patterns', () => {
} );
} );

// Exit zoom out mode and select the inner buttons block to ensure
// Select the inner buttons block to ensure
// the correct insertion point is selected.
await page.getByRole( 'button', { name: 'Zoom Out' } ).click();
await editor.selectBlocks(
editor.canvas.locator( 'role=document[name="Block: Button"i]' )
);
Expand Down
Loading
Loading