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

Move zoom out into PreviewDropdown #58202

Closed
wants to merge 11 commits into from
Closed

Move zoom out into PreviewDropdown #58202

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
2086a8a
Stop hiding icon when zoomed out
richtabor Jan 24, 2024
38a86cf
Move zoom out to the preview dropdown
richtabor Jan 24, 2024
12d1ab7
Remove existing control from document tools
richtabor Jan 24, 2024
1ca9cd0
Logic and display tweak
richtabor Jan 24, 2024
bd345a7
Use 50% for zoom out scale
richtabor Jan 24, 2024
f3839ed
try stacking with device previews
richtabor Jan 29, 2024
9ab160f
Revert "try stacking with device previews"
richtabor Feb 8, 2024
b407956
Add 100% control, adjust logic
richtabor Feb 8, 2024
214ee29
Try disabling 50% when its not possible
richtabor Feb 8, 2024
b23f43d
Fix missing store
getdave Feb 21, 2024
cfe99a5
fix rebase
scruffian Apr 23, 2024
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
1 change: 1 addition & 0 deletions packages/edit-site/src/components/block-editor/editor-canvas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,7 @@ function EditorCanvas( {
renderAppender={ showBlockAppender }
styles={ styles }
iframeProps={ {
expand: isZoomOutMode,
scale,
frameSize,
className: classnames(
Expand Down
43 changes: 4 additions & 39 deletions packages/edit-site/src/components/header-edit-mode/document-tools/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
/**
* WordPress dependencies
*/
import { useViewportMatch } from '@wordpress/compose';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { useSelect, useDispatch } from '@wordpress/data';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { chevronUpDown } from '@wordpress/icons';
import { Button, ToolbarItem } from '@wordpress/components';
import {
store as editorStore,
privateApis as editorPrivateApis,
store as editorStore,
} from '@wordpress/editor';

/**
Expand All @@ -19,50 +15,19 @@ import { unlock } from '../../../lock-unlock';

const { DocumentTools: EditorDocumentTools } = unlock( editorPrivateApis );

export default function DocumentTools( {
blockEditorMode,
hasFixedToolbar,
isDistractionFree,
} ) {
export default function DocumentTools() {
const { isVisualMode } = useSelect( ( select ) => {
const { getEditorMode } = select( editorStore );

return {
isVisualMode: getEditorMode() === 'visual',
};
}, [] );
const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
const { setDeviceType } = useDispatch( editorStore );
const isLargeViewport = useViewportMatch( 'medium' );
const isZoomedOutViewExperimentEnabled =
window?.__experimentalEnableZoomedOutView && isVisualMode;
const isZoomedOutView = blockEditorMode === 'zoom-out';

return (
<EditorDocumentTools
disableBlockTools={ ! isVisualMode }
listViewLabel={ __( 'List View' ) }
>
{ isZoomedOutViewExperimentEnabled &&
isLargeViewport &&
! isDistractionFree &&
! hasFixedToolbar && (
<ToolbarItem
as={ Button }
className="edit-site-header-edit-mode__zoom-out-view-toggle"
icon={ chevronUpDown }
isPressed={ isZoomedOutView }
/* translators: button label text should, if possible, be under 16 characters. */
label={ __( 'Zoom-out View' ) }
onClick={ () => {
setDeviceType( 'Desktop' );
__unstableSetEditorMode(
isZoomedOutView ? 'edit' : 'zoom-out'
);
} }
size="compact"
/>
) }
</EditorDocumentTools>
/>
);
}
9 changes: 0 additions & 9 deletions packages/edit-site/src/components/header-edit-mode/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,15 +107,6 @@
gap: $grid-unit-10;
}

.edit-site-header-edit-mode__preview-options {
opacity: 1;
transition: opacity 0.3s;

&.is-zoomed-out {
opacity: 0;
}
}

// Button text label styles

.edit-site-header-edit-mode.show-icon-labels {
Expand Down
80 changes: 62 additions & 18 deletions packages/editor/src/components/preview-dropdown/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,30 +14,43 @@ import { check, desktop, mobile, tablet, external } from '@wordpress/icons';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { store as preferencesStore } from '@wordpress/preferences';

import { store as blockEditorStore } from '@wordpress/block-editor';
/**
* Internal dependencies
*/
import { store as editorStore } from '../../store';
import PostPreviewButton from '../post-preview-button';

export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } =
useSelect( ( select ) => {
const { getDeviceType, getCurrentPostType } = select( editorStore );
const { getUnstableBase, getPostType } = select( coreStore );
const { get } = select( preferencesStore );
const _currentPostType = getCurrentPostType();
return {
deviceType: getDeviceType(),
homeUrl: getUnstableBase()?.home,
isTemplate: _currentPostType === 'wp_template',
isViewable: getPostType( _currentPostType )?.viewable ?? false,
showIconLabels: get( 'core', 'showIconLabels' ),
};
}, [] );
const {
deviceType,
homeUrl,
isTemplate,
isViewable,
showIconLabels,
blockEditorMode,
} = useSelect( ( select ) => {
const { __unstableGetEditorMode } = select( blockEditorStore );
const { getDeviceType, getCurrentPostType } = select( editorStore );
const { getUnstableBase, getPostType } = select( coreStore );
const { get } = select( preferencesStore );
const _currentPostType = getCurrentPostType();
return {
blockEditorMode: __unstableGetEditorMode(),
deviceType: getDeviceType(),
homeUrl: getUnstableBase()?.home,
isTemplate: _currentPostType === 'wp_template',
isViewable: getPostType( _currentPostType )?.viewable ?? false,
showIconLabels: get( 'core', 'showIconLabels' ),
};
}, [] );
const { setDeviceType } = useDispatch( editorStore );
const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
const isZoomedOutViewExperimentEnabled =
window?.__experimentalEnableZoomedOutView;
const isZoomedOutView = blockEditorMode === 'zoom-out';
const isMobile = useViewportMatch( 'medium', '<' );

if ( isMobile ) return null;

const popoverProps = {
Expand Down Expand Up @@ -74,24 +87,55 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
<>
<MenuGroup>
<MenuItem
onClick={ () => setDeviceType( 'Desktop' ) }
onClick={ () => {
setDeviceType( 'Desktop' );
__unstableSetEditorMode( 'edit' );
} }
icon={ deviceType === 'Desktop' && check }
>
{ __( 'Desktop' ) }
</MenuItem>
<MenuItem
onClick={ () => setDeviceType( 'Tablet' ) }
onClick={ () => {
setDeviceType( 'Tablet' );
__unstableSetEditorMode( 'edit' );
} }
icon={ deviceType === 'Tablet' && check }
>
{ __( 'Tablet' ) }
</MenuItem>
<MenuItem
onClick={ () => setDeviceType( 'Mobile' ) }
onClick={ () => {
setDeviceType( 'Mobile' );
__unstableSetEditorMode( 'edit' );
} }
icon={ deviceType === 'Mobile' && check }
>
{ __( 'Mobile' ) }
</MenuItem>
</MenuGroup>
{ isZoomedOutViewExperimentEnabled && (
<MenuGroup>
<MenuItem
onClick={ () => {
__unstableSetEditorMode( 'edit' );
} }
icon={ ! isZoomedOutView && check }
>
{ __( 'Zoom to 100%' ) }
</MenuItem>
<MenuItem
onClick={ () => {
setDeviceType( 'Desktop' );
__unstableSetEditorMode( 'zoom-out' );
} }
icon={ isZoomedOutView && check }
disabled={ deviceType !== 'Desktop' }
>
{ __( 'Zoom to 50%' ) }
</MenuItem>
</MenuGroup>
) }
{ isTemplate && (
<MenuGroup>
<MenuItem
Expand Down
Loading