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.

Sign up for GitHub

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

Jump to bottom

Try wrapping entire coming soon page under cover block to fix layout issue #46914

Merged
merged 9 commits into from Apr 30, 2024
Merged

Try wrapping entire coming soon page under cover block to fix layout issue #46914

merged 9 commits into from Apr 30, 2024

Conversation

ilyasfoo
Copy link
Contributor

@ilyasfoo ilyasfoo commented Apr 25, 2024 •
edited

Submission Review Guidelines:

Changes proposed in this Pull Request:

Another attempt to partially fix layout issues from https://github.com/woocommerce/team-ghidorah/issues/311 by wrapping everything under the cover block and flexbox positioning instead of using absolute positioning.

Note that this does not yet fix the styling issues (such as changing background color, default margin/padding mismatches, etc.)

How to test the changes in this Pull Request:

  1. Enable launch-your-store feature flag.
  2. Go to WooCommerce > Settings > Site Visibility and enable Coming soon checkbox and save.
  3. Go to Appearance > Editor > Templates > Page: Coming soon and edit it.
  4. Try adding blocks around and see if the frontend layout matches.
kCrgRV.mp4

Changelog entry

  • Automatically create a changelog entry from the details below.

Significance

  • Patch
  • Minor
  • Major

Type

  • Fix - Fixes an existing bug
  • Add - Adds functionality
  • Update - Update existing functionality
  • Dev - Development related task
  • Tweak - A minor adjustment to the codebase
  • Performance - Address performance issues
  • Enhancement - Improvement to existing functionality

Message

Comment

@github-actions github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Apr 25, 2024
@ilyasfoo ilyasfoo marked this pull request as ready for review April 25, 2024 12:56
ilyasfoo
ilyasfoo commented Apr 25, 2024
View reviewed changes
plugins/woocommerce-blocks/assets/js/blocks/coming-soon/edit.tsx Outdated
flex-direction: column;
justify-content: space-between;
}
.woocommerce-coming-soon-banner-container > .wp-block-group__inner-container {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is required for classic themes, wp-block-group__inner-container appears out of nowhere 🤷

ilyasfoo
ilyasfoo commented Apr 25, 2024
View reviewed changes
plugins/woocommerce/patterns/coming-soon-entire-site.php
.woocommerce-coming-soon-header, .coming-soon-cover .wp-block-cover__background {
background-color: #bea0f2 !important;
.woocommerce-coming-soon-header {
height: 40px;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Small hack: Fixed header height in order to ensure small modifications will keep the center part relatively stable

@ilyasfoo ilyasfoo requested review from a team, psealock and rjchow April 25, 2024 14:32
@github-actions GitHub Actions
Copy link
Contributor

Hi @psealock, @rjchow, @woocommerce/ghidorah

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

@ilyasfoo ilyasfoo changed the title Try wrapping entire coming soon page under cover block Try wrapping entire coming soon page under cover block to fix layout issue Apr 25, 2024
psealock
psealock reviewed Apr 26, 2024
View reviewed changes
Copy link
Contributor

@psealock psealock left a comment •
edited

Choose a reason for hiding this comment

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

This is working nicely @ilyasfoo.

I have a bit of a refactor currently under review as well which will cause some conflicts. Do you want to give it a shot here or after merge?

plugins/woocommerce-blocks/assets/js/blocks/coming-soon/index.tsx Outdated
}
.woocommerce-coming-soon-header, .coming-soon-cover .wp-block-cover__background {
background-color: ${ color } !important;
Copy link
Contributor

Choose a reason for hiding this comment

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

With the Coming soon block selected, the background color is not longer respecting the selection

image

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good catch!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed in c471e52

@ilyasfoo
: 1708591425:0;wc-cli admin build:watch
e98c911 
Merge remote-tracking branch 'origin/trunk' into fix/lys-attempt-using-cover-block-fix
@psealock psealock mentioned this pull request Apr 26, 2024
Closed
11 tasks
@ilyasfoo
Copy link
Contributor Author

I have #46854 as well which will cause some conflicts. Do you want to give it a shot here or after merge?

@psealock Thanks for the heads up! I think it'll be better to handle after the PR is merged. Would you have that merged soon? I think it looks good to merge with 1 review

@ilyasfoo ilyasfoo mentioned this pull request Apr 26, 2024
Closed
@psealock
Copy link
Contributor

I merged #46854 @ilyasfoo, let me know if any issues arise

@ilyasfoo
Copy link
Contributor Author

ilyasfoo commented Apr 26, 2024 •
edited

I merged #46854 @ilyasfoo, let me know if any issues arise

@psealock Thanks! I've resolved conflicts without issues

Edit: Actually, I noticed a bug with rendering store-only coming soon. Will investigate next week

Edit 2: Hmm, false alarm. Tested again in a fresh JN and no issues found. This PR is ready for review!

psealock
psealock approved these changes Apr 30, 2024
View reviewed changes
Copy link
Contributor

@psealock psealock 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 looking great @ilyasfoo, testing well and code changes look good 🚢

chihsuan
chihsuan approved these changes Apr 30, 2024
View reviewed changes
Copy link
Member

@chihsuan chihsuan left a comment

Choose a reason for hiding this comment

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

Thanks @ilyasfoo. Nice fix. 🚢

@ilyasfoo ilyasfoo merged commit 35c50eb into trunk Apr 30, 2024
46 checks passed
@ilyasfoo ilyasfoo deleted the fix/lys-attempt-using-cover-block-fix branch April 30, 2024 08:57
@github-actions github-actions bot added this to the 9.0.0 milestone Apr 30, 2024
@github-actions github-actions bot added the needs: analysis Indicates if the PR requires a PR testing scrub session. label Apr 30, 2024
@rodelgc rodelgc added status: analysis complete Indicates if a PR has been analysed by Solaris and removed needs: analysis Indicates if the PR requires a PR testing scrub session. labels May 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@psealock psealock psealock approved these changes

@chihsuan chihsuan chihsuan approved these changes

@rjchow rjchow Awaiting requested review from rjchow rjchow was automatically assigned from woocommerce/ghidorah

Assignees
No one assigned
Labels
plugin: woocommerce Issues related to the WooCommerce Core plugin. status: analysis complete Indicates if a PR has been analysed by Solaris
Projects
None yet
Milestone
9.0.0
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@ilyasfoo @psealock @chihsuan @rodelgc