Skip to content

Commit

Permalink
Make appender fixed position to avoid jumps in the UI (#36605)
Browse files Browse the repository at this point in the history 
Co-authored-by: Ella van Durpe <ella@vandurpe.com>
  • Loading branch information
@jasmussen @ellatrix @noisysocks
2 people authored and noisysocks committed Nov 22, 2021
1 parent 96b3bd4 commit d0e6ff8
Show file tree
Hide file tree
Showing 6 changed files with 96 additions and 122 deletions.
3 changes: 3 additions & 0 deletions packages/base-styles/_z-index.scss
View file
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
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
2 changes: 2 additions & 0 deletions packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
insertBlock,
openGlobalBlockInserter,
closeGlobalBlockInserter,
clickBlockToolbarButton,
} from '@wordpress/e2e-test-utils';

describe( 'Allowed Blocks Setting on InnerBlocks', () => {
Expand Down Expand Up @@ -75,6 +76,7 @@ describe( 'Allowed Blocks Setting on InnerBlocks', () => {
await insertBlock( 'Image' );
await closeGlobalBlockInserter();
await page.waitForSelector( '.product[data-number-of-children="2"]' );
await clickBlockToolbarButton( 'Select Allowed Blocks Dynamic' );
// This focus shouldn't be neessary but there's a bug in trunk right now
// Where if you open the inserter, don't do anything and click the "appender" on the canvas
// the appender is not opened right away.
Expand Down

0 comments on commit d0e6ff8

Please sign in to comment.