Shortcode block

[Tug]

Add support for shortcode block

[pinarol]

@iamthomasbishop Shortcode is one of the blocks in our next list. I am adding this to Gutenpages board to start in ~2-3 weeks. Would you like to share some designs for the mobile version? It looks pretty simple on web so we can simply try to imitate it as well.

[iamthomasbishop]

Will do! I'll share some initial designs in the next day or 2.

[iamthomasbishop]

@pinarol Here's a first pass, using the same styling as the code block:

Some notes:

• I think re-using the text input style is a good thing, but we might want a label or icon (seen in this mock right above the text input) to distinguish between code, pre, and shortcode. The distinction between the code-based ones (code/pre) and shortcode is more necessary, imo so I explored it for this block
• There are no block settings on this block, so I've excluded a bottom sheet

[iamthomasbishop]

Exploring another option, with the shortcode label inside the text area:

[pinarol]

Both designs seem ok to me, i find it really hard to choose between 2. Technically the 1st one is easier but I don't expect a big challenge from 2 either.

[iamthomasbishop]

Ok, let’s roll with the first one. It does add a part to the standard block design component, or adds a variant in a way, but it is more parsable/balanced visually.