Make sure the Pull Quote block styles match the Module Wrapper styles

[benlk]

In the Classic Editor, Largo has a feature called "Module Wrapper" that inserts various forms of aside https://github.com/INN/largo/tree/v0.6.1/js/tinymce/plugins/largo that were used for pull quotes.

We need to make sure that Gutenberg's pull quote blocks match Largo's module wrapper styles.

See https://secure.helpscout.net/conversation/830071979/3572/ :

• The "module wrapper" doesn't work/exist. We used this primarily for pull quotes. All of the built-in pull quote block options look terrible. Can we alter the formatting for the built-in pull quote blocks within the theme we're using so we don't need to use the "module wrapper" work-around?
• I also used the module wrapper to reduce some infographics to a half column. Now the only option is for all infographics to span the entire column, which is unnecessary in many cases. I wonder if we could create a custom block that would solve this problem.

[benlk]

There's a few things going on here.

The module wrapper could:

• wrap selected text or HTML in an aside with:
  • an align-left, align-right, and align-center class
  • a type-aside or type-pull-quote classes
• do /something/ to embeds to pull media out of the embed, and then do the above

The addition of CSS classes to blocks can be done using the "Custom Classes" function of Gutenberg, but that requires 1️⃣ users to know what the classes are and 2️⃣ to get the classes working on the block.

Here's a module of "aside" type, aligned left, half width:

<aside class="module align-left half type-aside">Aside left half. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla rhoncus risus at mi iaculis, ut elementum nisi condimentum. Mauris in odio sed velit commodo vestibulum.</aside>

The "pull quote" block, which is most analogous to Largo's "aside" module, uses a blockquote element (shown here with classes alignleft half added via the Custom CSS control):

<blockquote style="text-align:left" class="wp-block-quote alignleft half"><p>Aside left half. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla rhoncus risus at mi iaculis, ut elementum nisi condimentum. Mauris in odio sed velit commodo vestibulum.</p></blockquote>

[benlk]

Steps to better support for this stuff in Largo:

1. Make sure that module-wrapper styles work on blocks
2. Make documentation improvements to explain how to add those classes to blocks, and that yes, this will make it hard to click your blocks in the Gutenberg editor. "Because of how the .alignleft .half styles work, in order to edit text in a block that has been styled with these classes,
3. Register block style variations for the pull quote block so that it can be Largo-style Pull Quotes or Aside text
4. ❓ register new Gutenberg controls in various blocks to set width?

Of those, 1 and 2 are achievable in 0.6.2. After that, this should be bumped to Largo 0.7.