Multi-select: add a toolbar with formatting options and/or more transform choices when you have selected multiple blocks

[bkjproductions]

The new editor has only two choices when converting blocks
It used to be you could convert multiple paragraphs to H1, H2, ordered list, unordered list, pre-formatted, bold, italic, etc. at once. Now you only have two choices. (And it is not as easy to make a selection of multiple paragraphs; I used to be able to simply drag from the first paragraph to the last paragraph, and now I must shift-click boxes.)

To Reproduce
Steps to reproduce the behavior:

1. Create some paragraphs. Each time you hit return you get a new "block."
2. For whatever reason, you want to change them all to H2.
3. Shift click those paragraphs with the mouse, so you create a selection of several blocks.
4. In the upper left corner of the selection there should be a sort of P-looking graphic symbol that means "paragraph"
5. Hover over that symbol and you see "Transform to:" and you get two options, List and Quote.
6. You can't convert to H2.
7. In the sidebar area on the right, there is an odd bit of text that says "Coming Soon."
8. Also it is curious as to why the new editor does not seem to indicate typos the same way; the word "system" was spelled "sytem" and it is not indicated in the new editor, while the old editor does. (Maybe the blocks are a different type of element to the browser?)

Expected behavior
In most editors, either web-based or desktop standalone, I can easily convert to different formatting by selecting a region and then choosing a menu that is visible. (Selecting the text typically requires just a click and drag without the use of the keyboard at the same time, so this may be an accessibility issue as well.) Other standard options include bold, italic, justification, lists (order or unordered), block quote, links, heading size, etc. This is very limiting for anyone who is expecting ease of use.

Screenshots
One screenshot shows several paragraphs selected, with the limited choices.
The other screenshot shows the "Classic" editor and a wider array of choices.

Desktop (please complete the following information):

• OS: Windows 10 or Mac OSX
• Browser: Chrome
• Version: 3.4 of Gutenberg under WordPress 4.9.8

**Smartphone: **

• n/a

[designsimply]

Tested and confirmed that there is currently not a formatting toolbar (heading, bold, italics, alignment, etc.) for multi-selected blocks and there are only two transform options (list, quote) when you have multi-selected several paragraph blocks.

^{Tested with WordPress 4.9.8 and Gutenberg 3.4.0 using Firefox 61.0.1 on macOS 10.13.6.}

[padraigobeirn]

I was about to open my own ticket for this but glad to see that it's here already. All online and offline editors I've used allow for multi-paragraph selection for formatting. +1 for this request.

[chrisvanpatten]

I had a client ask about this today; definitely would love to see this happen.

[melchoyce]

Would love to see this happen as well, it's been a pain point for me when trying out different layouts for pages. Would be great to see it tie into the group work, as well — for example, being able to change the alignment of everything in a group at once.

[lubieowoce]

any updates on this? or plugins that offer something like it?

[lubieowoce]

i hacked up a quick tool for wrangling paragraphs and other core text blocks (align/format/merge):
https://github.com/lubieowoce/gutenberg-multi-edit

update - formats sort-of work too:

i could release it as a plugin if anyone's interested. i'll probably keep it to core text blocks for now because it's easy and mostly covers my needs, but could probably add more functionality. do you guys still need something like this? @bkjproductions @designsimply @padraigobeirn @chrisvanpatten @swissspidy @melchoyce

[lubieowoce]

alright, so i think there's a number of features / design aspects we can distinguish here.

implementation note

the way blocks display their controls makes it hard to show a single e.g. Heading toolbar/inspector that controls multiple Headings at once. my current approach is to use one of the selected blocks to render a custom BlockEdit with a setAttributes that applies the changes to all the selectes blocks. see here and here

RichText formats

usecase: apply a format (color, bold etc) to multiple blocks at once

• sub-usecase: remove all instances of e.g. bold by selecting a bunch of text and toggling it on and off for the whole selection. at least that's how i do it when i want to remove one format but keep the others.

i think it's pretty clear how this should work, mostly putting it here for completeness. one issue is that it doesn't always make sense (?) to bulk-apply a format - e.g. links or inline images. those could be hidden unless they were already present in a selected block, to enable the delete-by-toggle usecase described above.

implementation note

my current approach to formats is similar to blocks - just render a single format toolbar with (roughly) an onChange that does richText.apply/removeFormat¹ on the correct attributes of each selected block. unfortunately, this requires knowing which attributes should be treated as RichTexts – i've hardcoded a whitelist of core blocks+attributes, but there's no good way to make it work for arbitrary blocks. would be nice if a block type could declare something like richTexts: ["attr1", "attr2"].

---

¹ getting that working was fun, since the current API for formats assumes that a format's edit is bound to some concrete richText value, which makes it tough to apply a single format control's "effect" to multiple richTexts. the solution is partial application - instead of doing onChange(newValue), formats do onTransformReady((value, ...args) => applyFormat(value, {the: "settings"}, ...args)), allowing us to apply the "effect" to whatever we want! it looks like this, and i wrote a wrapper to adapt existing formats into this form.

"common" block-level settings

usecase: apply "common" block-level settings (align, font size) to multiple blocks at once, regardless of type, e.g. center everything.

which alignment options should appear if the user selects a paragraph and an image? paragraphs don't support "wide" (or "full", can't remember). the two sensible options I see here are:

• show the least common subset of possible aligns. in the paragraph+image case, it'd be left, center, right. that way, we when the user selects one, we can just apply it to all the selected blocks
• show the union of all supported aligns - in the paragraph+image case, it'd be left, center, right, wide. "wide" doesn't apply to paragraphs, which should be indicated somehow, like a dot or a graying out. clicking "wide" would apply it to images and keep paragraphs unchanged.

the second behavior is what i'd like to happen, but it requires more design work to make clear what's going on, at least in the toolbar - inspector controls give us ample room for a warning like "this setting only applies to Paragraph blocks".

implementation note

afaik, these are the settings a block type can specify in supports: {...}, and their controls are mostly added by the editor itself via BlockEdit filters. which is great, because we can easily show them independently of a block's own Block/InspectorControls.

block-specific settings

usecase: change a block specific setting in all selected blocks, e.g. change all headings from H3 to H2. this is easy if only headings are selected - just show the heading toolbar and inspector controls. but headings are always mixed with e.g. paragraphs, and showing all the controls for both would be messy. For the rest of this section, i'll use a mixed selection of Headings and Paragraphs as an example.

inspector controls

show "common" settings like font size and some sort of tab/accordion to go into Heading/Paragraph specific settings. changing something in the Heading tab would apply that setting to all selected Headings

toolbar

that's where i'm kind of stuck, but i'm thinking about something similar to the inspector controls: show "common" controls (basically just "align") and some kind of switcher that lets the user choose between Heading/Paragraph and then show that type's paragraph. maybe something like this: ^{(yay ascii art)}

  .----+---+-------+------+-----------+---.
  | ❏ | ≡ | P / H | H3 ▼ | B | I | ▼ | ⋮ |
  '----+---+-------+------+-----------+---'
    1    2   3      4       5           6

1. block-type converter (unchanged)
2. common settings (pictured - align)
3. type-selector - choose which type's toolbar controls should be shown in 4. the buttons would be the blocks' icons. perhaps this could be some kind of dropdown/popover if there's tok many to fit nicely
4. type-specific settings (pictured - heading level).
5. formatting controls (unchanged)
6. "more" menu (unchanged)

other changes:

• add some kind of "convert each to..." option to the block-type converter interface (the feature request that started this thread).
  • unclear what to do with a "mixed" selection. "convert each Paragraph to..." sounds very useful but would need a good UI
• adapt the "more" menu to work with multiple blocks, e.g. "convert each to blocks" for multiple Classic blocks

implementation note

unfortunately, the current API for Block/InspectorControls doesn't allow us to distinguish which controls should be possible to bulk-apply (like heading level) and which are tied to the particular block (like an embed's url). furthermore, some plugins do stuff like onClick: () => updateBlockAttributes(clientId, {some: "setting"}) in the controls they add (see e.g. EditorsKit indent format), which makes it impossible to apply the effect to multiple blocks.

grouping blocks

one final consideration: what should happen with grouping blocks? if user selects a block tree like this:

  Paragraph
  Group:
    Paragraph
    Paragraph
  Paragraph

which controls should be shown, and how should they work? i.e should a bulk-align-center apply to the inner paragraphs, or the group itself? maybe this isn't too hard with groups which don't have a lot of settings of their own, but it could get hairy with something like Media+Text.

at least i'm pretty sure that bulk-formatting as bold should pass through any grouping levels and apply to "leaf" blocks (i.e. the nested paragraphs).

[draganescu]

Related #16007 Provide same toolbar "Formats" button as TinyMCE for compatibility

[KokkieH]

A request for this from the WordPress.com forums, specifically the option to change text alignment settings for multiple blocks at once.