Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Fix label alignment of the product search in the editor #5072

Merged
merged 2 commits into from
Nov 5, 2021

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented Nov 4, 2021

This PR fixed the search label alignment on the edit page for the block Product Search.

Fixes #3083

Screenshots

image
before - frontend page

image
before - edit page

image
current implementation - frontend page

image
current implementation - edit page

Testing

Manual Testing

How to test the changes in this Pull Request:

Check out this branch

  1. Make sure you have Woo Blocks plugins installed
  2. Create a new page and add the Product Search block
  3. Save
  4. Check if the label "Search" position is equal on frontend page and editor page

Changelog

Fix label alignment of the product search in the editor.

Fix product search margin style on edit page
@gigitux gigitux added type: bug The issue/PR concerns a confirmed bug. block: product search Issues related to the Product Search block. focus: global styles Issues that involve styles/css/layout structure. labels Nov 4, 2021
@gigitux gigitux requested a review from ralucaStan November 4, 2021 13:45
@gigitux gigitux self-assigned this Nov 4, 2021
@rubikuserbot rubikuserbot requested review from a team and dinhtungdu and removed request for a team November 4, 2021 13:46
@github-actions
Copy link
Contributor

github-actions bot commented Nov 4, 2021

Size Change: +16 B (0%)

Total Size: 1.11 MB

Filename Size Change
build/wc-blocks-editor-style-rtl.css 15.7 kB +8 B (0%)
build/wc-blocks-editor-style.css 15.7 kB +8 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.18 kB
build/active-filters.js 8 kB
build/all-products-frontend.js 23.1 kB
build/all-products.js 38 kB
build/all-reviews.js 9.57 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 3.19 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.81 kB
build/atomic-block-components/add-to-cart-frontend.js 8.34 kB
build/atomic-block-components/add-to-cart.js 7.85 kB
build/atomic-block-components/button-frontend.js 1.74 kB
build/atomic-block-components/button.js 874 B
build/atomic-block-components/category-list-frontend.js 467 B
build/atomic-block-components/category-list.js 469 B
build/atomic-block-components/image-frontend.js 1.71 kB
build/atomic-block-components/image.js 1.36 kB
build/atomic-block-components/price-frontend.js 2.13 kB
build/atomic-block-components/price.js 2.11 kB
build/atomic-block-components/rating-frontend.js 563 B
build/atomic-block-components/rating.js 565 B
build/atomic-block-components/sale-badge-frontend.js 861 B
build/atomic-block-components/sale-badge.js 868 B
build/atomic-block-components/sku-frontend.js 391 B
build/atomic-block-components/sku.js 393 B
build/atomic-block-components/stock-indicator-frontend.js 611 B
build/atomic-block-components/stock-indicator.js 611 B
build/atomic-block-components/summary-frontend.js 908 B
build/atomic-block-components/summary.js 912 B
build/atomic-block-components/tag-list-frontend.js 467 B
build/atomic-block-components/tag-list.js 471 B
build/atomic-block-components/title-frontend.js 1.48 kB
build/atomic-block-components/title.js 1.47 kB
build/attribute-filter-frontend.js 18.1 kB
build/attribute-filter.js 12.1 kB
build/blocks-checkout.js 21 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.39 kB
build/cart-blocks/checkout-button-frontend.js 1.22 kB
build/cart-blocks/empty-cart-frontend.js 349 B
build/cart-blocks/express-payment--checkout-blocks/express-payment--checkout-blocks/payment-frontend.js 4.73 kB
build/cart-blocks/express-payment-frontend.js 1.58 kB
build/cart-blocks/filled-cart-frontend.js 806 B
build/cart-blocks/items-frontend.js 303 B
build/cart-blocks/line-items-frontend.js 5.85 kB
build/cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.69 kB
build/cart-blocks/order-summary-frontend.js 7.4 kB
build/cart-blocks/totals-frontend.js 322 B
build/cart-frontend.js 52.2 kB
build/cart.js 50.5 kB
build/checkout-blocks/actions-frontend.js 1.48 kB
build/checkout-blocks/billing-address-frontend.js 2.64 kB
build/checkout-blocks/contact-information-frontend.js 3.87 kB
build/checkout-blocks/express-payment-frontend.js 1.93 kB
build/checkout-blocks/fields-frontend.js 346 B
build/checkout-blocks/order-note-frontend.js 1.56 kB
build/checkout-blocks/order-summary-frontend.js 12.8 kB
build/checkout-blocks/payment-frontend.js 4.56 kB
build/checkout-blocks/shipping-address-frontend.js 3.03 kB
build/checkout-blocks/shipping-methods-frontend.js 5.54 kB
build/checkout-blocks/terms-frontend.js 1.65 kB
build/checkout-blocks/totals-frontend.js 329 B
build/checkout-frontend.js 54.4 kB
build/checkout.js 54 kB
build/featured-category.js 7.74 kB
build/featured-product.js 9.42 kB
build/handpicked-products.js 6.27 kB
build/legacy-template.js 2.12 kB
build/mini-cart-component-frontend.js 44.4 kB
build/mini-cart-frontend.js 2.34 kB
build/mini-cart.js 5.72 kB
build/price-filter-frontend.js 14.2 kB
build/price-filter.js 9.65 kB
build/price-format.js 1.37 kB
build/product-best-sellers.js 6.62 kB
build/product-categories.js 3.37 kB
build/product-category.js 7.49 kB
build/product-new.js 6.77 kB
build/product-on-sale.js 7.11 kB
build/product-search.js 2.68 kB
build/product-tag.js 6.6 kB
build/product-top-rated.js 6.74 kB
build/products-by-attribute.js 7.7 kB
build/reviews-by-category.js 11.4 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 8.97 kB
build/single-product-frontend.js 26.6 kB
build/single-product.js 9.75 kB
build/stock-filter-frontend.js 8.62 kB
build/stock-filter.js 7.81 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 16.1 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 4.77 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 5.02 kB
build/wc-blocks-data.js 11.3 kB
build/wc-blocks-google-analytics.js 1.98 kB
build/wc-blocks-middleware.js 1.19 kB
build/wc-blocks-registry.js 3.71 kB
build/wc-blocks-shared-context.js 1.54 kB
build/wc-blocks-shared-hocs.js 1.92 kB
build/wc-blocks-style-rtl.css 21 kB
build/wc-blocks-style.css 21 kB
build/wc-blocks-vendors-style-rtl.css 1.37 kB
build/wc-blocks-vendors-style.css 1.37 kB
build/wc-blocks-vendors.js 254 kB
build/wc-blocks.js 3.49 kB
build/wc-payment-method-bacs.js 806 B
build/wc-payment-method-cheque.js 806 B
build/wc-payment-method-cod.js 898 B
build/wc-payment-method-paypal.js 839 B
build/wc-payment-method-stripe.js 12.2 kB
build/wc-settings.js 2.91 kB

compressed-size-action

Copy link
Contributor

@ralucaStan ralucaStan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, I've also made a suggestion to improve even more the spacing of the block.

assets/js/blocks/product-search/editor.scss Show resolved Hide resolved
@github-actions github-actions bot added this to the 6.3.0 milestone Nov 5, 2021
@gigitux gigitux force-pushed the fix/3083-product-search-different-margin branch from cb3de72 to 3efb4ba Compare November 5, 2021 14:15
@gigitux gigitux merged commit 1f92c40 into trunk Nov 5, 2021
@gigitux gigitux deleted the fix/3083-product-search-different-margin branch November 5, 2021 14:24
@nielslange nielslange changed the title Product Search: Fix Search label alignment on the edit page Fix label alignment of the product search in the editor Nov 16, 2021
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 14, 2021
…rce#5072)

* Fix product search margin style on edit page woocommerce#3083

Fix product search margin style on edit page

* fix button size
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 16, 2021
…rce#5072)

* Fix product search margin style on edit page woocommerce#3083

Fix product search margin style on edit page

* fix button size
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: product search Issues related to the Product Search block. focus: global styles Issues that involve styles/css/layout structure. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Product Search input has different margin in editor and frontend
2 participants