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

Add a placeholder to the product search block editor #5122

Merged
merged 2 commits into from
Nov 12, 2021
Merged

Add a placeholder to the product search block editor #5122

merged 2 commits into from
Nov 12, 2021

Conversation

alexflorisca
Copy link
Member

@alexflorisca alexflorisca commented Nov 10, 2021 •
edited by nielslange
Loading

The product search block, when added to a page in the editor, has a Search field with the initial value "Search products...". This represents the placeholder that will appear on the front end, but is not immediately clear to the user. We've added a placeholder to this search input to state this is the case, if the user deletes the initial value.

Related to #5078

Accessibility

  • I've tested using only a keyboard (no mouse)
  • I've tested using a screen reader

Screenshots

image

Testing

Manual Testing

How to test the changes in this Pull Request:

  1. Add the Product Search block to any page in the editor
  2. Delete the "Search Products..." value from the Search input
  3. "Enter search placeholder text" should be displayed in the input as a placeholder
  4. The text should disappear as you start typing

Changelog

Add placeholder text when modifying product search input in the editor.

@alexflorisca alexflorisca added status: needs review type: enhancement The issue is a request for an enhancement. focus: blocks Specific work involving or impacting how blocks behave. block: product search Issues related to the Product Search block. labels Nov 10, 2021
@alexflorisca alexflorisca self-assigned this Nov 10, 2021
@rubikuserbot rubikuserbot requested review from a team and mikejolley and removed request for a team November 10, 2021 12:35
@alexflorisca alexflorisca linked an issue Nov 10, 2021 that may be closed by this pull request
Product Search (editor): the block's input can be edited #5078
Closed
@github-actions
Copy link
Contributor

Size Change: +19 B (0%)

Total Size: 1.11 MB

Filename Size Change
build/product-search.js 2.71 kB +19 B (+1%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.18 kB
build/active-filters.js 8 kB
build/all-products-frontend.js 23.4 kB
build/all-products.js 38.2 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 873 B
build/atomic-block-components/category-list-frontend.js 466 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 562 B
build/atomic-block-components/rating.js 566 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 390 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 610 B
build/atomic-block-components/summary-frontend.js 907 B
build/atomic-block-components/summary.js 912 B
build/atomic-block-components/tag-list-frontend.js 468 B
build/atomic-block-components/tag-list.js 471 B
build/atomic-block-components/title-frontend.js 1.47 kB
build/atomic-block-components/title.js 1.48 kB
build/attribute-filter-frontend.js 18.1 kB
build/attribute-filter.js 12.1 kB
build/blocks-checkout.js 21.3 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.39 kB
build/cart-blocks/checkout-button-frontend.js 1.21 kB
build/cart-blocks/empty-cart-frontend.js 348 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.59 kB
build/cart-blocks/filled-cart-frontend.js 805 B
build/cart-blocks/items-frontend.js 302 B
build/cart-blocks/line-items-frontend.js 5.87 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 324 B
build/cart-frontend.js 52.5 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.62 kB
build/checkout-blocks/express-payment-frontend.js 1.93 kB
build/checkout-blocks/fields-frontend.js 348 B
build/checkout-blocks/order-note-frontend.js 1.25 kB
build/checkout-blocks/order-summary-frontend.js 12.9 kB
build/checkout-blocks/payment-frontend.js 4.28 kB
build/checkout-blocks/shipping-address-frontend.js 2.72 kB
build/checkout-blocks/shipping-methods-frontend.js 5.54 kB
build/checkout-blocks/terms-frontend.js 1.29 kB
build/checkout-blocks/totals-frontend.js 329 B
build/checkout-frontend.js 54.8 kB
build/checkout.js 53.7 kB
build/featured-category.js 7.74 kB
build/featured-product.js 9.43 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.38 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-tag.js 6.6 kB
build/product-top-rated.js 6.74 kB
build/products-by-attribute.js 7.71 kB
build/reviews-by-category.js 11.5 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 8.97 kB
build/single-product-frontend.js 26.9 kB
build/single-product.js 10 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.03 kB
build/wc-blocks-data.js 11.3 kB
build/wc-blocks-editor-style-rtl.css 15.7 kB
build/wc-blocks-editor-style.css 15.7 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.1 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 255 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

mikejolley
mikejolley approved these changes Nov 11, 2021
View reviewed changes
Copy link
Member

@mikejolley mikejolley left a comment

Choose a reason for hiding this comment

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

This is clearer thanks 👍🏻

The e2e test fail looks to be a timeout unrelated to this change so I restarted the job.

@github-actions github-actions bot added this to the 6.3.0 milestone Nov 11, 2021
@alexflorisca alexflorisca merged commit 6cb995c into trunk Nov 12, 2021
@alexflorisca alexflorisca deleted the fix/placeholder-product-search-block branch November 12, 2021 14:58
@nielslange nielslange changed the title Added a placeholder to the product search block editor Add a placeholder to the product search block editor Nov 15, 2021
@nielslange nielslange mentioned this pull request Nov 18, 2021
Merged
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 14, 2021
@alexflorisca @jonny-bull
Added a placeholder to the product search block editor (woocommerce#5122
7001544 
)

* Added a placeholder to the product search block editor to indicate that the user can change the placeholder on the front end

* Changed the placeholder to be translatable
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 16, 2021
@alexflorisca @jonny-bull
Added a placeholder to the product search block editor (woocommerce#5122
fa394cd 
)

* Added a placeholder to the product search block editor to indicate that the user can change the placeholder on the front end

* Changed the placeholder to be translatable
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@mikejolley mikejolley mikejolley approved these changes

Assignees

@alexflorisca alexflorisca

Labels
block: product search Issues related to the Product Search block. focus: blocks Specific work involving or impacting how blocks behave. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Milestone
6.3.0
Development

Successfully merging this pull request may close these issues.

Product Search (editor): the block's input can be edited
2 participants
@alexflorisca @mikejolley