diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index f1c59559f31fc..b4391f2ed40c0 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 3f40466627b0f..c4a623103bc19 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 4e68411ce9dc8..765f4bf811624 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 0f411639faafd..25a24b436223d 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,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; + } } diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index 582413f8846d1..c272b955b1716 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-small; 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. diff --git a/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js index c0f3ada59ef5a..5b0b30e48c229 100644 --- a/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js +++ b/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js @@ -9,6 +9,7 @@ import { insertBlock, openGlobalBlockInserter, closeGlobalBlockInserter, + clickBlockToolbarButton, } from '@wordpress/e2e-test-utils'; describe( 'Allowed Blocks Setting on InnerBlocks', () => { @@ -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.