With the Quote Block you can include someone else’s words from a book, poem, speech, movie, or lyrics, which are somehow connected to your content.
The only way to do great work is to love what you do
– Steve Jobs
Five Ways to start a Quote Block
The first way to start a Quote Block is with the Block Inserter Icon in the upper left corner. Click that icon, and select the Quote Block.
When you do not immediately see the Quote Block, you can either scroll down the Block Explorer, or search for the block with the search form at the top of the explorer.
Hitting the Block Inserter at the right side of a new paragraph shows you the most recent used WordPress Editor Blocks. However, you can search here too.
Another option is typing /quote, at the beginning of a new paragraph.
Markdown provides the fourth manner. Start a new paragraph with > and continue writing your quote.
The last option is transforming a paragraph into a quote. Hover over the paragraph, click the paragraph icon, the first icon at the left, and select quote.
Settings Panel
The most common options of the block are handled through the Block Tool Bar.
Additional features, however, are available in the right sidebar. To get there, click the sidebar icon , directly left from the Publish/Save-button.
Here you have additional options for text and background colours, and typography.
Advanced Settings
Blocks also offer fields where you can enter an HTML anchor and one or more CSS classes. Read about these features in Advanced Sidebar Settings of a Block.
The HTML of the Quote Block
When we inspect the Steve Jobs’ quote above, we see:
<blockquote class="wp-block-quote">
<p>The only way to do great work is to love what you do</p>
<p>– Steve Jobs</p>
</blockquote>
WordPress parses the Quote Block as two paragraphs. One with the quote, the other one with the attribution, and wraps these paragraphs in the HTML <blockquote> tag.
And the Gutenberg editor adds a wp-block-quote class for styling purposes. Your theme defines who the block is styled, unless you overrule it with a little custom CSS.
The HTML blockquote tag is block level element. This implies you cannot include <blockquote> in a paragraph, which is also a block level element.
Suppose you want to include a brief quote in a paragraph. Is that possible? Yes, it is. For use inside a paragraph, there is the inline quotation element. The <q> tag.
Instead of using a Quote Block, you could write:
It was Steve Jobs who said The only way to do great work is to love what you do.
In the source, it looks like this:
<p>It was Steve Jobs who said <q>The only way to do great work is to love what you do.</q></p>
You have to edit the text as HTML to achieve this.