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

try fixing that v1 markup on published pages #2290

Merged
merged 4 commits into from
Feb 25, 2022
Merged

Conversation

AnthonyLedesma
Copy link
Member

@AnthonyLedesma AnthonyLedesma commented Feb 23, 2022

Description

In cases where users have old V1 masonry markup already saved and on published pages we have broken galleries. This fallback will allow for the old Masonry markup to continue to function as expected.

Note
We ended up coming across a few issues and edge cases with regex that will adequately match the V1 masonry block.

There is one known edge case that will cause users to superfluously load Masonry/jQuery scripts.

Edge Case
If a user has V2 Masonry > (Offset Gallery OR Carousel Gallery) > V2 Masonry.

  • This will cause deprecated masonry and jQuery scripts to load. There are no negative side effects aside from superfluous network requests.

Screenshots

Before
image

After
image

Types of changes

Re-Introduce jQuery as a fallback :(

How has this been tested?

Tested manually.

@godaddy-wordpress-bot
Copy link
Contributor

godaddy-wordpress-bot commented Feb 23, 2022

@godaddy-wordpress-bot
Copy link
Contributor

Code Coverage: 96.65% 💚

🗂 Folder Coverage
src/blocks/accordion/                          100.00% ✅
src/blocks/accordion/accordion-item/           100.00% ✅
src/blocks/alert/                              100.00% ✅
src/blocks/author/                             100.00% ✅
src/blocks/buttons/                            100.00% ✅
src/blocks/click-to-tweet/                     100.00% ✅
src/blocks/counter/                            100.00% ✅
src/blocks/dynamic-separator/                  100.00% ✅
src/blocks/events/                              96.43% 💚
src/blocks/events/event-item/                  100.00% ✅
src/blocks/faq/                                100.00% ✅
src/blocks/faq/faq-item/                       100.00% ✅
src/blocks/features/                           100.00% ✅
src/blocks/features/feature/                   100.00% ✅
src/blocks/food-and-drinks/                    100.00% ✅
src/blocks/food-and-drinks/food-item/          100.00% ✅
src/blocks/form/fields/checkbox/               100.00% ✅
src/blocks/form/fields/date/                   100.00% ✅
src/blocks/form/fields/hidden/                 100.00% ✅
src/blocks/form/fields/name/                   100.00% ✅
src/blocks/form/fields/phone/                  100.00% ✅
src/blocks/form/fields/radio/                  100.00% ✅
src/blocks/form/fields/select/                 100.00% ✅
src/blocks/form/fields/text/                   100.00% ✅
src/blocks/form/fields/textarea/               100.00% ✅
src/blocks/form/fields/website/                100.00% ✅
src/blocks/gallery-carousel/                    96.43% 💚
src/blocks/gallery-collage/                    100.00% ✅
src/blocks/gallery-masonry/                     80.10% 💚
src/blocks/gallery-offset/                     100.00% ✅
src/blocks/gallery-stacked/                    100.00% ✅
src/blocks/gif/                                100.00% ✅
src/blocks/gist/                               100.00% ✅
src/blocks/hero/                                92.56% 💚
src/blocks/highlight/                          100.00% ✅
src/blocks/logos/                              100.00% ✅
src/blocks/map/                                100.00% ✅
src/blocks/media-card/                         100.00% ✅
src/blocks/opentable/                          100.00% ✅
src/blocks/post-carousel/                      100.00% ✅
src/blocks/posts/                              100.00% ✅
src/blocks/pricing-table/                      100.00% ✅
src/blocks/pricing-table/pricing-table-item/   100.00% ✅
src/blocks/row/                                 94.43% 💚
src/blocks/row/column/                          88.54% 💚
src/blocks/services/                           100.00% ✅
src/blocks/services/service/                   100.00% ✅
src/blocks/shape-divider/                      100.00% ✅
src/blocks/share/                               81.25% 💚
src/blocks/social-profiles/                     79.64% 💛
src/blocks/testimonials/                        87.50% 💚
src/blocks/testimonials/testimonial/           100.00% ✅

From Circle CI build 46426

@cypress
Copy link

cypress bot commented Feb 23, 2022



Test summary

200 0 1 0


Run details

Project CoBlocks
Status Passed
Commit 57bde08
Started Feb 24, 2022 5:23 PM
Ended Feb 24, 2022 5:27 PM
Duration 04:18 💡
OS Linux Ubuntu - 20.04
Browser Firefox 97

View run in Cypress Dashboard ➡️


This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

@godaddy-wordpress-bot
Copy link
Contributor

Code Coverage: 96.65% 💚

🗂 Folder Coverage
src/blocks/accordion/                          100.00% ✅
src/blocks/accordion/accordion-item/           100.00% ✅
src/blocks/alert/                              100.00% ✅
src/blocks/author/                             100.00% ✅
src/blocks/buttons/                            100.00% ✅
src/blocks/click-to-tweet/                     100.00% ✅
src/blocks/counter/                            100.00% ✅
src/blocks/dynamic-separator/                  100.00% ✅
src/blocks/events/                              96.43% 💚
src/blocks/events/event-item/                  100.00% ✅
src/blocks/faq/                                100.00% ✅
src/blocks/faq/faq-item/                       100.00% ✅
src/blocks/features/                           100.00% ✅
src/blocks/features/feature/                   100.00% ✅
src/blocks/food-and-drinks/                    100.00% ✅
src/blocks/food-and-drinks/food-item/          100.00% ✅
src/blocks/form/fields/checkbox/               100.00% ✅
src/blocks/form/fields/date/                   100.00% ✅
src/blocks/form/fields/hidden/                 100.00% ✅
src/blocks/form/fields/name/                   100.00% ✅
src/blocks/form/fields/phone/                  100.00% ✅
src/blocks/form/fields/radio/                  100.00% ✅
src/blocks/form/fields/select/                 100.00% ✅
src/blocks/form/fields/text/                   100.00% ✅
src/blocks/form/fields/textarea/               100.00% ✅
src/blocks/form/fields/website/                100.00% ✅
src/blocks/gallery-carousel/                    96.43% 💚
src/blocks/gallery-collage/                    100.00% ✅
src/blocks/gallery-masonry/                     80.10% 💚
src/blocks/gallery-offset/                     100.00% ✅
src/blocks/gallery-stacked/                    100.00% ✅
src/blocks/gif/                                100.00% ✅
src/blocks/gist/                               100.00% ✅
src/blocks/hero/                                92.56% 💚
src/blocks/highlight/                          100.00% ✅
src/blocks/logos/                              100.00% ✅
src/blocks/map/                                100.00% ✅
src/blocks/media-card/                         100.00% ✅
src/blocks/opentable/                          100.00% ✅
src/blocks/post-carousel/                      100.00% ✅
src/blocks/posts/                              100.00% ✅
src/blocks/pricing-table/                      100.00% ✅
src/blocks/pricing-table/pricing-table-item/   100.00% ✅
src/blocks/row/                                 94.43% 💚
src/blocks/row/column/                          88.54% 💚
src/blocks/services/                           100.00% ✅
src/blocks/services/service/                   100.00% ✅
src/blocks/shape-divider/                      100.00% ✅
src/blocks/share/                               81.25% 💚
src/blocks/social-profiles/                     79.64% 💛
src/blocks/testimonials/                        87.50% 💚
src/blocks/testimonials/testimonial/           100.00% ✅

From Circle CI build 46457

Copy link
Member

@jrtashjian jrtashjian left a comment

Choose a reason for hiding this comment

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

Great job figuring this one out! Minor change requested and then you can merge it.

* @return boolean True when post content contains a v1 Masonry block.
*/
public function has_masonry_v1_block() {
$v1_regex = '/<!-- wp:coblocks\/gallery-masonry.*|\n*(coblocks-gallery--item).*|\n*<!-- \/wp:coblocks\/gallery-masonry -->/m';
Copy link
Member

Choose a reason for hiding this comment

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

You shouldn't need the multi-line flag (/m) here because you're not using the beginning string (^) and end of string ($) modifiers. Just the slash without any flags would work.

Copy link
Member

Choose a reason for hiding this comment

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

Posting here for reference a possible new regex so we can simplify the function: https://regex101.com/r/xESuJM/1

/<!--\s+?wp:coblocks\/gallery-masonry[\s\S]*?coblocks-gallery--item/

Copy link
Member

Choose a reason for hiding this comment

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

This would also work:

/<!--\s+?wp:coblocks\/gallery-masonry.*?coblocks-gallery--item/s

Comment on lines +504 to +505
preg_match_all( $v1_regex, get_the_content(), $matches );
return isset( $matches[0] ) && isset( $matches[0][2] ) && ! empty( $matches[0][2] );
Copy link
Member

Choose a reason for hiding this comment

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

We don't need to store and perform conditions on any of the matches, we just want to know if there is a match. This can be simplified with:

return preg_match( $v1_regex, get_the_content() );

@AnthonyLedesma
Copy link
Member Author

We ended up coming across a few issues and edge cases with regex that will adequately match the V1 masonry block.

There is one known edge case that will cause users to superfluously load Masonry/jQuery scripts.

Edge Case
If a user has V2 Masonry > (Offset Gallery OR Carousel Gallery) > V2 Masonry.

  • This will cause deprecated masonry and jQuery scripts to load. There are no negative side effects aside from superfluous network requests.

@AnthonyLedesma AnthonyLedesma dismissed jrtashjian’s stale review February 25, 2022 19:15

Deciding to keep changes after discussion

@AnthonyLedesma AnthonyLedesma added this to the Next Release milestone Feb 25, 2022
@AnthonyLedesma AnthonyLedesma merged commit 8b92525 into master Feb 25, 2022
@AnthonyLedesma AnthonyLedesma deleted the try-fix-masonry-v1 branch February 25, 2022 19:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants