{"id":15779630,"date":"2022-07-18T16:49:22","date_gmt":"2022-07-18T16:49:22","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&#038;p=15779630"},"modified":"2024-06-08T18:33:11","modified_gmt":"2024-06-08T18:33:11","slug":"read-more-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/read-more-block\/","title":{"rendered":"Read More block"},"content":{"rendered":"\n<p class=\"has-text-align-right has-small-font-size\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/\">Go to the List of Blocks<\/a><\/p>\n\n\n\n<p>The Read More<em> <\/em>block allows you to add links in the <a href=\"https:\/\/wordpress.org\/documentation\/article\/query-loop-block\/\" data-type=\"helphub_article\" data-id=\"14633622\">query loop block<\/a> that direct visitors to the posts. With this block, you get more flexibility to customize the Read More links and make them look appealing<\/p>\n\n\n\n<p class=\"has-text-align-center\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/9GqmdYhH_mCSj-IujtQorMnl6DoxTHeYkBHHhyz_bgM-XRliW6CzBz0dXRHQbDZcU_CmbCCV3CXnRV-EVRfbI3oc6o33zKMATUqGaMb4SwCEko2lnNBVaJLnwln1yIBySJIzbCdKtoZRW83cSDE\" style=\"width: 400px\"><\/p>\n\n\n\n<p>To add a Read More block, click the (+) icon to open the block inserter pop-up window and search for the Read More block. Click on it to add the block to your page template.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/07\/read-more-1--1024x709.gif\" alt=\"\" class=\"wp-image-16243385\" \/><\/figure>\n\n\n\n<p>You can also type \/read-more and hit enter in a new paragraph block to add the Read More block quickly.&nbsp;<\/p>\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<h2 class=\"wp-block-heading\">Block toolbar<\/h2>\n\n\n\n<p>Each block has its own toolbar which contains unique controls that let you customize or configure the block.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/B37647tiO8ZNebBqekhLQry9RP4LgwsUFBX-rnoaJq77tcM7zp2K-dDjMczvJ02pfeY1eJlANU9w2D34obQQRPXMVbpQ6U9OgUcadsulI7dYoHDGmgL8v9XhbO09iQ4O0CP7WgHSkKV1MnAl6o8\" alt=\"Block toolbar in Read More block\" \/><\/figure>\n\n\n\n<p>The Read More block has the following options on its toolbar:<\/p>\n\n\n\n<p><strong>Transform to:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/33GIUbRdVKvheSv9axPq4rBen2Vv7vvSx9t-t-dhSuO2x-eTXSYL8ZjEQJj07mbhiZDJp0iW5Za7_ukSjvrSDmOw8-sYi6RdRFuxHXwXvDuLutyk3W4KLLPKnWay-zL8RT9SEJpv5-CNQ-lqYPo\" alt=\"Transform  in Read More block\" \/><\/figure>\n\n\n\n<p>If you click the Transform button, you\u2019ll see the options to convert the Read More block into Columns and Group blocks.<\/p>\n\n\n\n<p><strong>Block moving tools<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/9t1G0HC4AyyKJ7rSPcSFupTsBcyt_IIchs8uPsFLA8G06Q1xzEeYnlhnYRG0N11XrXwdOLhoxznqz8wsHg7Z7RqcjMIBWW_URlyfIpMAz-sqBq5WKrG8qB17iC7FwyAz6PFi11KUKLJCoBaqgU8\" alt=\"Moving tools  in Read More block\" \/><\/figure>\n\n\n\n<p>There are two block-moving tools for the Read More block. The six dots icon lets you drag and drop the Read More block and reposition it anywhere on the editor, while the up and down arrows let you move the Read More block up or down on the editor.<\/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\">Text editing options<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/q4KrohHBeiuDG2OggUN6XuQYvoUkIdYQ87KElgBFL8Qe_QhBzNYSo_F6YtyLJN3GtxsBgP8NgBtpQKKDgBDvBE5MJmquyXcN8qPtvDcSJ2tQl4oKXPqm5upd_T1z8gyNE_2ToOKzfnmyJpx19H8\" alt=\"Text editing option  in Read More block\" \/><\/figure>\n\n\n\n<p><strong>Bold and Italics<\/strong><\/p>\n\n\n\n<p>Bold and italics formatting have their own formatting buttons on the toolbar for your convenience. Alternatively, use keyboard shortcuts when formatting. The shortcuts are as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CTRL+b (Windows) or Command+b (macOS) for bold<\/li>\n\n\n\n<li>CTRL+i (Windows) or Command+i (macOS) for italics<\/li>\n<\/ul>\n\n\n\n<p><strong>More Text Formatting Options<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/-utiPwrnQv_wuK3s4BjCI2FMTMUOCCRtnBQdyqw0CydfxlfveCCt9ymEpp05P4_bdNu5XE86d8YsLLRmNcCF72sERgNd8MrlVF6evWjiLPY1y5k-XpOpxSa024Ue3u3ycockd9KZlQA1ry7R-t0\" alt=\"More text formatting options  in Read More block\" \/><\/figure>\n\n\n\n<p>If you click the down arrow icon, the toolbar will open a drop-down menu that contains more text formatting options.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Highlight lets you pick a custom text and background colors to make the text more noticeable.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/15GxhKgJG_c5bn2Ub5OuYs1HmF2B0ZCpz37IEPFM6oXoKLW0qoRkOs0sLzOa7xZdwhoKmDZK-dRBFEotux30wsOLRUXKuLg7tc7URHmM7Mlow1yLqdgGTObp18C_tuUkFOAHEer7pLtYH6R_kpU\" alt=\"Color options  in Read More block\" style=\"width:341px;height:390px\" width=\"341\" height=\"390\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Inline code formats the text into a code snippet and prevents the code from being executed.<\/li>\n\n\n\n<li>Inline image allows you to add an image to the text. You can set the desired pixel width for the image.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/3aDykAe_gWBS3ud_t13TRGuHXJtAEB6ox1xCNp2RxBhEjcTAxA5IWA1epzx4L0ZrhAEwpabRY2jGX5OOV9ZuBzbgnG78gvB1bzKxDb21LYkSPQZUKI_aMhD16p6NS-g335kxjyYBFv8Mlgkih58\" alt=\"Adding Inline image  in Read More block\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Keyboard input adds the &lt;kbd&gt; tag to the text, making it render using the monospace font on the browser.<\/li>\n\n\n\n<li>Strikethrough adds a line that runs through the selected text.<\/li>\n\n\n\n<li>Subscript and superscript allow you to change the text to a subscript or superscript format.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">More options<\/h3>\n\n\n\n<p>These controls give you the option to copy, duplicate, and edit your block as HTML.<\/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\">Block settings<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/X0cYOCCzuNr8UfYTHfNndg0yM_FlriA194V9OYRtEDsKmV_z6hgiPjIyaDQsbNNwjWyUWqRXv9GEShME4U8zqFwUMdvSieHlKluiR7oHBEIldLTZ0iF37DAIS8-5ul6UXXQ2SCO5IHReb1CRVYY\" alt=\"Block sidebar  in Read More block\" style=\"width:362px;height:251px\" width=\"362\" height=\"251\" \/><\/figure>\n\n\n\n<p>Every block has specific options in the block settings panel. To open it, select the block and click the cog icon next to the Publish button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Link <\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/jOhnGnIVqU7wbncMau6xq7AycdHHHTlSKgUWzAZySV6wFVOXRo4yInXthgpJAV7j50LV9AtmG6F1997Y8qWEtTkJyJm-z-0qIETaRZSWtnJtX5BRFl7-ZghTvstIMLECE1kE8YgzGMDDq0SEexQ\" alt=\"Link settings  in Read More block\" \/><\/figure>\n\n\n\n<p>If you enable the <em>Open in new tab<\/em> option, the link will load the post in a new tab.<\/p>\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 is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/B1trY2lzBIfogI_84yDqfauTu6yM8RxkBezczPRt0NcSUimnMTqL_tgREWH-TMp67fVd7z9QhKCHkUmSCaIm5EgTq2P17gbnSf0zSHtHnAttHlYqFDXqQnWXosR-bDeWKCT9VGgQMJHDNFOdb98\" alt=\"Color settings  in Read More block\" style=\"width:356px;height:194px\" width=\"356\" height=\"194\" \/><\/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 is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/7RNqFjtfqHIfoYBqAmRybd0M1GUB1vU8dT7BlYVuZGaiP08l10fKfvftHyOBzAgMeVx0rCC5Y6FqIgJKgbmkiGsvJfCjxrvjRqjCwqC_sov_mBhk1_z21rzAZ3ovAggjcb2C_-EqMl-cbu-1Mr4\" alt=\"Typography  in Read More block\" style=\"width:359px;height:249px\" width=\"359\" height=\"249\" \/><\/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>The Dimensions settings allow you to customize the padding and margin for the block. Padding is the space between the block outline and the block content, while margin is the gap to other blocks.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/rT5o-TkbwuRX9uhHvBBuiBZY0yBfJTdvz7BA9w74ZFn-_sQN91yfiYj7MGbR8iBYjFdkkjX1LGIXGyR2Pd9kJ19S_s-0fScQkZAxFbWluIdHVCIOTjU1Ec4G6XJFnU9C53ng1rY9tznM-7fOMw4\" alt=\"Dimensions in Read More block\" \/><\/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\">Border<\/h3>\n\n\n\n<p>The Border settings allow you to create a border for the selected block. You can define the border width value using one of the six available unit options, similar to padding and margin.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/GYyU85d01ULKnAz5YUIZmIzTdmgRHbPp2jbVtyMZQXnkWRZOfHuYS9pZ_sB2a0X_xAOt84cuH8933HaU6D4uXjJvEgVzUoKbWKVPox-qxwQsmVpNdLsy1Tt7CHsshnbTL7Im1mTntMOX89aaxdY\" alt=\"Border settings  in Read More block\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/border-settings-overview\/\">Learn more about border settings.<\/a><\/p>\n\n\n\n<p><strong>Advanced<\/strong><\/p>\n\n\n\n<p>The Advanced section lets you add CSS classes to use a custom style for the selected Read More block.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/TbFHDc5svx32DUVzVJN2wkflNbRAj2iD9n77-U63sLjZdp_YxmlxItU-DRrGIR5pvB0BCzejtL91ouvi2iQzYjf6n0uQD475Yy-QQQK9Gw4dUJgFKM5zDmj_Wk8iDSWNJ1hpDOHwcDPf6v0FKLM\" alt=\"Advanced CSS  in Read More block\" \/><\/figure>\n\n\n\n<div id=\"changelog\" class=\"wp-block-group changelog has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"background-color:#dce5ec\">\n<h2 class=\"wp-block-heading has-medium-font-size\">Changelog<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Created 2022-07-18<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Go to the List of Blocks The Read More block allows you to add links in the query loop block that direct visitors to the posts. With this block, you get more flexibility to customize the Read More links and make them look appealing To add a Read More block, click the (+) icon to [&hellip;]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[80,91],"class_list":["post-15779630","helphub_article","type-helphub_article","status-publish","hentry","category-customization","category-theme-blocks"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/15779630","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=15779630"}],"version-history":[{"count":4,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/15779630\/revisions"}],"predecessor-version":[{"id":16360382,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/15779630\/revisions\/16360382"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=15779630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=15779630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}