Adding quotes can help you highlight great reviews from your audience or phrases that inspire you.
To add a Quote block to your page, click on the Block Inserter icon.
Alternatively, you can use the slash command,
/quote in a new paragraph block then press
enter to add one quickly.
Detailed instructions on adding blocks can be found here.
Every block comes with unique toolbar icons and blocks specific user controls that allow you to manipulate the block right in the editor.
The Quote block shows standard nine buttons:
- Transform to
- Drag icon
- Move handles
- Change text alignment
- More text editing options
- More options
When you click on the “Transform” button you can convert the Quote block into another block type, by using the existing content.
You can transform the Quote block into a “Paragraph“, “List”, “Columns”, “Group”, “Heading”, or “PullQuote” block. You can also change the style of the Quote block from “Default” to “Plain”.
The “Group” would give you the ability to change the background color around the Quote.
To drag and drop the block to a new location on the page template, click and hold the rectangle of dots, then drag 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.
The up and down arrow icons can be used to move a block up and down on the page.
Detailed instructions on moving a block within the editor can be found here
Change text alignment
Using the alignment drop-down from the toolbar, you are able to align the Quote block to the left, make it center-aligned, or align it to the right.
You can select any text inside the Quote block and use the “Bold” option or “Ctrl+B” / “Cmd+B” on your keyboard to bold it, which is usually heavier than the surrounding text.
You can select any text inside the Quote block and use the “Italic” option or “Ctrl+I” / “Cmd+I” on your keyboard to italicize it, which usually appears slanted to the right.
Use the link icon to insert a hyperlink to the highlighted text inside the Quote block. You can also use the CTRL + k (or Command+k) keyboard shortcut.
Clicking on the link icon will open a dialog box.
You can type in the URL of the page you want to link to.
You can also use the Search text box to search for pages on your own website. If you start typing a keyword into the Search text box, WordPress will list Post and Page titles on your website that match the keyword. This is helpful for on-site link building.
The ‘Open in new tab’ toggle switch allows you to control where the new page should open. By default, the switch is set to off.
- off opens in the same browser tab
- on opens in a new browser tab
Tip: If you already have the URL of the website you want to link to in the clipboard, highlight the text, you want to make into a link and use CTRL + V to add the hyperlink to the text.
More text editing options
Use the Highlight option to change the color of the selected text and its background.
Use the Inline code feature to format code snippets within your text differently. Not only that, but Inline code formatting also prevents the code to be executed instead of displayed.
The Inline image feature allows you to add an image to your paragraph. It has one option: enter the desired pixel width for your image.
The Keyboard Input option allows you to add the
<kbd> tag to selected text.
Use the Strikethrough option to place a horizontal line through the middle of the selected text.
Use the Subscript option to set the selected text slightly below the normal line of type.
Example: Quote Block
Use the Superscript option to set the selected text slightly above the normal line of type.
Example: Quote Block
Hide Block Settings
The Hide Block Settings option hides (or shows) the Block Setting panel in the editor’s sidebar.
Copy can be used to copy a selected block and then you can paste it wherever you want in the editor.
Duplicate can be used to duplicate the selected block.
Insert a new block before the selected block(s).
Insert a new block after the selected block(s).
If you select Move to, you will get a blue line inside your content, you can then use the arrows to move that line, up and down to where you want the selected content to be moved into, hitting return on your keyboard at that point moves the block to that position.
Details on using the “Move to” option can be found here.
Edit as HTML
The “Edit as HTML” option allows you to modify the HTML code of the embed block.
Since WordPress 6.0, you can lock the block to disallow moving and/or removing. If you lock the block, the “Lock” icon will be shown in the Block Toolbar.
For more details about Lock, refer More Options.
Add to Reusable blocks
Using the Add to Reusable blocks option lets you add the selected block to a list of reusable blocks, so you can use them on other posts or pages as well.
Select the Group option if you want to create a group of blocks and treat them as a unit. You can for instance add a common background color or other blocks to the group.
With the Remove Quote option, you can delete the selected block from your content.
Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, click the ‘cog’ icon.
You can modify the Quote block styles by choosing the ‘Default’ or ‘Plain’ buttons in the Styles settings panel. Hover over the ‘Default’ or ‘Plain’ buttons to get a preview of the styles.
The style options may vary based on your theme.
Based on which style you choose for the Quote block, WordPress automatically adds a CSS class to the Quote block. You can find the class in the Advanced settings panel under Additional CSS class(es).
You can customize the text color, and background color, for the Quote block. The color options available will vary based on the theme.
On this tab, you can adjust the Font size, Appearance, Letter case, Line height, and Letter spacing.
To access all the typography options click on the 3 dot button in the right corner of the Typography tab.
To change the font size, you can select the numbers 1 (for small), 2 (for medium), 3 (for large), or 4 (for extra-large).
Click on the slider icon to the right of Size to add a custom font size in the text field.
Clicking on PX will open a drop-down with options for other font units -PX, Em, and Rem.
Click on the Appearance drop-down to change the font weight for the Heading. The values in the drop-down will vary based on the theme.
You can increase or decrease the value for the line height by clicking on the up or down arrow handles in the Line height text field or by typing in your custom value inside the text field.
You can change the Letter case from uppercase (all letters are in uppercase), lowercase (all letters are in lowercase), or capitalize (where the first letter of each word is uppercase).
You can adjust the Letter-spacing by typing in a custom value in the Letter-spacing text field. Clicking on PX will open a drop-down with options for other units -PX, %, EM, REM, VW, VH.
You also have the option to Reset all the typography changes you made by clicking on the Reset all option in the dropdown.
The “Advanced” tab lets you add HTML anchor and CSS class(es) to your block.
“HTML anchor” allows you to make a unique web address for a particular “Video” block. Then, you’ll be able to link directly to a “Quote” block on your page.
The “Additional CSS class(es)” lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.
- Updated 2022-06-24
- Updated content, images, videos for 6.0
- Added ALT tags for images
- Updated 2020-09-21
- Updated 5.5 video
- Updated 2020-09-14
- Updated 5.5 screenshots
- Updated block toolbar new features
- Updated block settings new features
- Updated 2020-06-18
- Added ‘Link back to blocks’ to the top of the page
- Converted the ‘Advanced’ reusable block to a regular block
- Add the ‘Changelog’
- Created 2019-03-07