Skip to content

Commit

Permalink
Rename exploded mode to zoom-out mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad committed May 27, 2022
1 parent c2a5d89 commit 9df3b24
Show file tree
Hide file tree
Showing 12 changed files with 41 additions and 41 deletions.
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-list/index.js
View file
Expand Up @@ -76,7 +76,7 @@ function Root( { className, ...settings } ) {
'is-outline-mode': isOutlineMode,
'is-focus-mode': isFocusMode && isLargeViewport,
'is-navigate-mode': editorMode === 'navigation',
'is-exploded-mode': editorMode === 'exploded',
'is-zoom-out-mode': editorMode === 'zoom-out',
} ),
},
settings
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/block-list/style.scss
View file
Expand Up @@ -409,17 +409,17 @@
}
}

/** Exploded mode styles **/
/** Zoom Out mode styles **/
.is-root-container {
transition: all 0.3s;
}

.is-root-container.is-exploded-mode {
.is-root-container.is-zoom-out-mode {
transform-origin: top center;
transform: scale(0.8);
margin-top: 100px;
}

.is-root-container.is-exploded-mode > .block-list-appender {
.is-root-container.is-zoom-out-mode > .block-list-appender {
display: none;
}
8 changes: 4 additions & 4 deletions packages/block-editor/src/components/block-list/use-block-props/index.js
View file
Expand Up @@ -74,7 +74,7 @@ export function useBlockProps(
isPartOfSelection,
adjustScrolling,
enableAnimation,
isExplodedMode,
isZoomOutMode,
isRootBlock,
} = useSelect(
( select ) => {
Expand Down Expand Up @@ -110,7 +110,7 @@ export function useBlockProps(
enableAnimation:
! isTyping() &&
getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD,
isExplodedMode: __unstableGetEditorMode() === 'exploded',
isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
isRootBlock: ! getBlockRootClientId( clientId ),
};
},
Expand All @@ -137,7 +137,7 @@ export function useBlockProps(
} ),
useDisabled( {
isDisabled: ! (
( isExplodedMode && isRootBlock ) ||
( isZoomOutMode && isRootBlock ) ||
__unstableHasOverlay
),
} ),
Expand Down Expand Up @@ -167,7 +167,7 @@ export function useBlockProps(
classnames( 'block-editor-block-list__block', {
'wp-block': ! isAligned,
'has-block-overlay':
( isExplodedMode && isRootBlock ) || __unstableHasOverlay,
( isZoomOutMode && isRootBlock ) || __unstableHasOverlay,
} ),
className,
props.className,
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js
View file
Expand Up @@ -32,7 +32,7 @@ export function useIsHovered() {
return (
__unstableGetEditorMode() === 'navigation' ||
( getSettings().outlineMode &&
__unstableGetEditorMode() === 'exploded' )
__unstableGetEditorMode() === 'zoom-out' )
);
}, [] );

Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-tools/block-selection-button.js
View file
Expand Up @@ -236,7 +236,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
'block-editor-block-list__block-selection-button',
{
'is-block-moving-mode': !! blockMovingMode,
'is-exploded-mode': editorMode === 'exploded',
'is-zoom-out-mode': editorMode === 'zoom-out',
}
);

Expand All @@ -252,7 +252,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
<BlockIcon icon={ blockInformation?.icon } showColors />
</FlexItem>
<FlexItem>
{ editorMode === 'exploded' && (
{ editorMode === 'zoom-out' && (
<BlockMover clientIds={ [ clientId ] } hideDragHandle />
) }
{ editorMode === 'navigation' && (
Expand Down
16 changes: 8 additions & 8 deletions packages/block-editor/src/components/block-tools/index.js
View file
Expand Up @@ -23,7 +23,7 @@ import SelectedBlockPopover from './selected-block-popover';
import { store as blockEditorStore } from '../../store';
import BlockContextualToolbar from './block-contextual-toolbar';
import usePopoverScroll from '../block-popover/use-popover-scroll';
import ExplodedModeInserters from './exploded-mode-inserters';
import ZoomOutModeInserters from './zoom-out-mode-inserters';

/**
* Renders block tools (the block toolbar, select/navigation mode toolbar, the
Expand All @@ -40,13 +40,13 @@ export default function BlockTools( {
...props
} ) {
const isLargeViewport = useViewportMatch( 'medium' );
const { hasFixedToolbar, isExplodedMode } = useSelect( ( select ) => {
const { hasFixedToolbar, isZoomOutMode } = useSelect( ( select ) => {
const { __unstableGetEditorMode, getSettings } = select(
blockEditorStore
);

return {
isExplodedMode: __unstableGetEditorMode() === 'exploded',
isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
hasFixedToolbar: getSettings().hasFixedToolbar,
};
}, [] );
Expand Down Expand Up @@ -122,17 +122,17 @@ export default function BlockTools( {
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div { ...props } onKeyDown={ onKeyDown }>
<InsertionPointOpenRef.Provider value={ useRef( false ) }>
{ ! isExplodedMode && (
{ ! isZoomOutMode && (
<InsertionPoint
__unstableContentRef={ __unstableContentRef }
/>
) }
{ ! isExplodedMode &&
{ ! isZoomOutMode &&
( hasFixedToolbar || ! isLargeViewport ) && (
<BlockContextualToolbar isFixed />
) }
{ /* Even if the toolbar is fixed, the block popover is still
needed for navigation and exploded mode. */ }
needed for navigation and zoom-out mode. */ }
<SelectedBlockPopover
__unstableContentRef={ __unstableContentRef }
/>
Expand All @@ -144,8 +144,8 @@ export default function BlockTools( {
name="__unstable-block-tools-after"
ref={ blockToolbarAfterRef }
/>
{ isExplodedMode && (
<ExplodedModeInserters
{ isZoomOutMode && (
<ZoomOutModeInserters
__unstableContentRef={ __unstableContentRef }
/>
) }
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-tools/selected-block-popover.js
View file
Expand Up @@ -81,7 +81,7 @@ function SelectedBlockPopover( {
const showEmptyBlockSideInserter =
! isTyping && ! editorMode === 'edit' && isEmptyDefaultBlock;
const shouldShowBreadcrumb =
editorMode === 'navigation' || editorMode === 'exploded';
editorMode === 'navigation' || editorMode === 'zoom-out';
const shouldShowContextualToolbar =
editorMode === 'edit' &&
! hasFixedToolbar &&
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-tools/style.scss
View file
Expand Up @@ -122,7 +122,7 @@
font-size: $default-font-size;
height: $block-toolbar-height;

&.is-exploded-mode {
&.is-zoom-out-mode {
background: var(--wp-admin-theme-color);
}

Expand Down
4 changes: 2 additions & 2 deletions ...ts/block-tools/exploded-mode-inserters.js → ...ts/block-tools/zoom-out-mode-inserters.js
View file
Expand Up @@ -11,7 +11,7 @@ import BlockPopoverInbetween from '../block-popover/inbetween';
import { store as blockEditorStore } from '../../store';
import Inserter from '../inserter';

function ExplodedModeInserters( { __unstableContentRef } ) {
function ZoomOutModeInserters( { __unstableContentRef } ) {
const [ isReady, setIsReady ] = useState( false );
const blockOrder = useSelect( ( select ) => {
return select( blockEditorStore ).getBlockOrder();
Expand Down Expand Up @@ -54,4 +54,4 @@ function ExplodedModeInserters( { __unstableContentRef } ) {
} );
}

export default ExplodedModeInserters;
export default ZoomOutModeInserters;
16 changes: 8 additions & 8 deletions packages/block-editor/src/components/iframe/index.js
View file
Expand Up @@ -166,10 +166,10 @@ async function loadScript( head, { id, src } ) {
} );
}

function useExplodedModeBackgroundStyles( isExplodedMode, deps = [] ) {
function useZoomOutModeBackgroundStyles( isZoomOutMode, deps = [] ) {
return useRefEffect(
( node ) => {
if ( ! isExplodedMode ) {
if ( ! isZoomOutMode ) {
return;
}

Expand Down Expand Up @@ -216,7 +216,7 @@ function useExplodedModeBackgroundStyles( isExplodedMode, deps = [] ) {
newBackgroundStyles += hasTransparentBackground
? 'background-color: white;'
: '';
copiedStylesElement.innerHTML = `:where( .is-root-container.is-exploded-mode ) { ${ newBackgroundStyles } }`;
copiedStylesElement.innerHTML = `:where( .is-root-container.is-zoom-out-mode ) { ${ newBackgroundStyles } }`;
bodyStyleElement.innerHTML =
'body { background: #2f2f2f !important; }';

Expand All @@ -225,17 +225,17 @@ function useExplodedModeBackgroundStyles( isExplodedMode, deps = [] ) {
copiedStylesElement.textContent = '';
};
},
[ ...deps, isExplodedMode ]
[ ...deps, isZoomOutMode ]
);
}

function Iframe(
{ contentRef, children, head, tabIndex = 0, assets, ...props },
ref
) {
const isExplodedMode = useSelect(
const isZoomOutMode = useSelect(
( select ) =>
select( blockEditorStore ).__unstableGetEditorMode() === 'exploded',
select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
[]
);
const [ , forceRender ] = useReducer( () => ( {} ) );
Expand Down Expand Up @@ -283,8 +283,8 @@ function Iframe(
return () => node.removeEventListener( 'load', setDocumentIfReady );
}, [] );

const headBackgroundStylesRef = useExplodedModeBackgroundStyles(
isExplodedMode,
const headBackgroundStylesRef = useZoomOutModeBackgroundStyles(
isZoomOutMode,
[ head ]
);
const headRef = useMergeRefs( [
Expand Down
8 changes: 4 additions & 4 deletions packages/block-editor/src/store/actions.js
View file
Expand Up @@ -1441,8 +1441,8 @@ export const setNavigationMode = ( isNavigationMode = true ) => ( {
* @param {string} mode Editor mode
*/
export const __unstableSetEditorMode = ( mode ) => ( { dispatch, select } ) => {
// When switching to exploded mode, we need to select to parent block
if ( mode === 'exploded' ) {
// When switching to zoom-out mode, we need to select to parent block
if ( mode === 'zoom-out' ) {
const firstSelectedClientId = select.getBlockSelectionStart();
if ( firstSelectedClientId ) {
dispatch.selectBlock(
Expand All @@ -1465,8 +1465,8 @@ export const __unstableSetEditorMode = ( mode ) => ( { dispatch, select } ) => {
'You are currently in edit mode. To return to the navigation mode, press Escape.'
)
);
} else if ( mode === 'exploded' ) {
speak( __( 'You are currently in exploded mode.' ) );
} else if ( mode === 'zoom-out' ) {
speak( __( 'You are currently in zoom-out mode.' ) );
}
};

Expand Down
12 changes: 6 additions & 6 deletions packages/edit-site/src/components/header/index.js
View file
Expand Up @@ -144,7 +144,7 @@ export default function Header( {
className="edit-site-header-toolbar__list-view-toggle"
disabled={
! isVisualMode &&
blockEditorMode === 'exploded'
blockEditorMode === 'zoom-out'
}
icon={ listView }
isPressed={ isListViewOpen }
Expand All @@ -154,17 +154,17 @@ export default function Header( {
shortcut={ listViewShortcut }
/>
<Button
className="edit-site-header-toolbar__exploded-view-toggle"
className="edit-site-header-toolbar__zoom-out-view-toggle"
icon={ stack }
isPressed={ blockEditorMode === 'exploded' }
isPressed={ blockEditorMode === 'zoom-out' }
/* translators: button label text should, if possible, be under 16 characters. */
label={ __( 'Exploded View' ) }
label={ __( 'Zoom-out View' ) }
onClick={ () => {
setIsListViewOpened( false );
__unstableSetEditorMode(
blockEditorMode === 'exploded'
blockEditorMode === 'zoom-out'
? 'edit'
: 'exploded'
: 'zoom-out'
);
} }
/>
Expand Down

0 comments on commit 9df3b24

Please sign in to comment.