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

Masonry block use inner core/image blocks #2117

Merged
merged 63 commits into from
Dec 7, 2021
Merged

Conversation

AnthonyLedesma
Copy link
Member

@AnthonyLedesma AnthonyLedesma commented Oct 26, 2021

Description

Masonry Block Refactors.

This is moving the Masonry Gallery away from desandro masonry into a pure CSS solution for layout.

New block architecture reflects that of the Core Gallery block in that this implementation uses Core Image inner blocks.

Backward compatible to WP 5.5 by keeping the V1 block around. We conditionally load the V1 block to keep functionality as well as preserve masonry styles in the case of pre 5.6 WordPress.

AC
This criteria has been modified - Notes below.

Screenshots

MasonryCSS

Types of changes

Major changes discarding all of our old CSS and JS in favor of a mirrored core implemntation using hooks. This new method matches the new paradigm and allows us to refactor other galleries to this paradigm more easily.

How has this been tested?

WIP

Checklist:

  • My code is tested
  • My code follows accessibility standards
  • My code has proper inline documentation
  • I've included any necessary tests
  • I've included developer documentation
  • I've added proper labels to this pull request

@AnthonyLedesma AnthonyLedesma added [Status] In Progress Tracking issues with work in progress [Status] Do Not Merge Issues/PRs that should not be merged (yet) labels Oct 26, 2021
@AnthonyLedesma AnthonyLedesma self-assigned this Oct 26, 2021
@AnthonyLedesma AnthonyLedesma linked an issue Oct 26, 2021 that may be closed by this pull request
8 tasks
@jrtashjian
Copy link
Member

Can we change the arrows to point up and down instead of left and right? I think it's a prop we can set.

@godaddy-wordpress-bot
Copy link
Contributor

Code Coverage: 92.96% 💚

🗂 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/dynamic-separator/                  100.00% ✅
src/blocks/events/                             100.00% ✅
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/                    95.54% 💚
src/blocks/gallery-collage/                    100.00% ✅
src/blocks/gallery-masonry/                     79.77% 💛
src/blocks/gallery-masonry/v1/                   5.17% 💔
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/                               100.00% ✅
src/blocks/highlight/                          100.00% ✅
src/blocks/icon/                               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/                                100.00% ✅
src/blocks/row/column/                         100.00% ✅
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% 💛

From Circle CI build 36680

@godaddy-wordpress-bot
Copy link
Contributor

Code Coverage: 92.96% 💚

🗂 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/dynamic-separator/                  100.00% ✅
src/blocks/events/                             100.00% ✅
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/                    95.54% 💚
src/blocks/gallery-collage/                    100.00% ✅
src/blocks/gallery-masonry/                     79.77% 💛
src/blocks/gallery-masonry/v1/                   5.17% 💔
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/                               100.00% ✅
src/blocks/highlight/                          100.00% ✅
src/blocks/icon/                               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/                                100.00% ✅
src/blocks/row/column/                         100.00% ✅
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% 💛

From Circle CI build 36739

@godaddy-wordpress-bot
Copy link
Contributor

Code Coverage: 92.96% 💚

🗂 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/dynamic-separator/                  100.00% ✅
src/blocks/events/                             100.00% ✅
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/                    95.54% 💚
src/blocks/gallery-collage/                    100.00% ✅
src/blocks/gallery-masonry/                     79.77% 💛
src/blocks/gallery-masonry/v1/                   5.17% 💔
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/                               100.00% ✅
src/blocks/highlight/                          100.00% ✅
src/blocks/icon/                               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/                                100.00% ✅
src/blocks/row/column/                         100.00% ✅
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% 💛

From Circle CI build 36779

@godaddy-wordpress-bot
Copy link
Contributor

Code Coverage: 92.96% 💚

🗂 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/dynamic-separator/                  100.00% ✅
src/blocks/events/                             100.00% ✅
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/                    95.54% 💚
src/blocks/gallery-collage/                    100.00% ✅
src/blocks/gallery-masonry/                     79.77% 💛
src/blocks/gallery-masonry/v1/                   5.17% 💔
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/                               100.00% ✅
src/blocks/highlight/                          100.00% ✅
src/blocks/icon/                               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/                                100.00% ✅
src/blocks/row/column/                         100.00% ✅
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% 💛

From Circle CI build 36874

@olafleur-godaddy
Copy link
Member

Not sure if it's expected behaviour, but when adding multiple images at the same time, the gallery reloads a few times (I think the number of images added) before stabilizing.

Copy link
Member

@olafleur-godaddy olafleur-godaddy 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 monumental work, good job! :)

@olafleur-godaddy
Copy link
Member

Whenever you feel ready, you can merge, as the failing tests for OpenTable are not related to your PR :)

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.

Impressive work!

Copy link
Contributor

@jlemay-godaddy jlemay-godaddy left a comment

Choose a reason for hiding this comment

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

Good job! Code review done. I'll test it IRL now :)

src/blocks/gallery-masonry/controls.js Outdated Show resolved Hide resolved
babel.config.json Outdated Show resolved Hide resolved
Comment on lines +233 to +234
Object.prototype.toString.call( selectedImages ) ===
'[object FileList]';
Copy link
Contributor

Choose a reason for hiding this comment

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

First time I see something like that. Doesn't mean it's wrong

src/blocks/gallery-masonry/styles/editor.scss Show resolved Hide resolved
src/blocks/gallery-masonry/styles/editor.scss Show resolved Hide resolved
src/blocks/gallery-masonry/styles/style.scss Show resolved Hide resolved
src/blocks/gallery-masonry/styles/style.scss Show resolved Hide resolved
src/blocks/gallery-masonry/styles/style.scss Show resolved Hide resolved
src/blocks/gallery-masonry/v1/block.json Outdated Show resolved Hide resolved
src/components/block-gallery/image-constants.js Outdated Show resolved Hide resolved
@godaddy-wordpress-bot
Copy link
Contributor

Code Coverage: 92.96% 💚

🗂 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/dynamic-separator/                  100.00% ✅
src/blocks/events/                             100.00% ✅
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/                    95.54% 💚
src/blocks/gallery-collage/                    100.00% ✅
src/blocks/gallery-masonry/                     79.77% 💛
src/blocks/gallery-masonry/v1/                   5.17% 💔
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/                               100.00% ✅
src/blocks/highlight/                          100.00% ✅
src/blocks/icon/                               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/                                100.00% ✅
src/blocks/row/column/                         100.00% ✅
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% 💛

From Circle CI build 37121

@godaddy-wordpress-bot
Copy link
Contributor

Code Coverage: 92.96% 💚

🗂 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/dynamic-separator/                  100.00% ✅
src/blocks/events/                             100.00% ✅
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/                    95.54% 💚
src/blocks/gallery-collage/                    100.00% ✅
src/blocks/gallery-masonry/                     79.77% 💛
src/blocks/gallery-masonry/v1/                   5.17% 💔
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/                               100.00% ✅
src/blocks/highlight/                          100.00% ✅
src/blocks/icon/                               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/                                100.00% ✅
src/blocks/row/column/                         100.00% ✅
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% 💛

From Circle CI build 37131

@AnthonyLedesma
Copy link
Member Author

Pushed up fixes to address the formatting feedback. Also found out that the stacked jest tests were formatting incorrectly causing the results not to be correct. I fixed that here too.

@godaddy-wordpress-bot
Copy link
Contributor

Code Coverage: 92.96% 💚

🗂 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/dynamic-separator/                  100.00% ✅
src/blocks/events/                             100.00% ✅
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/                    95.54% 💚
src/blocks/gallery-collage/                    100.00% ✅
src/blocks/gallery-masonry/                     79.77% 💛
src/blocks/gallery-masonry/v1/                   5.17% 💔
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/                               100.00% ✅
src/blocks/highlight/                          100.00% ✅
src/blocks/icon/                               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/                                100.00% ✅
src/blocks/row/column/                         100.00% ✅
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% 💛

From Circle CI build 37152

@AnthonyLedesma AnthonyLedesma merged commit fac65d4 into master Dec 7, 2021
@AnthonyLedesma AnthonyLedesma deleted the try/masonry-grid branch December 7, 2021 16:41
@olafleur-godaddy olafleur-godaddy added this to the 2.20.0 milestone Jan 24, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Status] Needs Review Tracking pull requests that need another set of eyes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ISBAT use a Masonry Gallery block that is not based on masonry.desandro.com
6 participants