Right-align border for right-aligned quotes

[sarahmonster]

To improve the consistency of alignments and to avoid creating potentially-awkward rivers inside the quote block, I'd recommend adjusting the positioning of the hard left border on the quote block when the alignment is changed, so it would be to the right on a right-aligned quote, and either removed or maybe at the top of a centre-aligned block.

Left-aligned

Suggestion is to remain as-is, since the alignment here is consistent with the text.

Centre-aligned

Suggestion:

Right-aligned

Suggestion:

[colorful-tones]

I'm going to take a pass at updating the CSS around this now. (via @10up).

[colorful-tones]

Currently the Quote block is not using className on <blockquote>, which is problematic for adding the proposed variations mentioned above.

Currently, when alignment is switched it is just setting a style property on the element: <blockquote style="text-align: left;"></blockquote>

Whereas, we would want to leverage a class property instead: <blockquote class="blockquote-left">.

I'll continue to try and work up a PR, but I'm newer to React/Gutenberg. So somebody might beat me to it. Feel free!

[colorful-tones]

@sarahmonster I would love your feedback on the styling enhancements in submitted PR. Note: I went in a little different direction for center aligned quotes. Thanks!

[colorful-tones]

Tagging #10970 as they are related.