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

Remove extraneous element from extensions HoC #2334

Merged
merged 6 commits into from
May 23, 2022

Conversation

jrtashjian
Copy link
Member

@jrtashjian jrtashjian commented Mar 21, 2022

Remove extraFeature from animation as well as its implementation. This has been deemed unnecessary as the toolbar might be expected to shift as the block does.

@godaddy-wordpress-bot
Copy link
Contributor

godaddy-wordpress-bot commented Mar 21, 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/                    95.83% 💚
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 48730

@cypress
Copy link

cypress bot commented Mar 21, 2022



Test summary

394 0 2 0


Run details

Project CoBlocks
Status Passed
Commit 1cd68dc
Started May 23, 2022 7:05 PM
Ended May 23, 2022 7:10 PM
Duration 04:44 💡
OS Linux Ubuntu - 20.04
Browser Multiple

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

@AnthonyLedesma
Copy link
Member

There is a single extraFeatures that exists for the animation extension. The extra feature acts to hide the block toolbar while the animation is taking place. I didn't realize the impact of the current design but I think we may want to improve the implementation because the toolbar movement can be jarring. Here is what the extra feature looks like on the master branch.
AnimationTemporaryStatus

And here is the toolbar behavior in this PR.
AnimationTemporaryStatusDisabled

@jrtashjian
Copy link
Member Author

Ahh, that's right! Thanks for pointing this out. I'll see what I can do to restore the functionality while avoiding the extra element.

@AnthonyLedesma
Copy link
Member

@jrtashjian I just found a bug with the extraFeature that I mentioned. Maybe we should consider removing it anyway. I am not sure how we could adjust for this.

Normal
animationExtraFeatureToolbarNormal

Bug if you rush - hides the toolbar forever
animationExtraFeatureToolbarRushed

@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/                    95.83% 💚
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 50666

@jrtashjian jrtashjian marked this pull request as draft April 26, 2022 16:49
@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/                    95.83% 💚
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 53215

@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/                    95.83% 💚
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 53262

@godaddy-wordpress-bot
Copy link
Contributor

godaddy-wordpress-bot commented May 10, 2022

Performance Test Results:

index master remove-extensions-render-feature change %
focus 140.31 130.93 -6.69%
inserterHover 44.62 38.88 -12.86%
inserterOpen 137.76 135.9 -1.35%
inserterSearch 68.51 79.22 15.63%
load 24258.2 22162.1 -8.64%
maxFocus 252.42 194.37 -23%
maxInserterHover 59.25 51.64 -12.84%
maxInserterOpen 524.07 499.7 -4.65%
maxInserterSearch 129.41 129.34 -0.05%
maxType 87.16 76.8 -11.89%
minFocus 113.22 111.33 -1.67%
minInserterHover 36.99 34.33 -7.19%
minInserterOpen 75.16 73.96 -1.6%
minInserterSearch 55.41 52.28 -5.65%
minType 42.62 41.33 -3.03%
type 53.02 49.77 -6.13%

@AnthonyLedesma AnthonyLedesma marked this pull request as ready for review May 11, 2022 14:46
@AnthonyLedesma
Copy link
Member

Tested this in Go, TwentyTwenty, TwentyTwentyOne, and TwentyTwentyTwo.

@fjarrett-godaddy
Copy link
Contributor

@AnthonyLedesma it looks like the performance tests indicate a decent degradation, should we be concerned about this?

@jrtashjian jrtashjian removed the request for review from AnthonyLedesma May 17, 2022 14:49
@jrtashjian
Copy link
Member Author

jrtashjian commented May 17, 2022

I guess I can't leave a review if I'm the original PR author.

The issue still seems to be apparent. If you apply the changes you've made to the branch the-great-migration and add animations to gallery images (like the collage) you'll experience it. Here's a video of the problem element being inserted during the animation.

I wouldn't expect the style tag to cause a reflow but it seems that flex-box is considering it an element in-flow. I'm wondering if hiding the toolbar is really a benefit. It's obviously built to float around as necessary even if the anchor location changes. In my mind that's intended functionality. I'd prefer we just remove this style override so we have a stable content layout.

Kapture.2022-05-17.at.10.58.53.mp4

@AnthonyLedesma
Copy link
Member

I'm wondering if hiding the toolbar is really a benefit. It's obviously built to float around as necessary even if the anchor location changes. In my mind that's intended functionality. I'd prefer we just remove this style override so we have a stable content layout.

At this point, I agree. It would be nice but the truth is that we accomplish it now in a very hacky way. I'll push up the changes that remove this extra feature and its implementation.

@godaddy-wordpress-bot
Copy link
Contributor

Code Coverage: 96.52% 💚

🗂 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/                    95.83% 💚
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/                          96.43% 💚
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 54605

@jrtashjian
Copy link
Member Author

@jrtashjian jrtashjian merged commit ed88733 into master May 23, 2022
@jrtashjian jrtashjian deleted the remove-extensions-render-feature branch May 23, 2022 19:45
@adamf59 adamf59 added this to the Next Release milestone May 24, 2022
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

5 participants