Block audit: Paragraph

[sarahmonster]

Note: We'll be doing these audits in waves and editing this as we work through the blocks, so this text will be updated and fleshed out as we progress.

Overview

Name: Paragraph
Icon:

Description: Add some basic text
Category: Common blocks
CSS class: None normally, uses .has-drop-cap when it has a drop cap
Can be converted to: Heading, list, quote, preformatted, subheading, verse

Empty/placeholder state

This block shows just a prompt as a placeholder, to facilitate "just start writing":

These are placeholders/hints for Gutenberg as a whole that sort of relate to the paragraph block, since it's the default:

Primary (toolbar) settings

Alignment, bold, italic, strikethrough, link

Secondary (sidebar) settings

Text settings: custom size, drop cap.
Background color
Text color

Frontend appearance

Gutenberg starter theme:

twentyseventeen:

twentyten:

Documentation

No devdocs in https://github.com/WordPress/gutenberg/tree/master/core-blocks/paragraph

Suggestion for user-facing docs:

Performance on mobile

Accessibility

Bugs/errors

• Text settings is a vague heading for the first group of settings. Drop cap looks like it's really tightly spaced into the custom size, mostly because of the toggle placement, which makes it hard to visually discern the options. Recommend instead making Drop cap its own section here.

• There are three different controls here for text size: S|M|L|XL, a slider, and a numerical input. I'm guessing the input is for accessibility purposes. What about nixing either the slider or the S|M|L options?

• Floating drop cap is problematic. (Paragraph block: Floating drop-cap is problematic #8447)

• Disappearing drop cap is also problematic. (Disappearing drop cap causes jumpy behaviour #11119)

• When linking a bit of text, the text being linked loses its highlight. (Insert link: the link selection disappears when entering a link #6156)

• "This color combination may be hard for people to read...." notice appears after setting the background colour under the text colour heading.

[ZebulanStanphill]

Image appears because it has a keyword defined containing "p"... probably "picture".

I think there was a change at some point to make the current block not show up in the slash inserter, since it would be redundant. It might just be hardcoded to the Paragraph block, though, which would not be a good thing.

I think it is weird that the Paragraph block has text color settings, yet the Heading and List blocks do not. These 3 are usually used together in the context of page building, and because of that I think that all 3 blocks should have text color and background color settings, or else none of them should have color settings. I would prefer the former. I would say that the Verse block should also have text color options, but I do not feel as strongly about that one. See also: #8171.

[paulwilde]

This doesn't appear in the slash inserter—should it?

The inserter already is the paragraph block, so it wouldn't makes sense to convert it into itself.

[bph]

When I have a paragraph with a blue background the highlighting is invisible, when you want to replace a string...
http://recordit.co/lE7Nvtt2r5

[ZebulanStanphill]

@bph I made an issue for that: #7967.

[sarahmonster]

All issues here have been filed as individual issues, so I'm going to go ahead and close out this tracking bug. Feel free to comment on if I missed anything, or open new issues as needed! 💪