{"id":11285162,"date":"2019-03-07T10:19:54","date_gmt":"2019-03-07T10:19:54","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&#038;p=11285162"},"modified":"2024-06-08T18:32:17","modified_gmt":"2024-06-08T18:32:17","slug":"preformatted-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/preformatted-block\/","title":{"rendered":"Preformatted 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>If you wish to add text to a post or page that is displayed exactly as you type it, the&nbsp;<strong>Preformatted Block<\/strong>&nbsp;is for you. You can create one by clicking the <strong>Block&nbsp;Inserter<\/strong> icon.<\/p>\n\n\n\n<p>You can also type <em>&#8220;\/preformatted&#8221;<\/em> and hit the enter key in an empty paragraph block to quickly create one.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/10\/Screenshot.png\" alt=\"\" class=\"wp-image-13576984\" style=\"width:301px;height:96px\" width=\"301\" height=\"96\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/10\/Screenshot.png 401w, https:\/\/wordpress.org\/documentation\/files\/2020\/10\/Screenshot-300x96.png 300w\" sizes=\"auto, (max-width: 301px) 100vw, 301px\" \/><\/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\/Preformatted-block-demo-5.9-1.mov\"><\/video><\/figure>\n\n\n\n<p>The&nbsp;<strong>Preformatted Block<\/strong>&nbsp;shares a lot of similarities with the&nbsp;<strong>Paragraph Block<\/strong>&nbsp;and the&nbsp;<strong>Code Block<\/strong><em>.<\/em>&nbsp;Think of it as a hybrid of the two.<\/p>\n\n\n\n<p>Like <strong>Paragraph Block<\/strong>, the&nbsp;<strong>Preformatted Block<\/strong>&nbsp;is intended primarily to display text. Unlike the&nbsp;<strong>Paragraph Block<\/strong>, though, the&nbsp;<strong>Preformatted Block<\/strong>&nbsp;keeps any spacing or line breaks exactly as they are entered.<\/p>\n\n\n\n<p>Similar to the&nbsp;<strong>Code Block<\/strong>, the&nbsp;<strong>Preformatted Block<\/strong>&nbsp;is displayed in a monospace font, making it easy to keep text perfectly aligned. However, the&nbsp;<strong>Preformatted Block<\/strong>&nbsp;also includes styling and the ability to add hyperlinks (described below) that a&nbsp;<strong>Code Block<\/strong>&nbsp;doesn&#8217;t have.<\/p>\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 <strong>Preformatted Block<\/strong> shows the standard eight buttons:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Change block type or style<\/li>\n\n\n\n<li>Drag<\/li>\n\n\n\n<li>Moving handles<\/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 aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"355\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/Preformatted-block-toolbar-5.9-1024x355.png\" alt=\"\" class=\"wp-image-15327997\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/Preformatted-block-toolbar-5.9-1024x355.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2022\/02\/Preformatted-block-toolbar-5.9-300x104.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/02\/Preformatted-block-toolbar-5.9-768x266.png 768w, https:\/\/wordpress.org\/documentation\/files\/2022\/02\/Preformatted-block-toolbar-5.9.png 1338w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Change block type or style<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/Preformatted-block-change-block-type-5.9.png\" alt=\"\" class=\"wp-image-15328028\" style=\"width:344px;height:287px\" width=\"344\" height=\"287\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/Preformatted-block-change-block-type-5.9.png 688w, https:\/\/wordpress.org\/documentation\/files\/2022\/02\/Preformatted-block-change-block-type-5.9-300x250.png 300w\" sizes=\"auto, (max-width: 344px) 100vw, 344px\" \/><\/figure>\n\n\n\n<p>You can transform the <strong>Preformatted Block<\/strong> into <strong>Paragraph Block<\/strong>, <strong>Columns Block<\/strong>, <strong>Code Block,<\/strong> or <strong>Group<\/strong>. The <strong>Group<\/strong> would give you the ability to change the background color around the <strong>Preformatted Block<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"993\" height=\"426\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/10\/Untitled-3.png\" alt=\"\" class=\"wp-image-13577060\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/10\/Untitled-3.png 993w, https:\/\/wordpress.org\/documentation\/files\/2020\/10\/Untitled-3-300x129.png 300w, https:\/\/wordpress.org\/documentation\/files\/2020\/10\/Untitled-3-768x329.png 768w\" sizes=\"auto, (max-width: 993px) 100vw, 993px\" \/><figcaption class=\"wp-element-caption\">Editor view of <strong>Preformatted Block<\/strong> as a group with <strong>Color settings<\/strong> controls<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Moving handles<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/Preformatted-block-move-handles-5.9.png\" alt=\"\" class=\"wp-image-15328183\" style=\"width:325px;height:63px\" width=\"325\" height=\"63\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/Preformatted-block-move-handles-5.9.png 650w, https:\/\/wordpress.org\/documentation\/files\/2022\/02\/Preformatted-block-move-handles-5.9-300x58.png 300w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><\/figure>\n\n\n\n<p>The up and down arrow icons can be used to shift a block up and down in your document.<\/p>\n\n\n\n<p>Detailed instructions on moving a block within the editor can be found&nbsp;<a href=\"https:\/\/wordpress.org\/documentation\/article\/moving-blocks\/\">here<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bold<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/Preformatted-block-bold-option-5.9.png\" alt=\"\" class=\"wp-image-15328201\" style=\"width:325px;height:67px\" width=\"325\" height=\"67\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/Preformatted-block-bold-option-5.9.png 650w, https:\/\/wordpress.org\/documentation\/files\/2022\/02\/Preformatted-block-bold-option-5.9-300x62.png 300w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><\/figure>\n\n\n\n<p>You can select the text of the block and use the <strong>Bold<\/strong> option or <strong>Ctrl+B<\/strong> \/<strong> Cmd+B<\/strong> 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 is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/Preformatted-block-italic-5.9.png\" alt=\"\" class=\"wp-image-15328388\" style=\"width:328px;height:70px\" width=\"328\" height=\"70\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/Preformatted-block-italic-5.9.png 656w, https:\/\/wordpress.org\/documentation\/files\/2022\/02\/Preformatted-block-italic-5.9-300x64.png 300w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/figure>\n\n\n\n<p>You can select the text of the block and use the <strong>Italic<\/strong> option or <strong>Ctrl+I <\/strong>\/ <strong>Cmd+I <\/strong>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<p>You can select the text of the block and use the <strong>Hyperlink<\/strong> option.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/link-editing\/\">Read about more link editing options.<\/a><\/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. <em>If you do not see the sidebar, click the &#8216;cog&#8217; icon next to the Publish button.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"433\" height=\"144\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/09\/Screenshot-13.png\" alt=\"The block settings can be found in the sidebar.\n\" class=\"wp-image-13399050\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/09\/Screenshot-13.png 433w, https:\/\/wordpress.org\/documentation\/files\/2020\/09\/Screenshot-13-300x100.png 300w\" sizes=\"auto, (max-width: 433px) 100vw, 433px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Color<\/h3>\n\n\n\n<p>You can customize the text color, and background color, for the Heading block.<em>&nbsp;The color options available will vary based on the theme.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/06\/Screen-Shot-2022-06-22-at-11.06.19-AM-1024x592.png\" alt=\"Color settings in the Heading block\" class=\"wp-image-15761699\" style=\"width:256px;height:148px\" width=\"256\" height=\"148\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/06\/Screen-Shot-2022-06-22-at-11.06.19-AM-1024x592.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2022\/06\/Screen-Shot-2022-06-22-at-11.06.19-AM-300x173.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/06\/Screen-Shot-2022-06-22-at-11.06.19-AM-768x444.png 768w, https:\/\/wordpress.org\/documentation\/files\/2022\/06\/Screen-Shot-2022-06-22-at-11.06.19-AM.png 1156w\" sizes=\"auto, (max-width: 256px) 100vw, 256px\" \/><figcaption class=\"wp-element-caption\">Color settings in the Heading block<\/figcaption><\/figure>\n\n\n\n<p>You can 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<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 adjust the Font size, Appearance, Letter case, Line height, and Letter spacing.&nbsp;<\/p>\n\n\n\n<p>To access all the typography options click on the 3 dot button in the right corner of the Typography tab.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/06\/Screen-Shot-2022-06-22-at-11.25.05-AM.png\" alt=\"Typography settings in the Heading block\" class=\"wp-image-15761755\" style=\"width:269px;height:317px\" width=\"269\" height=\"317\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/06\/Screen-Shot-2022-06-22-at-11.25.05-AM.png 538w, https:\/\/wordpress.org\/documentation\/files\/2022\/06\/Screen-Shot-2022-06-22-at-11.25.05-AM-255x300.png 255w\" sizes=\"auto, (max-width: 269px) 100vw, 269px\" \/><figcaption class=\"wp-element-caption\">Typography settings in the Heading 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\">Advanced<\/h3>\n\n\n\n<p>The <strong>Advanced<\/strong> 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\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/Advanced-block-toolbar-options-5.9.png\" alt=\"\" class=\"wp-image-15328431\" style=\"width:281px;height:372px\" width=\"281\" height=\"372\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/Advanced-block-toolbar-options-5.9.png 562w, https:\/\/wordpress.org\/documentation\/files\/2022\/02\/Advanced-block-toolbar-options-5.9-227x300.png 227w\" sizes=\"auto, (max-width: 281px) 100vw, 281px\" \/><\/figure>\n\n\n\n<p><strong>HTML anchor<\/strong> allows you to&nbsp;<a href=\"https:\/\/wordpress.org\/documentation\/article\/page-jumps\/\">make a unique web address<\/a>&nbsp;for a particular <strong>Preformatted Block<\/strong>. Then, you\u2019ll be able to link directly to a <strong>Preformatted Block<\/strong> of your page.<\/p>\n\n\n\n<p>The <strong>Additional CSS class(es)<\/strong> 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 <\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Updated 2023-08-09\n<ul class=\"wp-block-list\">\n<li>Replaced the link section with short summary linking to new dedicated page.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 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><span style=\"color: initial;, sans-serif\">Updated 2022-02-04<\/span>\n<ul class=\"wp-block-list\">\n<li>Screenshots and video as per WordPress 5.9<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2020-10-25\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 \u201cGo back to the list of Blocks\u201d 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 If you wish to add text to a post or page that is displayed exactly as you type it, the&nbsp;Preformatted Block&nbsp;is for you. You can create one by clicking the Block&nbsp;Inserter icon. You can also type &#8220;\/preformatted&#8221; and hit the enter key in an empty paragraph block to [&hellip;]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[80,85],"class_list":["post-11285162","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\/11285162","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=11285162"}],"version-history":[{"count":8,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11285162\/revisions"}],"predecessor-version":[{"id":16360378,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11285162\/revisions\/16360378"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=11285162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=11285162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}