Skip to content

Transform paragraph block to buttons block#28508

Merged
ntsekouras merged 6 commits intoWordPress:masterfrom
hsingyuc:fix/28298
Feb 4, 2021
Merged

Transform paragraph block to buttons block#28508
ntsekouras merged 6 commits intoWordPress:masterfrom
hsingyuc:fix/28298

Conversation

@hsingyuc
Copy link
Copy Markdown
Contributor

Description

Fix #28298
Transform paragraph block to buttons block

How has this been tested?

// Test text with one link

  1. Create text ( ex. Link in Paragraph ) with a link in a paragraph block
  2. Mark Link in Paragraph, click Change block type or style and see if Buttons renders as expected.
  3. Click Buttons and see if the text transforms into a button with the link.

// Test texts with links

  1. Create text ( ex. Link in Paragraph ) with links ( ex. link1 link2 link3 ) in a paragraph block
  2. Mark Link in Paragraph, click Change block type or style and see if Buttons renders as expected.
  3. Click Buttons and see if the text transforms into a button with the first link (link1).

// Test texts without a link

  1. Create text ( ex. Link in Paragraph ) without a link in a paragraph block
  2. Mark Link in Paragraph, click Change block type or style and see if Buttons renders as expected.
  3. Click Buttons and see if the text transforms into a button.

Screenshots

  1. Before

before

paragraph

  1. After

after

button

Types of changes

Checklist:

  • [X ] My code is tested.
  • My code follows the WordPress code style.

@hsingyuc hsingyuc requested a review from ajitbohra as a code owner January 27, 2021 02:53
@mtias mtias added the [Block] Buttons Affects the Buttons Block label Jan 27, 2021
@mtias
Copy link
Copy Markdown
Member

mtias commented Jan 27, 2021

Side note: one thing we need to revise a bit is the order of transformations. Headings and List should probably come first, for example. We might also want to restrict certain transforms to the case where the length of a paragraph block is < than some characters — it doesn't make sense to convert a full paragraph with multiple lines into a button, for example.

@ntsekouras
Copy link
Copy Markdown
Contributor

We might also want to restrict certain transforms

Maybe also checking if a paragraph has more than one links?

@hsingyuc
Copy link
Copy Markdown
Contributor Author

Headings and List should probably come first

It renders based on the usage so I think this is the current expected behavior. If we want to change, this may be a follow-up issue.
螢幕快照 2021-01-27 下午5 08 11

We might also want to restrict certain transforms to the case where the length of a paragraph block is < than some characters

I didn't know there was a way to do this. Any suggestions on checking length before showing the transform option in the transforms list?

Maybe also checking if a paragraph has more than one links?

Do you mean if more than one link then it transforms to multiple buttons or if more than a link then do not transform?

@ntsekouras
Copy link
Copy Markdown
Contributor

It renders based on the usage so I think this is the current expected behavior

Yes, I think this is out of scope for this PR.

I didn't know there was a way to do this. Any suggestions on checking length before showing the transform option in the transforms list?

You can use isMatch function from Block Transforms API: https://developer.wordpress.org/block-editor/developers/block-api/block-transforms/#block

Do you mean if more than one link then it transforms to multiple buttons or if more than a link then do not transform?

I was thinking of not transforming.

@hsingyuc
Copy link
Copy Markdown
Contributor Author

hsingyuc commented Feb 3, 2021

@mtias @ntsekouras Thank you for the feedback! The changes have been pushed. ✌️

Copy link
Copy Markdown
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

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

Good work here @hsingyuc 👍 - thanks for working on this!

I left a couple minor comments/nitpicks, but your code works as expected.

The maximum length for the paragraph to thirty (30) seems a good choice to me, but would like some more feedback about that (@mtias )

@mtias
Copy link
Copy Markdown
Member

mtias commented Feb 3, 2021

The maximum length for the paragraph to thirty (30) seems a good choice to me...

Let's try it, we can always adjust :)

@hsingyuc
Copy link
Copy Markdown
Contributor Author

hsingyuc commented Feb 3, 2021

@ntsekouras Thanks for the tips!! I made the changes.

Copy link
Copy Markdown
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

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

Thank you! 👍

@ntsekouras ntsekouras merged commit 0754564 into WordPress:master Feb 4, 2021
@github-actions github-actions bot added this to the Gutenberg 10.0 milestone Feb 4, 2021
@mtias
Copy link
Copy Markdown
Member

mtias commented Feb 4, 2021

Thanks for working on this @hsingyuc !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Buttons Affects the Buttons Block

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Allow Paragraph Block to Transform to a Buttons Block

3 participants