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

Try: Make appender fixed position. #36037

Closed
wants to merge 2 commits into from
Closed

Try: Make appender fixed position. #36037

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ed8a022
Try: Make appender fixed position.
jasmussen Oct 28, 2021
8bb18e0
Address feedback.
jasmussen Nov 17, 2021
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
1 change: 1 addition & 0 deletions packages/base-styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ $grid-unit-60: 6 * $grid-unit; // 48px
$icon-size: 24px;
$button-size: 36px;
$button-size-small: 24px;
$button-size-xs: 18px;
$header-height: 60px;
$panel-header-height: $grid-unit-60;
$nav-sidebar-width: 300px;
Expand Down
3 changes: 3 additions & 0 deletions packages/base-styles/_z-index.scss
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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;
}
}
}
113 changes: 97 additions & 16 deletions packages/block-editor/src/components/default-block-appender/style.scss
View file
Open in desktop
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,104 @@
}
}

// 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 {

/**
* 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");
top: 0;
transform: translateY(-0.5px);
right: 0;
@include break-small() {
right: -($button-size-xs - $border-width);
}

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

// Make it smaller and blue to match focus styles.
// @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 {
display: flex;
height: 100%;
flex-direction: row;
box-shadow: none;
height: $button-size-xs;
width: $button-size-xs;

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

// Unset from .block-editor-inserter__toggle.
background: none;
min-width: $button-size-xs;

& > svg {
width: $button-size-xs;
height: $button-size-xs;
background-color: var(--wp-admin-theme-color);
color: $white;
border-radius: $radius-block-ui;
flex: 1 0 auto;
}
}

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

.block-editor-default-block-appender.has-visible-prompt .block-editor-inserter,
.block-editor-block-list__empty-block-inserter {
right: 0;
// 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;
}

// These styles effectively unset the blue styles again.
.block-editor-inserter__toggle.components-button.has-icon {
height: $button-size-small;
width: $button-size-small;

& > svg {
width: $button-size-small;
height: $button-size-small;
background-color: $gray-900;
}
}
}
}

48 changes: 1 addition & 47 deletions packages/block-library/src/social-links/editor.scss
View file
Open in desktop
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-xs;
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