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

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
Next Next commit
Add selected tools slot to widget header
  • Loading branch information
@jeryj
jeryj committed Nov 7, 2023
commit 8b0cd57b7c6bfe421b7e6a3bcfb4a134b06082aa
20 changes: 19 additions & 1 deletion packages/edit-widgets/src/components/header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { VisuallyHidden } from '@wordpress/components';
import { Slot, VisuallyHidden } from '@wordpress/components';
import { PinnedItems } from '@wordpress/interface';
import { useViewportMatch } from '@wordpress/compose';
import { store as preferencesStore } from '@wordpress/preferences';

/**
* Internal dependencies
Expand All @@ -15,6 +17,15 @@ import MoreMenu from '../more-menu';

function Header( { setListViewToggleElement } ) {
const isMediumViewport = useViewportMatch( 'medium' );
const { hasFixedToolbar } = useSelect(
( select ) => ( {
hasFixedToolbar: !! select( preferencesStore ).get(
'core/edit-widgets',
'fixedToolbar'
),
} ),
[]
);

return (
<>
Expand All @@ -36,6 +47,13 @@ function Header( { setListViewToggleElement } ) {
<DocumentTools
setListViewToggleElement={ setListViewToggleElement }
/>
{ hasFixedToolbar && (
<Slot
className="selected-block-tools-wrapper"
name="__experimentalSelectedBlockTools"
bubblesVirtually
/>
) }
</div>
<div className="edit-widgets-header__actions">
<SaveButton />
Expand Down