{"id":11284982,"date":"2019-03-07T09:53:32","date_gmt":"2019-03-07T09:53:32","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&p=11284982"},"modified":"2023-10-26T08:29:58","modified_gmt":"2023-10-26T08:29:58","slug":"quote-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/quote-block\/","title":{"rendered":"Quote block"},"content":{"rendered":"\n
Go back to the list of Blocks<\/strong><\/a><\/p>\n\n\n\n Use the Quote <\/em>block to easily add a quote to any post or page. Adding quotes can help you highlight great reviews from your audience or phrases that inspire you.<\/p>\n\n\n\n To add the Quote <\/em>block to a page, click the block inserter (+) to open the block inserter pop-up window and choose the Quote<\/em> block.<\/p>\n\n\n\n Alternatively, you can use the slash command, Detailed instructions on adding blocks <\/a><\/p>\n\n\n\n Each block comes with unique toolbar icons and blocks specific user controls that allow you to manipulate the block right in the editor.<\/p>\n\n\n\n To view the block toolbar, click on the block, and the toolbar will be displayed.<\/p>\n\n\n\n The Quote block shows the following buttons:<\/p>\n\n\n\n Click on the Transform <\/strong>button to convert the Quote <\/em>block into another block type using the existing content. To drag and drop the block to a new location on the page template, click and hold the rectangle of dots, then drag it to the new location. The blue separator line indicates where the block will be placed. Release the left mouse button when you find the new location to place the block.<\/p>\n\n\n\n The up and down arrow icons can be used to move the block up and down on the page.<\/p>\n\n\n\n Get more information about moving a block within the editor.<\/a><\/p>\n\n\n\n Using the alignment drop-down from the toolbar, you are able to align the Quote<\/em> block to the left, make it center-aligned, or align it to the right.<\/p>\n\n\n\n You can select the text in the Quote<\/em> block and use the Bold<\/em> option or Ctrl+B<\/kbd> or Cmd+B<\/kbd> on your keyboard to bold it, which is usually heavier than the surrounding text.<\/p>\n\n\n\n You can select any text inside the Quote <\/em>block and use the Italic<\/strong> option or Ctrl+I<\/kbd> or Cmd+I<\/kbd> on your keyboard to italicize it, which usually appears slanted to the right.<\/p>\n\n\n\n Use the link icon to insert a hyperlink to the highlighted text inside the Quote <\/em>block.<\/p>\n\n\n\n Read about more link editing options.<\/a><\/p>\n\n\n\n The drop-down menu to the left of the More options menu<\/a> contains a range of additional rich text editing options such as highlighting, inline code, strikethrough, and more.<\/p>\n\n\n\n Read about more rich text editing options.<\/a><\/p>\n\n\n\n The Options menu represented by three vertical dots on the far right of the toolbar gives you more features such as the ability to duplicate or remove the block.<\/p>\n\n\n\n Read about these and other settings.<\/a><\/p>\n\n\n\n The block settings panel contains customization options specific to the block. To open it, select the block and click the Settings <\/strong>button next to the Publish\/Update <\/strong>button.<\/p>\n\n\n\n You can modify the Quote <\/em>block styles by choosing the Default <\/strong>or Plain <\/strong>buttons in the Styles settings panel. Hover over the Default <\/strong>or Plain <\/strong>buttons to get a preview of the styles. <\/p>\n\n\n\n The style options may vary based on your theme.<\/p>\n\n\n\n Based on which style you choose for the Quote<\/em> block, WordPress automatically adds a CSS class to the Quote<\/em> block. You can find the class in the Advanced settings panel under the Additional CSS class(es) section.<\/p>\n\n\n\n The Quote<\/em> block provides Color settings options to change the text and background colors.<\/p>\n\n\n\n <\/a>See this guide for more information about changing colors.<\/a><\/p>\n\n\n\n The Quote<\/em> block <\/em>provides typography settings to change the font family, size, appearance, line height, letter case, letter spacing, and decoration. <\/p>\n\n\n\n Get more details about changing typography settings.<\/a><\/p>\n\n\n\n The Quote<\/em> block provides dimension settings options to change padding and margin size.<\/p>\n\n\n\n For details refer to this support article: Dimension settings overview<\/a><\/p>\n\n\n\n The Advanced<\/strong> tab lets you add HTML anchor and CSS class(es) to your block.<\/figure>\n\n\n\n
\/quote<\/code> in a new paragraph block<\/em> then press
enter<\/code> to add one quickly.<\/p>\n\n\n\n
<\/a><\/figure>\n\n\n\n
Block toolbar<\/h2>\n\n\n\n
<\/figure>\n\n\n\n
\n
Transform to<\/h3>\n\n\n\n
<\/figure>\n\n\n\n
You can transform the Quote <\/em>block into a Paragraph<\/strong>, Columns<\/strong>, Group<\/strong>, or Pullquote <\/strong>block. You can also change the style of the Quote block from Default <\/strong>to Plain<\/strong>.<\/p>\n\n\n\nDrag icon<\/h3>\n\n\n\n
<\/figure>\n\n\n\n
Move handles<\/h3>\n\n\n\n
<\/figure>\n\n\n\n
Change text alignment<\/h3>\n\n\n\n
Bold<\/h3>\n\n\n\n
<\/figure>\n\n\n\n
Italic<\/h3>\n\n\n\n
<\/figure>\n\n\n\n
Link<\/h3>\n\n\n\n
More rich text options<\/h3>\n\n\n\n
More options<\/h3>\n\n\n\n
Block settings<\/h2>\n\n\n\n
<\/figure>\n\n\n\n
Styles<\/h3>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
Color<\/h3>\n\n\n\n
Typography<\/h3>\n\n\n\n
Dimensions<\/h3>\n\n\n\n
Advanced<\/h3>\n\n\n\n
<\/p>\n\n\n\n<\/a>