diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index dda9168fc25f66..ba6012254f8e03 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -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; diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index d9651201a3873e..d27af4e2ca2503 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -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, diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss index 3f40466627b0f0..c4a623103bc19d 100644 --- a/packages/block-editor/src/components/block-list-appender/style.scss +++ b/packages/block-editor/src/components/block-list-appender/style.scss @@ -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; diff --git a/packages/block-editor/src/components/button-block-appender/style.scss b/packages/block-editor/src/components/button-block-appender/style.scss index 4e68411ce9dc84..765f4bf8116249 100644 --- a/packages/block-editor/src/components/button-block-appender/style.scss +++ b/packages/block-editor/src/components/button-block-appender/style.scss @@ -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; - } - } } diff --git a/packages/block-editor/src/components/default-block-appender/style.scss b/packages/block-editor/src/components/default-block-appender/style.scss index 0f411639faafdd..043c9dec8ac6ce 100644 --- a/packages/block-editor/src/components/default-block-appender/style.scss +++ b/packages/block-editor/src/components/default-block-appender/style.scss @@ -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. @@ -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; + } + } + } } + diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index 582413f8846d1a..533c3e5c015649 100644 --- a/packages/block-library/src/social-links/editor.scss +++ b/packages/block-library/src/social-links/editor.scss @@ -37,7 +37,6 @@ display: flex; } - & + .block-list-appender, .wp-social-link { padding: 0.25em; @@ -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. @@ -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.