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

Jump to bottom

Make appender fixed position to avoid jumps in the UI #36605

Merged
merged 4 commits into from Nov 19, 2021
Merged

Make appender fixed position to avoid jumps in the UI #36605

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0353729
Try: Make appender fixed position, alternate version
jasmussen Oct 28, 2021
adf7579
Only show the plus for the selected layer.
jasmussen Nov 18, 2021
4a9ff26
Fix issue with missing plus on Navigation.
jasmussen Nov 19, 2021
4449b56
Fix e2e test
ellatrix Nov 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/base-styles/_z-index.scss
View file
Open in desktop
Expand Up @@ -43,6 +43,9 @@ $z-layers: (
".wp-block-cover__video-background": 0, // Video background inside cover block.
".wp-block-template-part__placeholder-preview-filter-input": 1,

// Fixed position appender:
".block-editor-block-list__block .block-list-appender": 2,

// Navigation menu dropdown.
".has-child .wp-block-navigation__submenu-container": 28,
".has-child:hover .wp-block-navigation__submenu-container": 29,
Expand Down
42 changes: 0 additions & 42 deletions packages/block-editor/src/components/block-list-appender/style.scss
View file
Open in desktop
@@ -1,45 +1,3 @@
// These styles are only applied to the appender when it appears inside of a block.
// Otherwise the default appender may be improperly positioned in some themes.
.block-editor-block-list__block .block-list-appender {
align-self: center;
padding: 0;
list-style: none;

// Themes sometimes apply a max-width to all elements classed blocks.
&.wp-block {
max-width: none;
}

.block-editor-default-block-appender {
margin: $grid-unit-10 0;
}

// Zero out the margin that's inherited from common.scss.
margin-bottom: revert;

// Black square plus appender.
.block-list-appender__toggle {
padding: 0;

// Animate appearance.
opacity: 1;
transform: scale(1);
transition: all 0.1s ease;
@include reduce-motion("transition");

// The black square button should have a little left margin in horizontal containers.
margin-left: $grid-unit-10;
}

// Cancel any left margin if the black plus sits alone in the container.
// `first-of-type` is used instead of `first-child` as the element is not always the only
// element in the "empty" container. For example the empty navigation block state has a
// zero-width placeholder state that is meant to help correctly size the dimensions.
&:first-of-type .block-list-appender__toggle {
margin-left: 0;
}
}

// For vertical flex containers, a 100% width ensures correct alignment.
.is-vertical .block-list-appender {
width: $icon-size;
Expand Down
17 changes: 0 additions & 17 deletions packages/block-editor/src/components/button-block-appender/style.scss
View file
Open in desktop
Expand Up @@ -26,21 +26,4 @@
&:active {
color: $black;
}

// This variant is used in inline situations, like Buttons, Social Links, Navigation Menu.
&.block-list-appender__toggle {
display: flex;
flex-direction: row;
box-shadow: none;
height: $icon-size;
width: $icon-size;

& > svg {
width: $icon-size;
background-color: $gray-900;
color: $white;
border-radius: $radius-block-ui;
flex: 1 0 auto;
}
}
}
106 changes: 90 additions & 16 deletions packages/block-editor/src/components/default-block-appender/style.scss
View file
Open in desktop
@@ -1,3 +1,12 @@
/**
* Default block appender.
*
* This component shows up in 3 places:
* - the black plus that sits at the end of the canvas, if the last block isn't a paragraph
* - on the right, inside empty paragraphs
* - absolute positioned and blue inside nesting containers
*/

.block-editor-default-block-appender {
clear: both; // The appender doesn't scale well to sit next to floats, so clear them.

Expand All @@ -23,32 +32,97 @@
}
}

// Empty / default block side inserter.
.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter, // Empty paragraph, needs specificity to override inherited popover styles.
.block-editor-default-block-appender .block-editor-inserter { // Empty appender.
// The black plus that shows up on the right side of an empty paragraph block, or the initial appender
// that exists only on empty documents.
.block-editor-default-block-appender .block-editor-inserter,
.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter { // This needs specificity to override inherited popover styles.
position: absolute;
top: 0;
height: $button-size-small + $grid-unit-10;
right: 0;
line-height: 0;

.block-editor-inserter__toggle {
margin-right: 0;
&:disabled {
display: none;
}
}

// Left side.
.block-editor-block-list__empty-block-inserter,
.block-editor-default-block-appender .block-editor-inserter {
@include break-small {
display: flex;
height: 100%;

/**
* Fixed position appender.
* These styles apply to all in-canvas inserters that exist inside nesting containers.
*/

.block-editor-block-list__block .block-list-appender {
position: absolute;
list-style: none;
padding: 0;
z-index: z-index(".block-editor-block-list__block .block-list-appender");
bottom: 0;
right: 0;

// These rules needs extra specificity as it's affected by DOM rules.
&.block-list-appender {
margin: 0;
line-height: 0;
}

&:disabled {
.block-editor-default-block-appender {
height: $button-size-small;
}

// @todo: these are currently two separate components. Since we're now
// treating them the same, one or both can be retired.
.block-editor-inserter__toggle.components-button.has-icon,
.block-list-appender__toggle {
flex-direction: row;
box-shadow: none;
height: $button-size-small;
width: $button-size-small;

// Hide by default, then we unhide it when the selected block is a direct ancestor.
display: none;

// Important to override styles form Button component.
padding: 0 !important;

// Basic look
background: $gray-900;
color: $white;

&:hover {
color: $white;
background: var(--wp-admin-theme-color);
}
}

// This content only shows up inside the empty appender.
.block-editor-default-block-appender__content {
display: none;
}

// These could be avoided by employing a :not(:only-child) on the parent,
// but this should be more performant.
// @todo: These styles can almost certainly be refactored away we refactor
// the markup and classes of the component itself. The rules provide some
// baseline styles for when the block is the only one inside.
&:only-child {
position: relative;
right: auto;
align-self: center;
list-style: none;
line-height: inherit;

.block-editor-default-block-appender__content {
display: block;
}
}
}

.block-editor-default-block-appender.has-visible-prompt .block-editor-inserter,
.block-editor-block-list__empty-block-inserter {
right: 0;
// Unhide the inserter when you're in the exact container.
.block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender,
.block-editor-block-list__block.is-selected > .block-list-appender {
.block-editor-inserter__toggle.components-button.has-icon,
.block-list-appender__toggle {
display: flex;
}
}
48 changes: 1 addition & 47 deletions packages/block-library/src/social-links/editor.scss
View file
Open in desktop
Expand Up @@ -37,7 +37,6 @@
display: flex;
}

& + .block-list-appender,
.wp-social-link {
padding: 0.25em;

Expand Down Expand Up @@ -66,6 +65,7 @@

// Selected placeholder state.
.wp-block-social-links .wp-block-social-links__social-prompt {
min-height: $button-size-small;
list-style: none;
order: 2; // Move after the appender button. Because this element is non-interactive, it does not affect tab order.

Expand All @@ -77,52 +77,6 @@
margin-bottom: auto;
cursor: default;
padding-right: $grid-unit-10;

& + .block-list-appender {
margin-right: $grid-unit-10;
padding: 0.25em;
}
}

// Polish the Appender.
.wp-block-social-links .block-list-appender {
// Match the overall silhouette of social links.
margin: 4px auto 4px 0;
border-radius: 9999px; // This works as both circular and pill shapes.

// Treat just like a social icon.
.block-editor-inserter {
display: flex;
align-items: center;
justify-content: center;
font-size: inherit;
width: 1em;
height: 1em;
}

// Duplicate the font sizes from style.scss to size the appender.
.has-small-icon-size & {
font-size: 16px; // 16 makes for a quarter-padding that keeps the icon centered.
}

// Normal/default.
.has-normal-icon-size & {
font-size: 24px;
}

// Large.
.has-large-icon-size & {
font-size: 36px;
}

// Huge.
.has-huge-icon-size & {
font-size: 48px;
}

&::before {
content: none;
}
}

// Center flex items. This has an equivalent in style.scss.
Expand Down