Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add width control to the Checkout block #1583

Merged
merged 1 commit into from
Nov 14, 2023

Conversation

laurelfulford
Copy link
Contributor

All Submissions:

Changes proposed in this Pull Request:

This PR adds a 'width' control to the Checkout Button block, so you can set it to 25, 50, 75, or 100% of the available space.

See 1200550061930446-as-1205525005864243

How to test the changes in this Pull Request:

  1. Apply the PR and run npm run build.
  2. Add a Checkout button to the editor. Click it and confirm that there's a 'Width settings' panel under the 'Settings' tab (which, oddly, is the same location as the Button block - it's not under the Styles tab).

image

  1. Try changing the width to one of the different settings; confirm that it's applied in the editor and on the front end. Repeat with all of the options.

image

  1. When done, click again on the selected option to clear the width and confirm the button returns to the default width (the width of its text label). Publish to confirm that this is the case on the front-end, too.

Other information:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your changes, as applicable?
  • Have you successfully ran tests with your changes locally?

Copy link
Contributor

@dkoo dkoo 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!

@laurelfulford laurelfulford merged commit 3f75c1e into master Nov 14, 2023
8 checks passed
@laurelfulford
Copy link
Contributor Author

Thanks @dkoo!

@laurelfulford laurelfulford deleted the feat/checkout-button-width-control branch November 14, 2023 00:50
matticbot pushed a commit that referenced this pull request Nov 16, 2023
# [2.2.0-alpha.1](v2.1.0...v2.2.0-alpha.1) (2023-11-16)

### Bug Fixes

* add checks for Newspack plugin ([#1579](#1579)) ([b516a6f](b516a6f))
* **homepage-posts:** terms handling in category list ([#1596](#1596)) ([55dbf42](55dbf42))
* **modal-checkout:** place order button width ([b48efcb](b48efcb)), closes [#1572](#1572)

### Features

* add width control to the Checkout block ([#1583](#1583)) ([3f75c1e](3f75c1e))
* **cwv:** inline HPB styles in a style tag ([#1548](#1548)) ([dea8d93](dea8d93))
* **modal-checkout:** display item name on success ([a3a03df](a3a03df))
* update subscribe patterns to use Newspack block ([#1580](#1580)) ([70088e2](70088e2))
@matticbot
Copy link
Contributor

🎉 This PR is included in version 2.2.0-alpha.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

matticbot pushed a commit that referenced this pull request Nov 27, 2023
# [2.2.0](v2.1.0...v2.2.0) (2023-11-27)

### Bug Fixes

* add checks for Newspack plugin ([#1579](#1579)) ([b516a6f](b516a6f))
* **homepage-posts:** terms handling in category list ([#1596](#1596)) ([55dbf42](55dbf42))
* **modal-checkout:** place order button width ([b48efcb](b48efcb)), closes [#1572](#1572)

### Features

* add width control to the Checkout block ([#1583](#1583)) ([3f75c1e](3f75c1e))
* **cwv:** inline HPB styles in a style tag ([#1548](#1548)) ([dea8d93](dea8d93))
* **modal-checkout:** display item name on success ([a3a03df](a3a03df))
* update subscribe patterns to use Newspack block ([#1580](#1580)) ([70088e2](70088e2))
@matticbot
Copy link
Contributor

🎉 This PR is included in version 2.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants