Skip to content

Commit

Permalink
Add Zoom Out toggle to editor header when experiment enabled (#65183)
Browse files Browse the repository at this point in the history 
* Add toggle when experiment active

* Add new square icon

* Use new icon

* Remove zoom out desktop 50% from device preview dropdown

* Fix console error for stroke-width to strokeWidth

---------

Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
  • Loading branch information
@getdave @jeryj
@scruffian @richtabor
6 people committed Sep 12, 2024
1 parent 4c31695 commit 67fe7b0
Show file tree
Hide file tree
Showing 5 changed files with 88 additions and 84 deletions.
9 changes: 9 additions & 0 deletions packages/editor/src/components/header/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import PostPublishButtonOrToggle from '../post-publish-button/post-publish-butto
import PostSavedState from '../post-saved-state';
import PostViewLink from '../post-view-link';
import PreviewDropdown from '../preview-dropdown';
import ZoomOutToggle from '../zoom-out-toggle';
import { store as editorStore } from '../../store';

const toolbarVariations = {
Expand All @@ -48,6 +49,9 @@ function Header( {
title,
icon,
} ) {
const zoomOutExperimentEnabled =
window.__experimentalEnableZoomOutExperiment;

const isWideViewport = useViewportMatch( 'large' );
const isLargeViewport = useViewportMatch( 'medium' );
const isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 403px)' );
Expand Down Expand Up @@ -142,9 +146,13 @@ function Header( {
forceIsAutosaveable={ forceIsDirty }
/>
<PostViewLink />

{ zoomOutExperimentEnabled && <ZoomOutToggle /> }

{ ( isWideViewport || ! showIconLabels ) && (
<PinnedItems.Slot scope="core" />
) }

{ ! customSaveButton && (
<PostPublishButtonOrToggle
forceIsDirty={ forceIsDirty }
Expand All @@ -153,6 +161,7 @@ function Header( {
}
/>
) }

{ customSaveButton }
<MoreMenu />
</motion.div>
Expand Down
110 changes: 26 additions & 84 deletions packages/editor/src/components/preview-dropdown/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,7 @@ import { __ } from '@wordpress/i18n';
import { desktop, mobile, tablet, external } from '@wordpress/icons';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { useEffect, useRef } from '@wordpress/element';
import { store as preferencesStore } from '@wordpress/preferences';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { ActionItem } from '@wordpress/interface';

/**
Expand All @@ -31,49 +29,21 @@ import { store as editorStore } from '../../store';
import PostPreviewButton from '../post-preview-button';

export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
const {
deviceType,
editorMode,
homeUrl,
isTemplate,
isViewable,
showIconLabels,
} = useSelect( ( select ) => {
const { getDeviceType, getCurrentPostType } = select( editorStore );
const { getEntityRecord, getPostType } = select( coreStore );
const { get } = select( preferencesStore );
const { __unstableGetEditorMode } = select( blockEditorStore );
const _currentPostType = getCurrentPostType();
return {
deviceType: getDeviceType(),
editorMode: __unstableGetEditorMode(),
homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
isTemplate: _currentPostType === 'wp_template',
isViewable: getPostType( _currentPostType )?.viewable ?? false,
showIconLabels: get( 'core', 'showIconLabels' ),
};
}, [] );
const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } =
useSelect( ( select ) => {
const { getDeviceType, getCurrentPostType } = select( editorStore );
const { getEntityRecord, getPostType } = select( coreStore );
const { get } = select( preferencesStore );
const _currentPostType = getCurrentPostType();
return {
deviceType: getDeviceType(),
homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
isTemplate: _currentPostType === 'wp_template',
isViewable: getPostType( _currentPostType )?.viewable ?? false,
showIconLabels: get( 'core', 'showIconLabels' ),
};
}, [] );
const { setDeviceType } = useDispatch( editorStore );
const { __unstableSetEditorMode } = useDispatch( blockEditorStore );

/**
* Save the original editing mode in a ref to restore it when we exit zoom out.
*/
const originalEditingModeRef = useRef( editorMode );
useEffect( () => {
if ( editorMode !== 'zoom-out' ) {
originalEditingModeRef.current = editorMode;
}

return () => {
if (
editorMode === 'zoom-out' &&
editorMode !== originalEditingModeRef.current
) {
__unstableSetEditorMode( originalEditingModeRef.current );
}
};
}, [ editorMode, __unstableSetEditorMode ] );

const isMobile = useViewportMatch( 'medium', '<' );
if ( isMobile ) {
Expand Down Expand Up @@ -112,44 +82,17 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
label: __( 'Desktop' ),
icon: desktop,
},
{
value: 'Tablet',
label: __( 'Tablet' ),
icon: tablet,
},
{
value: 'Mobile',
label: __( 'Mobile' ),
icon: mobile,
},
];
if ( window.__experimentalEnableZoomOutExperiment ) {
choices.push( {
value: 'ZoomOut',
label: __( 'Desktop (50%)' ),
icon: desktop,
} );
}
choices.push( {
value: 'Tablet',
label: __( 'Tablet' ),
icon: tablet,
} );
choices.push( {
value: 'Mobile',
label: __( 'Mobile' ),
icon: mobile,
} );

const previewValue = editorMode === 'zoom-out' ? 'ZoomOut' : deviceType;

/**
* Handles the selection of a device type.
*
* @param {string} value The device type.
*/
const onSelect = ( value ) => {
let newEditorMode = originalEditingModeRef.current;

if ( value === 'ZoomOut' ) {
newEditorMode = 'zoom-out';
setDeviceType( 'Desktop' );
} else {
setDeviceType( value );
}

__unstableSetEditorMode( newEditorMode );
};

return (
<DropdownMenu
Expand All @@ -161,7 +104,6 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
toggleProps={ toggleProps }
menuProps={ menuProps }
icon={ deviceIcons[ deviceType.toLowerCase() ] }
text={ editorMode === 'zoom-out' ? __( '50%' ) : undefined }
label={ __( 'View' ) }
disableOpenOnArrowDown={ disabled }
>
Expand All @@ -170,8 +112,8 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
<MenuGroup>
<MenuItemsChoice
choices={ choices }
value={ previewValue }
onSelect={ onSelect }
value={ deviceType }
onSelect={ setDeviceType }
/>
</MenuGroup>
{ isTemplate && (
Expand Down
34 changes: 34 additions & 0 deletions packages/editor/src/components/zoom-out-toggle/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/**
* WordPress dependencies
*/
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

import { useDispatch, useSelect } from '@wordpress/data';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { square as zoomOutIcon } from '@wordpress/icons';

const ZoomOutToggle = () => {
const { isZoomOutMode } = useSelect( ( select ) => ( {
isZoomOutMode:
select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
} ) );

const { __unstableSetEditorMode } = useDispatch( blockEditorStore );

const handleZoomOut = () => {
__unstableSetEditorMode( isZoomOutMode ? 'edit' : 'zoom-out' );
};

return (
<Button
onClick={ handleZoomOut }
icon={ zoomOutIcon }
label={ __( 'Toggle Zoom Out' ) }
isPressed={ isZoomOutMode }
size="compact"
/>
);
};

export default ZoomOutToggle;
1 change: 1 addition & 0 deletions packages/icons/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,7 @@ export { default as store } from './library/store';
export { default as stretchFullWidth } from './library/stretch-full-width';
export { default as styles } from './library/styles';
export { default as shipping } from './library/shipping';
export { default as square } from './library/square';
export { default as stretchWide } from './library/stretch-wide';
export { default as subscript } from './library/subscript';
export { default as superscript } from './library/superscript';
Expand Down
18 changes: 18 additions & 0 deletions packages/icons/src/library/square.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/**
* WordPress dependencies
*/
import { SVG, Path } from '@wordpress/primitives';

const square = (
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
<Path
fill="none"
d="M5.75 12.75V18.25H11.25M12.75 5.75H18.25V11.25"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="square"
/>
</SVG>
);

export default square;

1 comment on commit 67fe7b0

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in 67fe7b0.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/10832714609
📝 Reported issues:

Please sign in to comment.