{"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":"2026-05-25T06:25:50","modified_gmt":"2026-05-25T06:25:50","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 wp-block-paragraph\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/\">Go back to the list of <strong>Blocks<\/strong><\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Add a Preformatted block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can create one by clicking the <strong>Block&nbsp;Inserter<\/strong> icon.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also type <code>\/preformatted<\/code> 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\" width=\"401\" height=\"128\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/10\/Screenshot.png\" alt=\"\" class=\"wp-image-13576984\" style=\"width:301px;height:96px\" 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: 401px) 100vw, 401px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" 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 height=\"1748\" style=\"aspect-ratio: 3574 \/ 1748;\" width=\"3574\" 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 class=\"wp-block-paragraph\">The&nbsp;Preformatted block&nbsp;shares a lot of similarities with the&nbsp;Paragraph block&nbsp;and the&nbsp;Code block<em>.<\/em>&nbsp;Think of it as a hybrid of the two.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Like Paragraph block, the&nbsp;Preformatted block&nbsp;is intended primarily to display text. Unlike the&nbsp;Paragraph block, though, the&nbsp;Preformatted block&nbsp;keeps any spacing or line breaks exactly as they are entered.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Similar to the&nbsp;Code block, the&nbsp;Preformatted block&nbsp;is displayed in a monospace font, making it easy to keep text perfectly aligned. However, the&nbsp;Preformatted block&nbsp;also includes styling and the ability to add hyperlinks (described below) that a&nbsp;Code block&nbsp;doesn&#8217;t have.<\/p>\n\n\n\n<h2 id=\"block-toolbar\" class=\"wp-block-heading\">Block toolbar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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\" width=\"688\" height=\"574\" 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\" 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: 688px) 100vw, 688px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can transform the Preformatted block into Paragraph block, Columns block, Code block, or Group. The Group would give you the ability to change the background color around the Preformatted block.<\/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\" width=\"650\" height=\"126\" 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\" 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: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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\" width=\"650\" height=\"134\" 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\" 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: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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\" width=\"656\" height=\"140\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/02\/Preformatted-block-italic-5.9.png\" alt=\"\" class=\"wp-image-15328388\" style=\"width:328px;height:70px\" 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: 656px) 100vw, 656px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 wp-block-paragraph\" 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 class=\"wp-block-paragraph\">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 wp-block-paragraph\" 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 class=\"wp-block-paragraph\">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 wp-block-paragraph\" 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 id=\"block-settings\" class=\"wp-block-heading\">Block settings<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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\" width=\"1024\" height=\"592\" 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\" 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: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Color settings in the Heading block<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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 wp-block-paragraph\" 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 class=\"wp-block-paragraph\">Typography settings allow you to adjust the Font size, Appearance, Letter case, Line height, and Letter spacing.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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\" width=\"538\" height=\"634\" 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\" 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: 538px) 100vw, 538px\" \/><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 wp-block-paragraph\" 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 id=\"dimensions\" class=\"wp-block-heading\">Dimensions<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This block provides various options to adjust its dimensions, such as width and height, allowing you to customize the text layout to ensure visual consistency.<\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">For details refer to this support article: <a href=\"https:\/\/wordpress.org\/documentation\/article\/dimension-controls-overview\/\">Dimension settings overview<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Border<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The border settings add border color, width, and radius.<\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">For details refer to this support article: <a href=\"https:\/\/wordpress.org\/documentation\/article\/border-settings-overview\/\">Border settings overview<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Advanced<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Preformatted block provides the following Advanced settings options: HTML Anchor, Additional CSS Class(es), and Styles.<\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/advanced-settings-overview\/\">Learn more about advanced settings<\/a><\/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 id=\"changelog\" class=\"wp-block-heading has-large-font-size\">Changelog <\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Updated 2026-05-25 (props to @kjoyner @awetz583)\n<ul class=\"wp-block-list\">\n<li>Updated &#8220;Advanced&#8221; section to refer to new overview page<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2026-02-10 (props to @femkreations @ndiego @awetz583)\n<ul class=\"wp-block-list\">\n<li>Unbolded and sentence cased block name<\/li>\n\n\n\n<li>Added heading above how to add the block<\/li>\n\n\n\n<li>Added dimensions heading and link <\/li>\n\n\n\n<li>Added border heading and link<\/li>\n<\/ul>\n<\/li>\n\n\n\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. Add a Preformatted block You can create one by clicking the Block&nbsp;Inserter icon. You can also type \/preformatted and hit the enter key in an [&hellip;]<\/p>\n","protected":false},"author":7298140,"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false},"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":13,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11285162\/revisions"}],"predecessor-version":[{"id":16368453,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11285162\/revisions\/16368453"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wporg\/v1\/users\/kriskorn"}],"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}]}}