{"id":11285261,"date":"2019-03-07T14:13:50","date_gmt":"2019-03-07T14:13:50","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&#038;p=11285261"},"modified":"2024-06-09T09:28:09","modified_gmt":"2024-06-09T09:28:09","slug":"verse-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/verse-block\/","title":{"rendered":"Verse block"},"content":{"rendered":"\n<p class=\"has-text-align-right has-small-font-size\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/\">Go back to the list of <strong>Blocks<\/strong><\/a><\/p>\n\n\n\n<p>The&nbsp;<em>Verse block<\/em>&nbsp;is ideal for writing poetry on your site.<\/p>\n\n\n\n<p>To add a Verse block, click on the \u201cBlock Inserter\u201d (+)&nbsp; and select the Verse block.<\/p>\n\n\n\n<p>You can also type &#8220;\/verse&#8221; and hit enter in a new paragraph block to add one quickly.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"684\" height=\"356\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/06\/verse1.png\" alt=\"How to add the verse block using the shortcut\" class=\"wp-image-15737180\" style=\"width:513px;height:267px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/06\/verse1.png 684w, https:\/\/wordpress.org\/documentation\/files\/2022\/06\/verse1-300x156.png 300w\" sizes=\"auto, (max-width: 684px) 100vw, 684px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/adding-a-new-block\/\">Detailed instructions on adding blocks<\/a><\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/wordpress.org\/documentation\/files\/2019\/03\/verse-block-59.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"block-toolbar\">Block Toolbar<\/h2>\n\n\n\n<p>Every block comes with unique toolbar icons and block-specific user controls that allow you to manipulate the block right in the editor.<\/p>\n\n\n\n<p>The Verse block shows nine buttons in the block toolbar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Transform to<\/li>\n\n\n\n<li>Drag icon<\/li>\n\n\n\n<li>Move arrows<\/li>\n\n\n\n<li>Change text alignment<\/li>\n\n\n\n<li>Bold<\/li>\n\n\n\n<li>Italic<\/li>\n\n\n\n<li>Hyperlink<\/li>\n\n\n\n<li>More Rich Text controls<\/li>\n\n\n\n<li>More options<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"941\" height=\"370\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/image-2.png\" alt=\"Block toolbar for the Verse block\" class=\"wp-image-15327846\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/image-2.png 941w, https:\/\/wordpress.org\/documentation\/files\/2022\/02\/image-2-300x118.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/02\/image-2-768x302.png 768w\" sizes=\"auto, (max-width: 941px) 100vw, 941px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#e5f5fa\">The layout of the&nbsp;Verse block&nbsp;on your site may vary according to the styles set by the theme you are using.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Transform to<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"601\" height=\"371\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/image-4.png\" alt=\"Transform options for Verse Block\n\" class=\"wp-image-15327857\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/image-4.png 601w, https:\/\/wordpress.org\/documentation\/files\/2022\/02\/image-4-300x185.png 300w\" sizes=\"auto, (max-width: 601px) 100vw, 601px\" \/><\/figure>\n\n\n\n<p>Click on the \u201cTransform\u201d button to convert the Verse block into a \u201cParagraph\u201d,  \u201cColumns\u201d or \u201cGroup\u201d blocks. \u201cGroup\u201d gives you the ability to change the background color around the Verse block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"595\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-10-1024x595.png\" alt=\"Grouping a Verse block and setting a background color\" class=\"wp-image-16359236\" style=\"width:680px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-10-1024x595.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-10-300x174.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-10-768x446.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-10-1536x892.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-10-2048x1189.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Grouping a Verse block and setting a background color<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Drag icon<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"748\" height=\"108\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/06\/Screen-Shot-2022-06-15-at-11.49.49-AM.png\" alt=\"Drag icon for the Verse block\" class=\"wp-image-15740908\" style=\"width:561px;height:81px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/06\/Screen-Shot-2022-06-15-at-11.49.49-AM.png 748w, https:\/\/wordpress.org\/documentation\/files\/2022\/06\/Screen-Shot-2022-06-15-at-11.49.49-AM-300x43.png 300w\" sizes=\"auto, (max-width: 748px) 100vw, 748px\" \/><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Move arrows<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"555\" height=\"72\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/image-6.png\" alt=\"Move arrows for the Verse block\" class=\"wp-image-15327892\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/image-6.png 555w, https:\/\/wordpress.org\/documentation\/files\/2022\/02\/image-6-300x39.png 300w\" sizes=\"auto, (max-width: 555px) 100vw, 555px\" \/><\/figure>\n\n\n\n<p>The up and down arrow icons can be used to move the block up and down on the page.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f5fa\"><a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/documentation\/article\/moving-blocks\/\" target=\"_blank\">Get more information about moving a block within the editor.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Change text alignment<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"555\" height=\"279\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/image-7.png\" alt=\"Change text alignment for the Verse block\" class=\"wp-image-15327901\" style=\"width:416px;height:209px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/image-7.png 555w, https:\/\/wordpress.org\/documentation\/files\/2022\/02\/image-7-300x151.png 300w\" sizes=\"auto, (max-width: 555px) 100vw, 555px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Align text left<\/strong>&nbsp;\u2013 Make the block left-aligned.<\/li>\n\n\n\n<li><strong>Align text center<\/strong>&nbsp;\u2013 Make the block alignment centered.<\/li>\n\n\n\n<li><strong>Align text right&nbsp;<\/strong>\u2013 Make the block right aligned.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Bold<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"555\" height=\"72\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/image-9.png\" alt=\"Bold typeface for the Verse block\" class=\"wp-image-15327909\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/image-9.png 555w, https:\/\/wordpress.org\/documentation\/files\/2022\/02\/image-9-300x39.png 300w\" sizes=\"auto, (max-width: 555px) 100vw, 555px\" \/><\/figure>\n\n\n\n<p>You can select the text of the block and use the \u201cBold\u201d option or \u201cCtrl+B\u201d \/ \u201cCmd+B\u201d on your keyboard to bold it, which is usually heavier than the surrounding text.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Italic<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"555\" height=\"72\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/image-10.png\" alt=\"Italic typeface for Verse block\" class=\"wp-image-15327916\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/image-10.png 555w, https:\/\/wordpress.org\/documentation\/files\/2022\/02\/image-10-300x39.png 300w\" sizes=\"auto, (max-width: 555px) 100vw, 555px\" \/><\/figure>\n\n\n\n<p>You can select the text of the block and use the \u201cItalic\u201d option or \u201cCtrl+I\u201d \/ \u201cCmd+I\u201d on your keyboard to italicize it, which usually appears slanted to the right.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Hyperlink<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"462\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-11-1024x462.png\" alt=\"Adding a link to the Verse block\" class=\"wp-image-16359238\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-11-1024x462.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-11-300x135.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-11-768x347.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-11.png 1099w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can select the text of the block and use the \u201cHyperlink\u201d option or \u201cCtrl+K\u201d \/ \u201cCmd+K\u201d on your keyboard to add a link to it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">More rich text options<\/h3>\n\n\n\n<p>The drop-down menu to the left of the&nbsp;<a href=\"https:\/\/wordpress.org\/documentation\/article\/more-options\/\">More options menu<\/a>&nbsp;contains a range of additional rich text editing options such as highlighting, inline code, strikethrough, and more.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/more-text-editing-overview\/\">Read about more rich text editing options.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">More options <\/h3>\n\n\n\n<p>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<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/more-options\/\">Read about these and other settings.<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"block-settings\">Block Settings<\/h2>\n\n\n\n<p>Every block has specific options in the editor sidebar in addition to the options found in the block toolbar.&nbsp;<em>If you do not see the sidebar, simply click the \u2018cog\u2019 icon.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"756\" height=\"540\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-12.png\" alt=\"Block settings in the Verse block\" class=\"wp-image-16359239\" style=\"width:400px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-12.png 756w, https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-12-300x214.png 300w\" sizes=\"auto, (max-width: 756px) 100vw, 756px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Color <\/h3>\n\n\n\n<p>Text and background colors can be set on a per-block basis, allowing you to call attention to important content. Pick a color from the suggestions, or add a custom color using the color picker or by adding a color code.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1065\" height=\"1032\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-13.png\" alt=\"Color settings in the Verse block\" class=\"wp-image-16359240\" style=\"width:512px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-13.png 1065w, https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-13-300x291.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-13-1024x992.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-13-768x744.png 768w\" sizes=\"auto, (max-width: 1065px) 100vw, 1065px\" \/><figcaption class=\"wp-element-caption\">Color settings in the Verse block<\/figcaption><\/figure>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/colors-settings-overview\/\">See this guide for more information about changing colors.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Typography<\/h3>\n\n\n\n<p>Typography settings allow you to change a block\u2019s font size, appearance, line height, letter casing, and spacing.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"860\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-14.png\" alt=\"Typography settings in the Verse block\" class=\"wp-image-16359241\" style=\"width:auto;height:600px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-14.png 540w, https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-14-188x300.png 188w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" \/><figcaption class=\"wp-element-caption\">Typography settings in the Verse block<\/figcaption><\/figure>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/typography-settings-overview\/\">Get more details about changing typography settings.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dimensions <\/h3>\n\n\n\n<p>Dimension controls are used to control how groups of blocks are placed alongside one another, by changing the values for padding, margin, and other dimensions<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"516\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-15.png\" alt=\"Dimension settings in the Verse block\" class=\"wp-image-16359242\" style=\"width:372px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-15.png 640w, https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-15-300x242.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><figcaption class=\"wp-element-caption\">Dimension settings in the Verse block<\/figcaption><\/figure>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/dimension-controls-overview\/\">Learn more about dimension controls.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Advanced<\/h3>\n\n\n\n<p>The \u201cAdvanced\u201d tab lets you add HTML anchor and CSS class(es) to your block.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"642\" height=\"928\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-16.png\" alt=\"Advanced setting in the Verse block\" class=\"wp-image-16359243\" style=\"width:333px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-16.png 642w, https:\/\/wordpress.org\/documentation\/files\/2023\/11\/image-16-208x300.png 208w\" sizes=\"auto, (max-width: 642px) 100vw, 642px\" \/><\/figure>\n\n\n\n<p>\u201cHTML anchor\u201d allows you to&nbsp;<a href=\"https:\/\/wordpress.org\/documentation\/article\/page-jumps\/\">make a unique web address<\/a>&nbsp;for a particular \u201cVerse\u201d block. Then, you\u2019ll be able to link directly to a \u201cVerse\u201d block of your page.<\/p>\n\n\n\n<p>The \u201cAdditional CSS class(es)\u201d lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.<\/p>\n\n\n\n<div class=\"wp-block-group changelog has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"background-color:#e0e0e0\">\n<h2 class=\"wp-block-heading has-large-font-size\" id=\"changelog\">Changelog<strong> <\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>2023-11-21\n<ul class=\"wp-block-list\">\n<li>Updated screenshots for 6.4<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>2023-07-25\n<ul class=\"wp-block-list\">\n<li>Fix broken image URL<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>2023-06-08\n<ul class=\"wp-block-list\">\n<li>Replaced &#8220;More rich text options&#8221; section with short summary linking to new dedicated page for rich text editing options.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>2022-06-02\n<ul class=\"wp-block-list\">\n<li>Updated the content for 6.0. <\/li>\n\n\n\n<li>Added ALT tags for images.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>2022-06-02\n<ul class=\"wp-block-list\">\n<li>Screenshots as per WordPress 6.0<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>2022-02-04\n<ul class=\"wp-block-list\">\n<li>Screenshots and video as per WordPress 5.9<\/li>\n\n\n\n<li>Minor option updates<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>2020-09-29\n<ul class=\"wp-block-list\">\n<li>Screenshots and video as per WordPress 5.5<\/li>\n\n\n\n<li>Added feature changes in Block Toolbar<\/li>\n\n\n\n<li>Added feature changes in Block Settings<\/li>\n\n\n\n<li>Added &#8220;Go back to the list of Blocks&#8221; to the top of the page<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Created 2019-03-07<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Go back to the list of Blocks The&nbsp;Verse block&nbsp;is ideal for writing poetry on your site. To add a Verse block, click on the \u201cBlock Inserter\u201d (+)&nbsp; and select the Verse block. You can also type &#8220;\/verse&#8221; and hit enter in a new paragraph block to add one quickly. Detailed instructions on adding blocks Block [&hellip;]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[80,85],"class_list":["post-11285261","helphub_article","type-helphub_article","status-publish","hentry","category-customization","category-text-blocks"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11285261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=11285261"}],"version-history":[{"count":10,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11285261\/revisions"}],"predecessor-version":[{"id":16360445,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11285261\/revisions\/16360445"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=11285261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=11285261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}