Fix/implement block quote design

[JustinyAhin]

Fixes #184.

Summary

Relevant technical choices:

No.

Test instructions

Add two block quotes in the editor
In frontend, they should look like the model in this figma file https://www.figma.com/file/OEtsCj8oD8JPVx4OvsS0U2/Twenty-Twenty-One?node-id=1254%3A0.

Screenshots

Quote block in the editor before

Quote block in the editor after

Quote block in frontend before

Quote block in frontend after

Quality assurance

• I have thought about any security implications this code might add.
• I have checked that this code doesn't impact performance (greatly).
• I have tested this code to the best of my abilities
• I have checked that this code does not affect the accessibility negatively

[melchoyce]

Hey @JustinyAhin! Thanks for taking this on.

I'm seeing a couple design issues:

1. The alignment of the quotes isn't inside the content width in the editor:

2. The quotation marks should show up inside the editor, like the pullquote block:

3. The quotation mark spacing on the front-end isn't right:

The upper edge of the quotation mark should align to the top of the text, and should be 20px to the left of the text.

Let me know if you have any questions!

[JustinyAhin]

Thanks for looking @melchoyce .
Working on your changes request.

[JustinyAhin]

The alignment of the quotes isn't inside the content width in the editor:

This is not related to the new implemented design. The quote block is initially not aligned with the content width. I think this should be solved in another issue.

[carolinan]

Closing this in favor of #513.