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.

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

Updates the behavior of the top toolbar fixed setting #49634

Merged
merged 27 commits into from
Apr 19, 2023
Merged
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
1aafff5
move fixed toolbar on desktop on top of interface header
draganescu Apr 6, 2023
1d879fc
add the parent selector to the fixed toolbar on desktop
draganescu Apr 6, 2023
68ed98d
fix for parent selector position
draganescu Apr 6, 2023
70ce488
hide block toolbar when focus is within interface header
draganescu Apr 6, 2023
8d982e4
adds collapsed and expanded states to block toolbar, manages focus
draganescu Apr 6, 2023
7be2148
label the toggle buttons
draganescu Apr 6, 2023
0a9d48e
fix the focus loss when toggling top toolbar on
draganescu Apr 6, 2023
8d29ac5
fixes positioning glitches in windowed post editor, fixes focus withi…
draganescu Apr 6, 2023
4890094
fix rounded border on collapse/expand buttons
draganescu Apr 6, 2023
38013a8
adjusts padding for parent selector and collapse buttons
draganescu Apr 7, 2023
9e649f9
use preference store to look for top toolbar pref in site editor
draganescu Apr 7, 2023
71c55c9
replace button with toolbarbutton to avoid the need to reuse componen…
draganescu Apr 11, 2023
a1a9ae6
remove component-* class referencing
draganescu Apr 11, 2023
70e9e92
respect design on separator size
draganescu Apr 11, 2023
13ed3c3
adds breakpoint covering behavior
draganescu Apr 11, 2023
fc8f230
fix buton labels pref toolbar height, fix capitalisation
draganescu Apr 12, 2023
b8c3072
always expand on block selection change
draganescu Apr 12, 2023
2ec1da6
updates the labels
draganescu Apr 12, 2023
7ba6116
fixes a separator height and show icon labels positioning for non ful…
draganescu Apr 12, 2023
ec2ebb9
fix reference error
draganescu Apr 12, 2023
6104db2
Update e2e test for alt+f10 shortcut to match desired behavior in uni…
jeryj Apr 12, 2023
918db14
Update test names to more accurately match what it's testing
jeryj Apr 12, 2023
d1d560b
Corrected typo: prefferences -> preferences
jeryj Apr 12, 2023
aee6460
move the toolbar over on large viewports
scruffian Apr 18, 2023
da57ec0
fix positioning for all wp admin sidebar full screen not full screen …
draganescu Apr 18, 2023
5356b0a
tweak the position of the top toolbar for when icon labels are on
draganescu Apr 18, 2023
6fd07af
change the condition under which we display the block parent selector…
scruffian Apr 19, 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
fixes positioning glitches in windowed post editor, fixes focus withi…
…n in site editor
  • Loading branch information
draganescu committed Apr 18, 2023
commit 8d29ac5fbb20d8528b13f5c95effc56bb25c6706
16 changes: 13 additions & 3 deletions packages/block-editor/src/components/block-tools/style.scss
Original file line number Diff line number Diff line change
@@ -123,11 +123,12 @@
// on top of interface header
@include break-medium() {
&.is-fixed {

// position on top of interface header
position: fixed;
top: $grid-unit;
top: $grid-unit-50 - 2;
// leave room for block inserter
left: $grid-unit-80 + $grid-unit-70;
left: $grid-unit-80 + $grid-unit-40;
// Don't fill up when empty
min-height: initial;
// Don't fill the whole header, minimize area
@@ -138,7 +139,16 @@
display: flex;

&.is-collapsed {
left: $grid-unit-10 * 35;
left: $grid-unit-10 * 32;
}

.is-fullscreen-mode & {
top: $grid-unit - 2;
// leave room for block inserter
left: $grid-unit-80 + $grid-unit-70;
&.is-collapsed {
left: $grid-unit-10 * 35;
}
}

& > button.components-button.has-icon {
draganescu marked this conversation as resolved.
Show resolved Hide resolved
11 changes: 6 additions & 5 deletions packages/edit-site/src/components/layout/index.js
Original file line number Diff line number Diff line change
@@ -68,8 +68,8 @@ export default function Layout() {
const { params } = useLocation();
const isListPage = getIsListPage( params );
const isEditorPage = ! isListPage;
const { canvasMode, previousShortcut, nextShortcut } = useSelect(
( select ) => {
const { hasFixedToolbar, canvasMode, previousShortcut, nextShortcut } =
useSelect( ( select ) => {
const { getAllShortcutKeyCombinations } = select(
keyboardShortcutsStore
);
@@ -82,10 +82,10 @@ export default function Layout() {
nextShortcut: getAllShortcutKeyCombinations(
'core/edit-site/next-region'
),
hasFixedToolbar:
select( editSiteStore ).isFeatureActive( 'fixedToolbar' ),
};
},
[]
);
}, [] );
const navigateRegionsProps = useNavigateRegions( {
previous: previousShortcut,
next: nextShortcut,
@@ -139,6 +139,7 @@ export default function Layout() {
{
'is-full-canvas': isFullCanvas,
'is-edit-mode': canvasMode === 'edit',
'has-fixed-toolbar': hasFixedToolbar,
}
) }
>
15 changes: 15 additions & 0 deletions packages/edit-site/src/components/layout/style.scss
Original file line number Diff line number Diff line change
@@ -221,3 +221,18 @@
border-left: $border-width solid $gray-300;
}
}

.edit-site-layout.has-fixed-toolbar {
// making the header be lower than the content
// so the fixed toolbar can be positioned on top of it
// but only on desktop
@include break-medium() {
.edit-site-site-hub {
z-index: 4;
}
.edit-site-layout__header:focus-within {
z-index: 3;
}
}

}