[RNMobile] Pullquote block

[ceyhun]

Description

Adds support for Pullquote block in React Native mobile Gutenberg.

Known issues:

• Quote and citation doesn't center on Android
• Quote placeholder is not visible on Android
• Citation uppercase (text-transform: uppercase) doesn't work

Wanted to get an initial feedback for this so I've put this block under dev flag for now. Planning to handle these issues in a follow-up PR.

How has this been tested?

1. Add Pullquote block from inserter menu
2. Type quote
3. Type citation

Screenshots

iOS (light)	iOS (dark)	Android

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• 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.

[iamthomasbishop]

@ceyhun This is looking pretty solid already — nice work! I jotted down some feedback based on the screenshots above.

Things you mentioned:

• Centered text on Android: known issue and a blocker
• Non-uppercase text in citation: I wouldn't stress about this for v1, as it doesn't feel (visually) as a bug per sé. Nonetheless, we will likely need text-transform elsewhere so it's worth diagnosing

Notes:

• Is the placeholder label for citation visible when the block is selected, like on the quote block? If not, if should be
• What are the values for padding-top and bottom on the inside of the block? (Seems a bit much, but could appear larger because the quote itself is short)
• This applies to both Quote and this block: we might want to increase the font size of the quote a bit to add more distinction between it and the citation. What is the current value here? And is it the same size as quoted text on the Quote block, which I believe is 16?
• Can we add a slight bit of inner padding on the inside of the block? Let's try 16px padding left/right as a start.

[SergioEstevao]

Will it be possible to not have an edit.native.js file like we did for the quote block?

Can we try to abstract the surround HTML/CSS on the web edit.js file to custom components that will have specific behaviour in the web and in the native versions?

[ceyhun]

@iamthomasbishop

• Is the placeholder label for citation visible when the block is selected, like on the quote block? If not, if should be

Yes and hidden when not selected.

• What are the values for padding-top and bottom on the inside of the block? (Seems a bit much, but could appear larger because the quote itself is short)

48px

• This applies to both Quote and this block: we might want to increase the font size of the quote a bit to add more distinction between it and the citation. What is the current value here? And is it the same size as quoted text on the Quote block, which I believe is 16?

Yes it is 16, made it 20px now.

• Can we add a slight bit of inner padding on the inside of the block? Let's try 16px padding left/right as a start.

👍

Static	Selected

[ceyhun]

@SergioEstevao

Will it be possible to not have an edit.native.js file like we did for the quote block?

Can we try to abstract the surround HTML/CSS on the web edit.js file to custom components that will have specific behaviour in the web and in the native versions?

I tried to use the web's edit.js for Pullquote on mobile and to create a new primitive for Figure and using the already created BlockQuotation (which was used in Quote block), but applying different styles for web and mobile seems quite difficult with the current setup. I thought maybe to create these primitives in /pullquote folder and only style them for Pullquote in this case.

And there's also a PanelColorSettings (which is not yet ready for mobile) for which I thought maybe I can ignore by using Platform.OS === 'web'.

What do you think?

[iamthomasbishop]

@ceyhun Per our discussion in Slack, I've updated the design slightly after building it in Figma.

A few notes:

• I think we can safely use 18px for the quote text on both Quote and Pullquote blocks
• Can we make the quote text italic? This adds some clarity and separation and addresses a concern I've heard from a few folks (note: Quote block should also get this style)
• On pullquote, I ended up using the following spacings method: 3px borders on top/bottom, and 21px between each border and the center text section (that looks like this: https://cloudup.com/cYZq6LW6WBw)

Here is the block blueprint for reference (which you can find here):

You can safely ignore the border color and keep what you have already, because I am using some colors from an upcoming colors refresh project.

[SergioEstevao]

And there's also a PanelColorSettings (which is not yet ready for mobile) for which I thought maybe I can ignore by using Platform.OS === 'web'.

Can we implement it using a nil version, we normally prefer to have that than trying to switch out big parts of code with Platform.OS checks.

[ceyhun]

@iamthomasbishop

• Can we make the quote text italic? This adds some clarity and separation and addresses a concern I've heard from a few folks (note: Quote block should also get this style)

I would prefer to do this later as it could be a bit complex. You can already apply bold/italic to this text via the toolbar. Does this mean we would save the content with italic styling applied (like if italic was selected from the toolbar) so later-on when you open it on web would you see italic again? Or is it just that we show it italic but the toolbar doesn't highlight the italic icon?

[ceyhun]

@SergioEstevao

Can we implement it using a nil version, we normally prefer to have that than trying to switch out big parts of code with Platform.OS checks.

I tried a () => null implementation for <PanelColorSettings> for native but it still resulted in settings button being rendered because it's rendered in <InspectorControls> and the logic to show the settings button is this: https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inspector-controls/index.native.js#L23

So instead I tried to do a non-null implementation and added a Color settings are coming soon. message. I stole it from native Button's implementation. But having only this message in settings seems a bit weird and I'm not sure what could be another solution to this 🤔

Button	Pullquote

[iamthomasbishop]

I would prefer to do this later as it could be a bit complex.

That's fine, in fact, I think it might actually be better to not do italic here because it can get messy depending on how the theme styles the quote by default. I will adjust the block design to use regular instead of italic. 👍

[iamthomasbishop]

But having only this message in settings seems a bit weird and I'm not sure what could be another solution to this 🤔

We can remove the settings toggle from the inline toolbar until we have color support. Agreed it's odd, will update the design accordingly.

[iamthomasbishop]

Updated design:

Note: we don't have the ••• menu yet, so that would actually be the trash icon 😄

[ceyhun]

Updated screenshots in the description.

[ceyhun]

Re-opened PR with a branch from gutenberg repo: #20952