diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index 03dac509fef47..768bd20e079d5 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -34,7 +34,8 @@ $blocks-block__margin: 0.5em; } } -.wp-block-button { +// Increased specificity needed to override margins. +.wp-block-buttons > .wp-block-button { &.has-custom-width { max-width: none; .wp-block-button__link { diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss index d3eed8d5fbf8e..b2e570286474d 100644 --- a/packages/block-library/src/buttons/editor.scss +++ b/packages/block-library/src/buttons/editor.scss @@ -1,5 +1,5 @@ // This variable is repeated across Button, Buttons, and Buttons editor styles. -$blocks-block__margin: 0.5em; +$blocks-block__margin: 1em; .wp-block > .wp-block-buttons { display: flex; @@ -8,8 +8,8 @@ $blocks-block__margin: 0.5em; .wp-block-buttons { // Specificity needed to override editor auto block margins. - > .wp-block.wp-block-button { - margin: 0; + > .wp-block { + margin-top: calc(var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.5); } > .block-list-appender { @@ -47,6 +47,12 @@ $blocks-block__margin: 0.5em; margin-right: auto; margin-top: 0; width: 100%; + + .wp-block-button { + // Some margin hacks are needed, since margin doesn't seem to + // collapse in the same way when a parent layout it flex. + margin-bottom: 0; + } } } diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss index 437c1fa9ed9ed..eba16c18cae55 100644 --- a/packages/block-library/src/buttons/style.scss +++ b/packages/block-library/src/buttons/style.scss @@ -5,15 +5,25 @@ $blocks-block__margin: 0.5em; display: flex; flex-direction: row; flex-wrap: wrap; - gap: var(--wp--style--block-gap, $blocks-block__margin); + column-gap: var(--wp--style--block-gap, $blocks-block__margin); &.is-vertical { flex-direction: column; + > .wp-block-button { + &:last-child { + margin-bottom: 0; + } + } } // Increased specificity to override blocks default margin. > .wp-block-button { display: inline-block; + /*rtl:ignore*/ + margin-left: 0; + /*rtl:ignore*/ + margin-right: 0; + margin-bottom: calc(var(--wp--style--block-gap, #{ $blocks-block__margin}) * 0.5); } &.is-content-justification-left { @@ -65,6 +75,7 @@ $blocks-block__margin: 0.5em; /* stylelint-enable indentation */ margin-left: auto; margin-right: auto; + margin-bottom: calc(var(--wp--style--block-gap, #{ $blocks-block__margin}) * 0.5); width: 100%; } }