Pullquote: add block support

[ramonjd]

Description

This PR builds on top of #30124, which adds border, color and style block supports.

Furthermore, because the new block supports already offers the controls we need to style the pullquote, the current controls are not required and we have therefore removed those and also the styles/border/classes logic.

Part of #28913

⚠️ #30124 must land before this PR.

cc @aaronrobertshaw

❓ A future iteration could see us also removing the block's styles and adding appropriate deprecations. Given that we can now achieve border and background variations using block supports, if we allowed text alignment of both the blockquote and citation elements, I believe the block's styles would become redundant.

How has this been tested?

Manually, in the editor.

Because this PR deprecates the current version of Pullquote, we've updated the fixtures (version 4 is the last previous version).

Check that fixtures are valid:

npm run fixtures:regenerate test/integration/full-content/full-content.test.js

And by pasting current fixture block code into the editor and making sure a valid transform takes place.

Check in a native mobile device that the block works as intended.

Screenshots

Types of changes

This is a non-breaking change that adds experimental border and color block support to the pullquote block.

Block support controls supersede the block's original controls, so we have removed them. So too, there's now no longer any need to differentiate between the usage of mainColor for background and border, since we can control each independently.

We've also added a deprecation (v4).

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[oandregal]

This PR is doing two things: add support for border properties that depends on #30124 + remove the block color handling in favor of the hook. Can we split it up in two separate PR so it's easier to review and so quicker to land?

[ramonjd]

This PR is doing two things: add support for border properties that depends on #30124 + remove the block color handling in favor of the hook. Can we split it up in two separate PR so it's easier to review and so quicker to land?

Thanks, I appreciate the quick feedback @nosolosw 🙇

I agree with you, nevertheless I believe this block is a special case because, at present, the background colour control determines both the border colour and background colour, depending on which block style we select.

It sets a single attribute for Main color, so replacing that with controls whose label communicates "Background color" only would be confusing UX.

It would be convenient to replace the block controls with the colours hook, if we could also edit the background label.

It would still require some refactoring and a new deprecation.

An alternative would be to add block supports for colour using the hook, and then manually add border controls to the InspectorControls.

That would, however, also demand a refactor of the current mainColor logic, as well as an addition of new a deprecation. Not to mention all of this again when we decide to add border supports.

In my view I don't think we'd make things any easier for reviewers or users of the block if we were to undergo such staged changes.

Here we have the opportunity to clean things up by a fantastic amount.

It's very likely that I'm missing something however 😄 so I'd welcome ideas if folks have a smoother path towards converting pullquote to use block supports.

Thank you!!

[aaronrobertshaw]

This is testing well for me 👍

Old versions of the pullquote block with colors are being successfully migrated.

Use of the block supports here really does clean up the block's code as well as provide enhanced functionality to the user. Looks good ✨

There are a few minor things that might be worth tidying up. The first is only turning on the custom border supports for the pullquote block's context rather than all blocks.

The second is the "Solid Color" block style. It still feels like that should be renamed given it doesn't affect colors at all now. Obviously, maintaining the block style CSS class for backwards compatibility might be an issue. I'm interested to hear what others think is the best approach here.