diff --git a/assets/stylesheets/_animations.scss b/assets/stylesheets/_animations.scss index 9466001700e036..d0041d8c6f4ab1 100644 --- a/assets/stylesheets/_animations.scss +++ b/assets/stylesheets/_animations.scss @@ -7,3 +7,15 @@ animation-fill-mode: forwards; @include reduce-motion("animation"); } + +@mixin edit-post__inner-blocks-padding-animation($speed: 0.1s, $delay: 0s) { + animation: edit-post__inner-blocks-padding-animation $speed ease-out $delay; + animation-fill-mode: forwards; + @include reduce-motion("animation"); +} + +@mixin edit-post__inner-blocks-padding-negative-animation($speed: 0.1s, $delay: 0s) { + animation: edit-post__inner-blocks-padding-negative-animation $speed ease-out $delay; + animation-fill-mode: forwards; + @include reduce-motion("animation"); +} diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 1dc626a9e84e06..1853db9593bcb7 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -190,10 +190,17 @@ div.block-core-columns.is-vertically-aligned-bottom { .block-editor-block-list__layout .block-editor-block-list__block[data-type="core/column"].is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks, .block-editor-block-list__layout .block-editor-block-list__block[data-type="core/column"].has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks { padding: $block-padding; + @include edit-post__inner-blocks-padding-animation(); // Negate this padding for the placeholder. > .components-placeholder { margin: -$block-padding; width: calc(100% + #{$block-padding * 2}); } + + // Negate the animation for the appender and placeholders. + > .block-editor-block-list__layout > .block-list-appender, + > .components-placeholder { + @include edit-post__inner-blocks-padding-negative-animation(); + } } diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss index 166d3992c6daf9..8aadab76e22a04 100644 --- a/packages/block-library/src/group/editor.scss +++ b/packages/block-library/src/group/editor.scss @@ -92,6 +92,12 @@ > .wp-block-group__inner-container > .block-editor-inner-blocks { padding: $block-padding; + @include edit-post__inner-blocks-padding-animation(); + + // Negate the animation for the appender. + > .block-editor-block-list__layout > .block-list-appender { + @include edit-post__inner-blocks-padding-negative-animation(); + } } &:not(.has-background) > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout { diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index be47d4c70dc96d..00b7f2632b20e8 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -51,6 +51,25 @@ } } +@keyframes edit-post__inner-blocks-padding-animation { + from { + transform: scale(1.01); + } + to { + transform: scale(1); + } +} + +// This negates the animation above, and is used on child elements that don't require animation. +@keyframes edit-post__inner-blocks-padding-negative-animation { + from { + transform: scale(0.99); + } + to { + transform: scale(1); + } +} + // In order to use mix-blend-mode, this element needs to have an explicitly set background-color // We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations html.wp-toolbar {