From bc4c471a66c3dea906b8c7f8982d8870df81fb6d Mon Sep 17 00:00:00 2001 From: Raluca Stan Date: Thu, 10 Feb 2022 11:33:48 +0100 Subject: [PATCH] Fix wide appender buttons overlap in Cart & Checkout blocks in the Editor (#5801) * Add the correct appender button for non empty groups * Revert "Add the correct appender button for non empty groups" This reverts commit 4b41d7d7f82461813b3464d1b4f931c442bce3be. * Force position relative for custom InnerBlocks.ButtonBlockAppender appenders. Removing InnerBlocks.ButtonBlockAppender from renderAppender = {InnerBlocks.ButtonBlockAppender } results in the black appender button beeing shown only when the block is selected, and we need the appender to be visible by default. --- assets/js/blocks/cart-checkout/cart/editor.scss | 9 +++++++++ .../cart-checkout/mini-cart-contents/editor.scss | 13 +++++++++++++ assets/js/blocks/checkout/styles/editor.scss | 6 ++++++ 3 files changed, 28 insertions(+) diff --git a/assets/js/blocks/cart-checkout/cart/editor.scss b/assets/js/blocks/cart-checkout/cart/editor.scss index d39e5532fbb..d3d93d5b5b2 100644 --- a/assets/js/blocks/cart-checkout/cart/editor.scss +++ b/assets/js/blocks/cart-checkout/cart/editor.scss @@ -20,3 +20,12 @@ body.wc-lock-selected-block--remove { } } +.wp-block-woocommerce-cart-items-block, +.wp-block-woocommerce-cart-totals-block, +.wp-block-woocommerce-empty-cart-block { + // Temporary fix after the appender button was positioned absolute + // See https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/5742#issuecomment-1032804168 + .block-list-appender { + position: relative; + } +} diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss b/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss index 8fc4e5b4a0e..27b36bb5b36 100644 --- a/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss +++ b/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss @@ -21,6 +21,13 @@ flex-direction: column; height: 100%; } + + // Temporary fix after the appender button was positioned absolute + // See https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/5742#issuecomment-1032804168 + .block-list-appender { + position: relative; + } + } .wp-block-woocommerce-mini-cart-products-table-block { @@ -52,5 +59,11 @@ box-sizing: border-box; padding: $gap-largest $gap $gap; } + + // Temporary fix after the appender button was positioned absolute + // See https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/5742#issuecomment-1032804168 + .block-list-appender { + position: relative; + } } } diff --git a/assets/js/blocks/checkout/styles/editor.scss b/assets/js/blocks/checkout/styles/editor.scss index 69acbf866b6..fceab401626 100644 --- a/assets/js/blocks/checkout/styles/editor.scss +++ b/assets/js/blocks/checkout/styles/editor.scss @@ -23,6 +23,12 @@ .block-editor-block-list__layout { display: block; } + + // Temporary fix after the appender button was positioned absolute + // See https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/5742#issuecomment-1032804168 + .block-list-appender { + position: relative; + } } }