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

Fix/block toolbars with preview #20351

Merged
merged 9 commits into from
Feb 24, 2020
Merged

Fix/block toolbars with preview #20351

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
070b79f
Render top toolbar on mobile and tablet preview
tellthemachines Feb 21, 2020
b86f859
lint
tellthemachines Feb 21, 2020
6db95a8
Show block movers
tellthemachines Feb 21, 2020
44e6165
Stop toolbar styles from resizing
tellthemachines Feb 21, 2020
58cc5ce
Fix styling issue
tellthemachines Feb 24, 2020
cff0596
lint
tellthemachines Feb 24, 2020
72ec7f2
Fix block toolbar styles
youknowriad Feb 24, 2020
06a1400
Force hasFixedToolbar setting instead of modifying the components
youknowriad Feb 24, 2020
9ffc26f
Fix small regressions
youknowriad Feb 24, 2020
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
4 changes: 4 additions & 0 deletions packages/block-editor/src/components/block-list/block-popover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ function selector( select ) {
isCaretWithinFormattedText,
getSettings,
getLastMultiSelectedBlockClientId,
getPreviewDeviceType,
} = select( 'core/block-editor' );
return {
isNavigationMode: isNavigationMode(),
Expand All @@ -40,6 +41,7 @@ function selector( select ) {
hasMultiSelection: hasMultiSelection(),
hasFixedToolbar: getSettings().hasFixedToolbar,
lastClientId: getLastMultiSelectedBlockClientId(),
previewDeviceType: getPreviewDeviceType(),
};
}

Expand All @@ -61,6 +63,7 @@ function BlockPopover( {
hasMultiSelection,
hasFixedToolbar,
lastClientId,
previewDeviceType,
} = useSelect( selector, [] );
const isLargeViewport = useViewportMatch( 'medium' );
const [ isToolbarForced, setIsToolbarForced ] = useState( false );
Expand All @@ -74,6 +77,7 @@ function BlockPopover( {
! isNavigationMode &&
! hasFixedToolbar &&
isLargeViewport &&
previewDeviceType === 'Desktop' &&
! showEmptyBlockSideInserter &&
! isMultiSelecting &&
( ! isTyping || isCaretWithinFormattedText );
Expand Down
12 changes: 9 additions & 3 deletions packages/block-editor/src/components/block-toolbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,15 @@ export default function BlockToolbar( { hideDragHandle } ) {
mode,
moverDirection,
hasMovers = true,
previewDeviceType,
} = useSelect( ( select ) => {
const {
getBlockMode,
getSelectedBlockClientIds,
isBlockValid,
getBlockRootClientId,
getBlockListSettings,
getPreviewDeviceType,
} = select( 'core/block-editor' );
const selectedBlockClientIds = getSelectedBlockClientIds();
const blockRootClientId = getBlockRootClientId(
Expand All @@ -58,6 +60,7 @@ export default function BlockToolbar( { hideDragHandle } ) {
: null,
moverDirection: __experimentalMoverDirection,
hasMovers: __experimentalUIParts.hasMovers,
previewDeviceType: getPreviewDeviceType(),
};
}, [] );

Expand All @@ -68,10 +71,13 @@ export default function BlockToolbar( { hideDragHandle } ) {
gestures: showMoversGestures,
} = useShowMoversGestures( { ref: nodeRef } );

const shouldShowMovers =
const displayHeaderToolbar =
useViewportMatch( 'medium', '<' ) ||
hasFixedToolbar ||
( showMovers && hasMovers );
previewDeviceType !== 'Desktop';

const shouldShowMovers =
displayHeaderToolbar || ( showMovers && hasMovers );

if ( blockClientIds.length === 0 ) {
return null;
Expand All @@ -87,7 +93,7 @@ export default function BlockToolbar( { hideDragHandle } ) {

const classes = classnames(
'block-editor-block-toolbar',
! hasFixedToolbar && 'has-responsive-movers'
! displayHeaderToolbar && 'has-responsive-movers'
);

return (
Expand Down
3 changes: 2 additions & 1 deletion packages/block-editor/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
@import "./components/block-settings-menu/style.scss";
@import "./components/block-styles/style.scss";
@import "./components/block-switcher/style.scss";
@import "./components/block-toolbar/style.scss";
@import "./components/block-types-list/style.scss";
@import "./components/block-variation-picker/style.scss";
@import "./components/button-block-appender/style.scss";
Expand Down Expand Up @@ -52,5 +51,7 @@

// Styles for components that are used outside of the editing canvas go here:

@import "./components/block-toolbar/style.scss";
@import "./components/editor-skeleton/style.scss";
@import "./components/inserter/style.scss";

17 changes: 14 additions & 3 deletions packages/edit-post/src/components/header/header-toolbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,12 @@ import { EditorHistoryRedo, EditorHistoryUndo } from '@wordpress/editor';
const inserterToggleProps = { isPrimary: true };

function HeaderToolbar() {
const { hasFixedToolbar, showInserter, isTextModeEnabled } = useSelect(
const {
hasFixedToolbar,
showInserter,
isTextModeEnabled,
previewDeviceType,
} = useSelect(
( select ) => ( {
hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive(
'fixedToolbar'
Expand All @@ -27,12 +32,18 @@ function HeaderToolbar() {
select( 'core/editor' ).getEditorSettings().richEditingEnabled,
isTextModeEnabled:
select( 'core/edit-post' ).getEditorMode() === 'text',
previewDeviceType: select(
'core/block-editor'
).getPreviewDeviceType(),
} ),
[]
);
const isLargeViewport = useViewportMatch( 'medium' );

const toolbarAriaLabel = hasFixedToolbar
const displayBlockToolbar =
! isLargeViewport || previewDeviceType !== 'Desktop' || hasFixedToolbar;

const toolbarAriaLabel = displayBlockToolbar
? /* translators: accessibility text for the editor toolbar when Top Toolbar is on */
__( 'Document and block tools' )
: /* translators: accessibility text for the editor toolbar when Top Toolbar is off */
Expand All @@ -53,7 +64,7 @@ function HeaderToolbar() {
<EditorHistoryUndo />
<EditorHistoryRedo />
<BlockNavigationDropdown isDisabled={ isTextModeEnabled } />
{ ( hasFixedToolbar || ! isLargeViewport ) && (
{ displayBlockToolbar && (
<div className="edit-post-header-toolbar__block-toolbar">
<BlockToolbar hideDragHandle />
</div>
Expand Down