{"id":15480378,"date":"2022-03-21T16:16:09","date_gmt":"2022-03-21T16:16:09","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&#038;p=15480378"},"modified":"2024-04-18T11:13:14","modified_gmt":"2024-04-18T11:13:14","slug":"categories-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/categories-block\/","title":{"rendered":"Categories 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>Use the Categories block to display the posts&#8217; categories. This block is primarily nested inside a<a href=\"https:\/\/wordpress.org\/documentation\/article\/query-loop-block\/\"> query loop<\/a> block and helps to customize the appearance of the query loop.&nbsp;<\/p>\n\n\n\n<p>To add a Categories block, click the <strong>Block Inserter<\/strong> icon when editing the page template. Search for the Categories<strong> block<\/strong>. Click on it to add the block to your page template.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/06\/adding-category-block.mp4\"><\/video><figcaption class=\"wp-element-caption\">Video showing how to add Categories block<\/figcaption><\/figure>\n\n\n\n<p>You can also type \/categories and hit enter in a new paragraph block to add the Categories block quickly.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"437\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/06\/categories-block-1024x437.png\" alt=\"\" class=\"wp-image-16357371\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/06\/categories-block-1024x437.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/06\/categories-block-300x128.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/06\/categories-block-768x328.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/06\/categories-block.png 1218w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">How to add Categories block quickly<\/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\/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>To view the block toolbar, click on the block and the toolbar will be displayed.<\/p>\n\n\n\n<p>Every block comes with unique toolbar icons. These block-specific controls allow you to manipulate the block right in the editor.<\/p>\n\n\n\n<p>The Categories block shows five 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>More options<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/3WV4UeF9OMEU_NKd_leRXDGqPy9ulVgkCcN1XIRa8KbA4Bz1_xnc_mEBFs5CmlHrwLwTgnnUz3BhRKfMS-sxJsq4LPZOI6AAmHNWCA2z_PlG17ouwxT56p9k3xELCYUvjSfku6bj\" alt=\"Post Categories block toolbar\" style=\"width:328px;height:86px\" width=\"328\" height=\"86\" \/><figcaption class=\"wp-element-caption\">Categories block toolbar<\/figcaption><\/figure>\n\n\n\n<p><strong>Transform to:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/HRiiDD2-NxeqwS1AwcQRZT2BzNxUZwyf5hYEVzr2-e0NrdzkDAEoo9Rz2VwT-cFOU_tIjqHt36WcXBJEza-4tiJAORuJdvbnJwObinmqDFhNwiAFN4jVYGo9tRpISzmQKII0Hr--\" alt=\"Transform options in Post Categories block\" style=\"width:313px;height:195px\" width=\"313\" height=\"195\" \/><figcaption class=\"wp-element-caption\">Transform options in Categories block<\/figcaption><\/figure>\n\n\n\n<p>Click on the \u201cTransform\u201d button to convert the Categories block into a \u201cGroup\u201d block or \u201cColumns\u201d block.&nbsp;<\/p>\n\n\n\n<p><strong>Drag icon:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/LOeUP5AIHfAVcf3TJ48liWDB9P3l3HFu-rcuhFCvMx45GbaO5ffRRdFG_Q8Dx1go4uUH9dvwgAtOJCBcB7IfOp0dJ7SiutLyWu3cg2Fzzjhbq92NEHVuXtIvsEdBYSkp-sW91FtU\" alt=\"Drag icon in the Post Categories block\" style=\"width:298px;height:78px\" width=\"298\" height=\"78\" \/><figcaption class=\"wp-element-caption\">Drag icon in the Categories block<\/figcaption><\/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<p><strong>Move arrows:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/lgn3n_EG2vlBv_qwEck8d1VwrvP6k2N3bDpvfzgUk4-4FnefAFae6zUyhQAvN10qZ5vR7RZb4KtNAEDuYYUv5DM_qWuvCZFMx9NckyfXqocD7pInnEEfWasN83XTTDPms1qKwc2w\" alt=\"Move arrows in the Post Categories block\" style=\"width:324px;height:85px\" width=\"324\" height=\"85\" \/><figcaption class=\"wp-element-caption\">Move arrows in the Categories block<\/figcaption><\/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<p><strong>Change text alignment<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/JsIE08dBZF7XXtboBBffzuApeuJsY5W-Gk-_8kDve2NY0FQupCXlYCzWh_3_OYNk_eFMoZPa73Rd8QFDJ36ZKbhZLiGMPuoWEyCWUbO076kaWEumQG2TlQvIOm80Q4hEUTg46SAR\" alt=\"Change text alignment in Post Categories block\" style=\"width:209px;height:244px\" width=\"209\" height=\"244\" \/><figcaption class=\"wp-element-caption\">Change text alignment in Categories block<\/figcaption><\/figure>\n\n\n\n<p>Click the \u201cChange alignment\u201d button in the Block toolbar to display the alignment drop-down. You can align the block text to the left, make it center-aligned or align it to the right.<\/p>\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\/\"><\/a><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<p>In addition to the block toolbar, every block has specific options in the editor sidebar.<\/p>\n\n\n\n<p><em>If you do not see the sidebar, click the 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=\"510\" height=\"1024\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/06\/categories-sidebar-block-510x1024.png\" alt=\"\" class=\"wp-image-16357379\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/06\/categories-sidebar-block-510x1024.png 510w, https:\/\/wordpress.org\/documentation\/files\/2023\/06\/categories-sidebar-block-149x300.png 149w, https:\/\/wordpress.org\/documentation\/files\/2023\/06\/categories-sidebar-block.png 564w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><figcaption class=\"wp-element-caption\">How to turn on the Block Settings sidebar<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/wHmRVAi6nYepDTXi8d1FIZv-CxZMbcVegcGukQTMZ4QLt8LbfDWPyT79kqzjy7VdR0j4wSmnCLzl_BvHmriddozeT8XT9z0uEJHJ96eJI2c2NHjJch3JNXNE440LO6wJpUhucqaT\" alt=\"Post Categories Block Settings\" style=\"width:274px;height:373px\" width=\"274\" height=\"373\" \/><figcaption class=\"wp-element-caption\">Categories Block Settings<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Color <\/h3>\n\n\n\n<p>You can customize the text color, background color, and link color for the Categories block.<em> The color options available will vary based on the theme.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/0xbjED8Xcq2uvW_MRx-f4xFAtrHhsqBtNzsUhfGZ3fnIcrN0zUOSRjpbt_jN3ftq3C2ZVN5mbywFe2x-EvbteDa4M7X7u3Kn2kpzjSXHKv01I0mZA1fQXB5JlBv25rDJMYvq2xO2\" alt=\"Color settings in the Post Categories block\" style=\"width:352px;height:217px\" width=\"352\" height=\"217\" \/><figcaption class=\"wp-element-caption\">Color settings in the Categories 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\/more-options\/\"><\/a><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>On this tab, you can adjust properties such as the Font size, Font family, Appearance, Line height, Letter spacing, Decoration and Letter case.<\/p>\n\n\n\n<p>To access all the typography options click on the + button in the right corner of the Typography tab.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"566\" height=\"946\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/06\/typography-settings-categories-block-sidebar.png\" alt=\"\" class=\"wp-image-16357383\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/06\/typography-settings-categories-block-sidebar.png 566w, https:\/\/wordpress.org\/documentation\/files\/2023\/06\/typography-settings-categories-block-sidebar-179x300.png 179w\" sizes=\"auto, (max-width: 566px) 100vw, 566px\" \/><figcaption class=\"wp-element-caption\">Typography settings in the Categories 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\/more-options\/\"><\/a><a href=\"https:\/\/wordpress.org\/documentation\/article\/colors-settings-overview\/\"><\/a><a href=\"https:\/\/wordpress.org\/documentation\/article\/typography-settings-overview\/\">Get more details about changing typography settings.<\/a><\/p>\n\n\n\n<p><strong>Advanced settings:&nbsp;<\/strong><\/p>\n\n\n\n<p>The \u201cAdvanced\u201d tab lets you enter character(s) that can be used to separate the category terms. The default setting is a comma.<\/p>\n\n\n\n<p>You can also add CSS class(es) to your block. This will allow you to write custom CSS and styles to the block.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/H-xgyZI4MHCRcqoMzljOc0HYoPI1dSar7N_ZoHE9yzqRWz7OPBs4Q3Wh-Dz_4a8L2HKTSrSOnB5fbwHW66ronVjRuY75DtqwU7fbhzTmhi0RYXqA06e18hDVq4gNGORyAasp11mC\" alt=\"Advanced setting in Post Categories block\" style=\"width:278px;height:256px\" width=\"278\" height=\"256\" \/><figcaption class=\"wp-element-caption\">Advanced setting in Post Categories block<\/figcaption><\/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>Updated on 2023-06-27\n<ul class=\"wp-block-list\">\n<li>Renamed &#8216;Post Categories Block&#8217; with &#8216;Categories Block&#8217;<\/li>\n\n\n\n<li>Updated screenshots\/video to 6.2.2<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Created 2022-03-21 <\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Go to the List of Blocks Use the Categories block to display the posts&#8217; categories. This block is primarily nested inside a query loop block and helps to customize the appearance of the query loop.&nbsp; To add a Categories block, click the Block Inserter icon when editing the page template. Search for the Categories block. [&hellip;]<\/p>\n","protected":false},"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,91],"class_list":["post-15480378","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\/15480378","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=15480378"}],"version-history":[{"count":5,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/15480378\/revisions"}],"predecessor-version":[{"id":16358262,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/15480378\/revisions\/16358262"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=15480378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=15480378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}