Skip to content

Render Selected Block Tools in Header when using Top Toolbar #55787

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

Merged
jeryj merged 20 commits into from
Nov 10, 2023
Merged

Render Selected Block Tools in Header when using Top Toolbar #55787

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
2c813ae
Add selected block tools slot to edit post header
jeryj Nov 1, 2023
45e1888
Add selected block tools slot to site editor header
jeryj Nov 1, 2023
8b0cd57
Add selected tools slot to widget header
jeryj Nov 1, 2023
0d580ba
Add contextual toolbar as fill when top toolbar option is on
jeryj Nov 1, 2023
c31e186
Remove absolute positioned block tool hacks
jeryj Sep 19, 2023
d634599
Move inline rich popover into header if top toolbar slot is available
jeryj Nov 1, 2023
7c96b45
isBlockToolsCollapsed state and styles for edit site header
jeryj Nov 2, 2023
1b3186e
Top Toolbar styles
jeryj Nov 3, 2023
b7348ae
Only render top toolbar in header slot if large viewport
jeryj Nov 3, 2023
ea00096
Cleanup CSS of selected block toolbar
jeryj Nov 7, 2023
1c1cd73
Remove unnecessary flex-shrink properties
jeryj Nov 8, 2023
62a4591
Test that block toolbar is scrollable
jeryj Nov 8, 2023
27432cc
Move tab order of block tools test
jeryj Nov 8, 2023
dd90378
Remove header slot in favor of rendering BlockContextualToolbar directly
jeryj Nov 9, 2023
238f4e5
Check for isZoomOutMode for site editor header
jeryj Nov 9, 2023
5e57aee
Fix edit post edit template header layout
jeryj Nov 9, 2023
8c9dd02
Target closest toolbar instead of classname
jeryj Nov 10, 2023
dd7cade
Use BlockContextualToolbar privately
jeryj Nov 10, 2023
558ff4a
Add top toolbar to customize widgets editor
jeryj Nov 10, 2023
4941d98
Consistent naming of isLargeViewport
jeryj Nov 10, 2023
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
Prev Previous commit
Consistent naming of isLargeViewport 
isLargeViewport is used as both useViewportMatch( 'medium' ) and useViewportMatch( 'large' ). useViewportMatch( 'medium' ) to mean isLargeViewport seem
s to be the standardized way, so useViewportMatch( 'large' ) should equate to the size above it - isWideViewport.
  • Loading branch information
@jeryj
jeryj committed Nov 10, 2023
commit 4941d98e5672c6763593ce3dec047944ca1d479e
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-tools/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export default function BlockTools( {
__unstableContentRef,
...props
} ) {
const isLargeViewport = useViewportMatch( 'large' );
const isLargeViewport = useViewportMatch( 'medium' );
const {
clientId,
hasFixedToolbar,
Expand Down
2 changes: 1 addition & 1 deletion packages/customize-widgets/src/components/header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ function Header( {
setIsInserterOpened,
isFixedToolbarActive,
} ) {
const isLargeViewport = useViewportMatch( 'large' );
const isLargeViewport = useViewportMatch( 'medium' );
const blockToolbarRef = useRef();
const [ [ hasUndo, hasRedo ], setUndoRedo ] = useState( [
sidebar.hasUndo(),
Expand Down
7 changes: 4 additions & 3 deletions 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 @@ -56,7 +56,8 @@ function Header( {
setEntitiesSavedStatesCallback,
setListViewToggleElement,
} ) {
const isLargeViewport = useViewportMatch( 'large' );
const isWideViewport = useViewportMatch( 'large' );
const isLargeViewport = useViewportMatch( 'medium' );
const blockToolbarRef = useRef();
const {
blockSelectionStart,
Expand Down Expand Up @@ -182,13 +183,13 @@ function Header( {
setEntitiesSavedStatesCallback
}
/>
{ ( isLargeViewport || ! showIconLabels ) && (
{ ( isWideViewport || ! showIconLabels ) && (
<>
<PinnedItems.Slot scope="core/edit-post" />
<MoreMenu showIconLabels={ showIconLabels } />
</>
) }
{ showIconLabels && ! isLargeViewport && (
{ showIconLabels && ! isWideViewport && (
<MoreMenu showIconLabels={ showIconLabels } />
) }
</motion.div>
Expand Down
2 changes: 1 addition & 1 deletion 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 @@ -96,7 +96,7 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
};
}, [] );

const isLargeViewport = useViewportMatch( 'large' );
const isLargeViewport = useViewportMatch( 'medium' );
const isTopToolbar = ! isZoomOutMode && hasFixedToolbar && isLargeViewport;
const blockToolbarRef = useRef();

Expand Down
7 changes: 3 additions & 4 deletions packages/edit-widgets/src/components/header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,7 @@ import { unlock } from '../../lock-unlock';
const { BlockContextualToolbar } = unlock( blockEditorPrivateApis );

function Header( { setListViewToggleElement } ) {
const isMediumViewport = useViewportMatch( 'medium' );
const isLargeViewport = useViewportMatch( 'large' );
const isLargeViewport = useViewportMatch( 'medium' );
const blockToolbarRef = useRef();
const { hasFixedToolbar } = useSelect(
( select ) => ( {
Expand All @@ -38,12 +37,12 @@ function Header( { setListViewToggleElement } ) {
<>
<div className="edit-widgets-header">
<div className="edit-widgets-header__navigable-toolbar-wrapper">
{ isMediumViewport && (
{ isLargeViewport && (
<h1 className="edit-widgets-header__title">
{ __( 'Widgets' ) }
</h1>
) }
{ ! isMediumViewport && (
{ ! isLargeViewport && (
<VisuallyHidden
as="h1"
className="edit-widgets-header__title"
Expand Down