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

Jump to bottom

Editor: Enable Zoom-out mode in the post editor #61293

Merged
merged 3 commits into from
May 8, 2024
Merged

Editor: Enable Zoom-out mode in the post editor #61293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d17146d
Editor: Enable Zoom-out mode in the post editor
youknowriad May 1, 2024
d372296
Disable the Preview dropdown in zoom-out instead of hiding it
youknowriad May 6, 2024
45b3d79
fix flickering
ntsekouras May 8, 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
8 changes: 8 additions & 0 deletions 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 @@ -17,6 +17,7 @@ import {
import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useDebouncedInput } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';

/**
* Internal dependencies
Expand All @@ -31,6 +32,7 @@ import InserterSearchResults from './search-results';
import useInsertionPoint from './hooks/use-insertion-point';
import InserterTabs from './tabs';
import { useZoomOut } from '../../hooks/use-zoom-out';
import { store as blockEditorStore } from '../../store';

const NOOP = () => {};
function InserterMenu(
Expand All @@ -48,6 +50,11 @@ function InserterMenu(
},
ref
) {
const isZoomOutMode = useSelect(
( select ) =>
select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
[]
);
const [ filterValue, setFilterValue, delayedFilterValue ] =
useDebouncedInput( __experimentalFilterValue );
const [ hoveredItem, setHoveredItem ] = useState( null );
Expand Down Expand Up @@ -289,6 +296,7 @@ function InserterMenu(
<div
className={ clsx( 'block-editor-inserter__menu', {
'show-panel': showPatternPanel || showMediaPanel,
'is-zoom-out': isZoomOutMode,
} ) }
ref={ ref }
>
Expand Down
9 changes: 3 additions & 6 deletions packages/block-editor/src/components/inserter/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -700,12 +700,9 @@ $block-inserter-tabs-height: 44px;
display: none;
}

.is-zoom-out {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This style was relying on the existence of some global CSS class, this is not great, especially since this class is define outside the package entirely while we do have access to the mode within the package.

.block-editor-inserter__menu {
display: flex;
}

.show-panel::after {
.block-editor-inserter__menu.is-zoom-out {
display: flex;
&.show-panel::after {
// Makes space for the inserter flyout panel
@include break-medium {
content: "";
Expand Down
9 changes: 8 additions & 1 deletion packages/edit-post/src/components/header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { useViewportMatch } from '@wordpress/compose';
import { __unstableMotion as motion } from '@wordpress/components';
import { store as preferencesStore } from '@wordpress/preferences';
import { useState } from '@wordpress/element';
import { store as blockEditorStore } from '@wordpress/block-editor';

/**
* Internal dependencies
Expand Down Expand Up @@ -60,9 +61,11 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
showIconLabels,
hasHistory,
hasFixedToolbar,
isZoomedOutView,
} = useSelect( ( select ) => {
const { get: getPreference } = select( preferencesStore );
const { getEditorMode } = select( editorStore );
const { __unstableGetEditorMode } = select( blockEditorStore );

return {
isTextEditor: getEditorMode() === 'text',
Expand All @@ -74,6 +77,7 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
select( editorStore ).isPublishSidebarOpened(),
showIconLabels: getPreference( 'core', 'showIconLabels' ),
hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
};
}, [] );

Expand Down Expand Up @@ -131,7 +135,10 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
// when the publish sidebar has been closed.
<PostSavedState forceIsDirty={ hasActiveMetaboxes } />
) }
<PreviewDropdown forceIsAutosaveable={ hasActiveMetaboxes } />
<PreviewDropdown
disabled={ isZoomedOutView }
forceIsAutosaveable={ hasActiveMetaboxes }
/>
<PostPreviewButton
className="edit-post-header__post-preview-button"
forceIsAutosaveable={ hasActiveMetaboxes }
Expand Down
4 changes: 4 additions & 0 deletions packages/edit-post/src/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,7 @@ function Layout( { initialPost } ) {
documentLabel,
hasHistory,
hasBlockBreadcrumbs,
blockEditorMode,
} = useSelect( ( select ) => {
const { get } = select( preferencesStore );
const { getEditorSettings, getPostTypeLabel } = select( editorStore );
Expand Down Expand Up @@ -195,6 +196,8 @@ function Layout( { initialPost } ) {
!! select( blockEditorStore ).getBlockSelectionStart(),
hasHistory: !! getEditorSettings().onNavigateToPreviousEntityRecord,
hasBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
blockEditorMode:
select( blockEditorStore ).__unstableGetEditorMode(),
};
}, [] );

Expand Down Expand Up @@ -342,6 +345,7 @@ function Layout( { initialPost } ) {
! isMobileViewport &&
showBlockBreadcrumbs &&
isRichEditingEnabled &&
blockEditorMode !== 'zoom-out' &&
mode === 'visual' && (
<div className="edit-post-layout__footer">
<BlockBreadcrumb rootLabelText={ documentLabel } />
Expand Down
11 changes: 9 additions & 2 deletions packages/edit-post/src/components/visual-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
import { useMemo } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { store as blocksStore } from '@wordpress/blocks';
import { store as blockEditorStore } from '@wordpress/block-editor';

/**
* Internal dependencies
Expand All @@ -32,12 +33,13 @@ export default function VisualEditor( { styles } ) {
isBlockBasedTheme,
hasV3BlocksOnly,
isEditingTemplate,
isZoomedOutView,
} = useSelect( ( select ) => {
const { isFeatureActive } = select( editPostStore );
const { getEditorSettings, getRenderingMode } = select( editorStore );
const { getBlockTypes } = select( blocksStore );
const { __unstableGetEditorMode } = select( blockEditorStore );
const editorSettings = getEditorSettings();

return {
isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
renderingMode: getRenderingMode(),
Expand All @@ -47,6 +49,7 @@ export default function VisualEditor( { styles } ) {
} ),
isEditingTemplate:
select( editorStore ).getCurrentPostType() === 'wp_template',
isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
};
}, [] );
const hasMetaBoxes = useSelect(
Expand All @@ -60,7 +63,11 @@ export default function VisualEditor( { styles } ) {

// Add a constant padding for the typewritter effect. When typing at the
// bottom, there needs to be room to scroll up.
if ( ! hasMetaBoxes && renderingMode === 'post-only' ) {
if (
! isZoomedOutView &&
! hasMetaBoxes &&
renderingMode === 'post-only'
) {
paddingBottom = '40vh';
}

Expand Down
19 changes: 1 addition & 18 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 @@ -25,7 +25,6 @@ import {
FOCUSABLE_ENTITIES,
NAVIGATION_POST_TYPE,
} from '../../utils/constants';
import { computeIFrameScale } from '../../utils/math';

const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );

Expand All @@ -41,11 +40,9 @@ function EditorCanvas( {
isFocusMode,
templateType,
canvasMode,
isZoomOutMode,
currentPostIsTrashed,
} = useSelect( ( select ) => {
const { getBlockCount, __unstableGetEditorMode } =
select( blockEditorStore );
const { getBlockCount } = select( blockEditorStore );
const { getEditedPostType, getCanvasMode } = unlock(
select( editSiteStore )
);
Expand All @@ -54,7 +51,6 @@ function EditorCanvas( {
return {
templateType: _templateType,
isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
canvasMode: getCanvasMode(),
hasBlocks: !! getBlockCount(),
currentPostIsTrashed:
Expand Down Expand Up @@ -139,17 +135,6 @@ function EditorCanvas( {
[ settings.styles, enableResizing, canvasMode, currentPostIsTrashed ]
);

const frameSize = isZoomOutMode ? 20 : undefined;

const scale = isZoomOutMode
? ( contentWidth ) =>
computeIFrameScale(
{ width: 1000, scale: 0.55 },
{ width: 400, scale: 0.9 },
contentWidth
)
: undefined;

return (
<EditorCanvasRoot
className={ clsx( 'edit-site-editor-canvas__block-list', {
Expand All @@ -158,8 +143,6 @@ function EditorCanvas( {
renderAppender={ showBlockAppender }
styles={ styles }
iframeProps={ {
scale,
frameSize,
className: clsx( 'edit-site-visual-editor__editor-canvas', {
'is-focused': isFocused && canvasMode === 'view',
} ),
Expand Down
68 changes: 0 additions & 68 deletions packages/edit-site/src/components/header-edit-mode/document-tools/index.js
View file
Open in desktop

This file was deleted.

30 changes: 14 additions & 16 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 @@ -18,13 +18,13 @@ import {
store as editorStore,
privateApis as editorPrivateApis,
} from '@wordpress/editor';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import SiteEditorMoreMenuItems from './more-menu';
import SaveButton from '../save-button';
import DocumentTools from './document-tools';
import { store as editSiteStore } from '../../store';
import {
getEditorCanvasContainerTitle,
Expand All @@ -36,6 +36,7 @@ import { isPreviewingTheme } from '../../utils/is-previewing-theme';

const {
CollapsableBlockToolbar,
DocumentTools,
MoreMenu,
PostViewLink,
PreviewDropdown,
Expand All @@ -52,11 +53,12 @@ export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) {
editorCanvasView,
isFixedToolbar,
isPublishSidebarOpened,
isVisualMode,
} = useSelect( ( select ) => {
const { getEditedPostType } = select( editSiteStore );
const { __unstableGetEditorMode } = select( blockEditorStore );
const { get: getPreference } = select( preferencesStore );
const { getDeviceType } = select( editorStore );
const { getDeviceType, getEditorMode } = select( editorStore );

return {
deviceType: getDeviceType(),
Expand All @@ -70,6 +72,7 @@ export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) {
isFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
isPublishSidebarOpened:
select( editorStore ).isPublishSidebarOpened(),
isVisualMode: getEditorMode() === 'visual',
};
}, [] );

Expand Down Expand Up @@ -115,8 +118,8 @@ export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) {
transition={ toolbarTransition }
>
<DocumentTools
blockEditorMode={ blockEditorMode }
isDistractionFree={ isDistractionFree }
disableBlockTools={ ! isVisualMode }
listViewLabel={ __( 'List View' ) }
/>
{ showTopToolbar && (
<CollapsableBlockToolbar
Expand Down Expand Up @@ -144,18 +147,13 @@ export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) {
transition={ toolbarTransition }
>
{ isLargeViewport && (
<div
className={ clsx(
'edit-site-header-edit-mode__preview-options',
{ 'is-zoomed-out': isZoomedOutView }
) }
>
<PreviewDropdown
disabled={
isFocusMode || ! hasDefaultEditorCanvasView
}
/>
</div>
<PreviewDropdown
disabled={
isFocusMode ||
! hasDefaultEditorCanvasView ||
isZoomedOutView
}
/>
) }
<PostViewLink />
{
Expand Down
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 @@ -120,15 +120,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
Loading
Loading