Revisions to .wp-block-quote and .wp-block-pullquote styles

[benlk]

This will require significant duplication of styles, because the markup for a Quote block

<blockquote class="wp-block-quote">
<p>This is a standard WordPress Quote block</p>
<cite>It has a citation.</cite>
</blockquote>

Does not match the markup for a Pull Quote block:

<figure class="wp-block-pullquote">
<blockquote>
<p>This is a <a href="https://wordpress.org/support/article/pullquote-block/">Pullquote</a> block, which is different from a Quote block.</p>
<cite>WordPress</cite>
</blockquote>
</figure>

Note how .wp-block-pullquote is applied, not to the blockquote element, but to the containing figure element.

[benlk]

Alternately:

Apply the .type-pull-quote styles to Pull Quote block. Add the aside styles from the Module Wrapper as an alternate-style option to the pull quote block.

See generally WordPress/gutenberg#11610

[benlk]

User comment:

Also, I question why you made this change: "Matches the default styles for Gutenberg's Pull Quote block with Largo's styles for <blockquote>." Blockquotes and pull quotes are different stylistic elements, and I'm not sure why anyone would want them to look the same. A pull quote is supposed to add visual flair beyond what a blockquote presents. Or maybe I'm at odds with what most other sites do on this.

This would be in favor of the alternate approach described above.

[benlk]

• remove pull quote styles from block quote, leaving only block quote styles.
• apply pull quote styles to pull quote block.

[joshdarby]

@benlk I went ahead and removed the normal block quote styles from the pull quote and added the type-pull-quote styles to it. Anything else we're looking for in this specific issue?

[benlk]

Does it look okay in alignment left/right/center/none conditions?

[joshdarby]

@benlk I think so. Here's how it looks.

Left:

Right:

Full-width:

Wide:

Normal:

[benlk]

👍