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

Fix Click to Tweet Font-Size controls and refactor to v2 #2268

Merged
merged 12 commits into from Feb 10, 2022

Conversation

AnthonyLedesma
Copy link
Member

@AnthonyLedesma AnthonyLedesma commented Feb 4, 2022

Description

Click to Tweet block V2 API change.
This change opts the block into fontSize controls provided by blockSupports in the block.json file.

Deprecating from old fontSize controls are not working as expected. For whatever reason, the attributes will not migrate into the new object format and instead, we are forced to replace the block in the editor. Deprecated blocks come in with old attributes and are not correctly migrating attributes to new properties defined in the deprecated migration function.

Here are the attempted isEligible and migrate functions that were attempted and should work but do not properly transform the attributes to the new style.

isEligible

isEligible: ( { customFontSize } ) => customFontSize && 'number' === typeof customFontSize,

migrate

		migrate( attributes ) {
			console.log( 'migrate function is firing' );
			const { customFontSize } = attributes;
			return {
				...attributes,
				style: {
					typography: {
						fontSize: `${ customFontSize }px`,
					},
				},
			};
		},

Because blocks do not properly deprecate attributes into new attribute format we are forced to hack around the deprecation mechanism by replacing the block in the editor with the new style (or updating attributes to the new style manually).

This fix is similar to that of the Masonry block where attributes are not properly migrated and we are forced to replace the block with the correct attribute format.

Screenshots

clickToTweetFont

Types of changes

JavaScript

How has this been tested?

Tested manually using old block markup.

Old Markup - v1

<!-- wp:coblocks/click-to-tweet {"customFontSize":40} -->
<blockquote class="wp-block-coblocks-click-to-tweet" style="font-size:40px"><p class="wp-block-coblocks-click-to-tweet__text" style="font-size:40px">Hello</p><a class="wp-block-coblocks-click-to-tweet__twitter-btn" href="http://twitter.com/share?&amp;text=Hello&amp;url=[post_permalink]" target="_blank" rel="noopener noreferrer">Tweet</a></blockquote>
<!-- /wp:coblocks/click-to-tweet -->

Old Markup - v1

<!-- wp:coblocks/click-to-tweet {"customFontSize":80} -->
<blockquote class="wp-block-coblocks-click-to-tweet" style="font-size:80px"><p class="wp-block-coblocks-click-to-tweet__text" style="font-size:80px">Hello</p><a class="wp-block-coblocks-click-to-tweet__twitter-btn" href="[http://twitter.com/share?&amp;text=Hello&amp;url=[post_permalink]](http://twitter.com/share?&text=Hello&url=[post_permalink])" target="_blank" rel="noopener noreferrer">Tweet</a></blockquote>
<!-- /wp:coblocks/click-to-tweet -->

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 self-assigned this Feb 4, 2022
@godaddy-wordpress-bot
Copy link
Contributor

godaddy-wordpress-bot commented Feb 4, 2022

@cypress
Copy link

cypress bot commented Feb 4, 2022



Test summary

398 0 2 0


Run details

Project CoBlocks
Status Passed
Commit 4630558
Started Feb 10, 2022 6:11 PM
Ended Feb 10, 2022 6:15 PM
Duration 04:04 💡
OS Linux Debian - 11.1
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

@godaddy-wordpress-bot
Copy link
Contributor

godaddy-wordpress-bot commented Feb 4, 2022

Performance Test Results:

index master try-click-to-tweet-v2 change %
focus 123.73 132.81 7.34%
inserterHover 42.03 36.67 -12.75%
inserterOpen 112.22 133.83 19.26%
inserterSearch 86.7 95.52 10.17%
load 23038.1 25150.4 9.17%
maxFocus 178.66 277.85 55.52%
maxInserterHover 107.6 51.72 -51.93%
maxInserterOpen 442.17 579.49 31.06%
maxInserterSearch 184.09 208.14 13.06%
maxType 78.29 81.53 4.14%
minFocus 99.47 100.24 0.77%
minInserterHover 33.63 32.49 -3.39%
minInserterOpen 69.21 72.32 4.49%
minInserterSearch 53.31 54.5 2.23%
minType 38.72 37.82 -2.32%
type 45.86 46.44 1.26%

@godaddy-wordpress-bot
Copy link
Contributor

Code Coverage: 96.66% 💚

🗂 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/                             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/                    96.43% 💚
src/blocks/gallery-collage/                    100.00% ✅
src/blocks/gallery-masonry/                     79.77% 💛
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% 💛

From Circle CI build 43553

@AnthonyLedesma AnthonyLedesma changed the title Fix Click to Tweet and refactor to v2 Fix Click to Tweet Font-Size controls and refactor to v2 Feb 8, 2022
@AnthonyLedesma AnthonyLedesma marked this pull request as ready for review February 8, 2022 18:43
@godaddy-wordpress-bot
Copy link
Contributor

Code Coverage: 96.66% 💚

🗂 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/                             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/                    96.43% 💚
src/blocks/gallery-collage/                    100.00% ✅
src/blocks/gallery-masonry/                     79.77% 💛
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% 💛

From Circle CI build 43632

@godaddy-wordpress-bot
Copy link
Contributor

Code Coverage: 96.66% 💚

🗂 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/                             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/                    96.43% 💚
src/blocks/gallery-collage/                    100.00% ✅
src/blocks/gallery-masonry/                     79.77% 💛
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% 💛

From Circle CI build 43646

@@ -1,3 +1,4 @@
/* eslint-disable sort-keys */
Copy link
Member

Choose a reason for hiding this comment

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

why do you disable the sort-keys and then sort them anyway?

Copy link
Member Author

Choose a reason for hiding this comment

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

why do you disable the sort-keys and then sort them anyway?

This gave me a good laugh! Thank you for calling me out here. I think what I did was sort a few of them realize that the file also wanted me to sort all the old deprecations.

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.

Looks great to me! I have tested in TT2 and Go with WP 5.9 and in WP 5.8 and it always work. Good job!

@olafleur-godaddy olafleur-godaddy removed the request for review from olafleur February 8, 2022 21:50
@godaddy-wordpress-bot
Copy link
Contributor

Code Coverage: 96.66% 💚

🗂 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/                             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/                    96.43% 💚
src/blocks/gallery-collage/                    100.00% ✅
src/blocks/gallery-masonry/                     79.77% 💛
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% 💛

From Circle CI build 44378

@AnthonyLedesma AnthonyLedesma merged commit 0dac543 into master Feb 10, 2022
@AnthonyLedesma AnthonyLedesma deleted the try-click-to-tweet-v2 branch February 10, 2022 18:28
@olafleur-godaddy olafleur-godaddy added this to the Next Release milestone Feb 22, 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

4 participants