{"id":13740825,"date":"2020-12-03T17:58:39","date_gmt":"2020-12-03T17:58:39","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&#038;p=13740825"},"modified":"2024-06-08T18:43:01","modified_gmt":"2024-06-08T18:43:01","slug":"search-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/search-block\/","title":{"rendered":"Search 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>Use the <em>Search block<\/em> to place a search widget on your page or post.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"502\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/search-block-1024x502.jpg\" alt=\"The search block\" class=\"wp-image-16358722\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/search-block-1024x502.jpg 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/search-block-300x147.jpg 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/search-block-768x377.jpg 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/search-block-1536x753.jpg 1536w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/search-block.jpg 1999w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Click <strong>Block inserter <\/strong>(<strong>+<\/strong>) icon to open the block inserter pop-up window and search for the <em>Search block<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Loom-Message-5-August-2023.mp4\"><\/video><figcaption class=\"wp-element-caption\">Demonstration to add a search block<\/figcaption><\/figure>\n\n\n\n<p>You can also use the keyboard shortcut <kbd>\/search<\/kbd> to quickly insert a <em>Search block<\/em>.&nbsp;<\/p>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f5fa\">Detailed instructions on adding blocks can be found <a href=\"https:\/\/wordpress.org\/support\/article\/adding-a-new-block\/\">here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"block-toolbar\">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<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/toolbar.png\" alt=\"Search block toolbar\" class=\"wp-image-16355603\" style=\"width:503px;height:87px\" width=\"503\" height=\"87\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/toolbar.png 670w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/toolbar-300x52.png 300w\" sizes=\"auto, (max-width: 503px) 100vw, 503px\" \/><\/figure>\n\n\n\n<p>Every block comes with unique toolbar icons and blocks specific user controls that allow you to manipulate the block right in the editor.<\/p>\n\n\n\n<p>The <em>Search block<\/em> shows standard eight buttons:<\/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 handles<\/li>\n\n\n\n<li>Change text alignment<\/li>\n\n\n\n<li>Toggle search label<\/li>\n\n\n\n<li>Change button position<\/li>\n\n\n\n<li>Use button with Icon<\/li>\n\n\n\n<li>More options<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Adding placeholder text<\/h3>\n\n\n\n<p>When you add a <em>Search block<\/em>, you have an option to add placeholder text inside the search field. The placeholder text is displayed until the user starts typing in a search term in the search field.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"241\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/placeholder-text-3-1024x241.png\" alt=\"Search block placeholder text\" class=\"wp-image-16355607\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/placeholder-text-3-1024x241.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/placeholder-text-3-300x71.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/placeholder-text-3-768x181.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/placeholder-text-3.png 1384w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Transform to<\/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\/2023\/02\/transform-1.png\" alt=\"Transform to option\" class=\"wp-image-16355608\" style=\"width:516px;height:305px\" width=\"516\" height=\"305\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/transform-1.png 688w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/transform-1-300x177.png 300w\" sizes=\"auto, (max-width: 516px) 100vw, 516px\" \/><\/figure>\n\n\n\n<p>When you click on the <strong>Transform <\/strong>button you can convert the <em>Search block<\/em> into another block type while keeping the existing content.<\/p>\n\n\n\n<p>Click on the <strong>Transform<\/strong> button to convert the Search block into a <em>Columns<\/em> or <em>Group<\/em> block. <em>Group<\/em> block gives you the ability to change the background color around the <em>Search block<\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Drag icon<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"688\" height=\"116\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/drag-icon.png\" alt=\"Drag icon on the search block toolbar\" class=\"wp-image-16355609\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/drag-icon.png 688w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/drag-icon-300x51.png 300w\" sizes=\"auto, (max-width: 688px) 100vw, 688px\" \/><\/figure>\n\n\n\n<p>To drag and drop the block to a new location on the page template, click and hold the <strong>drag<\/strong> icon, then drag it 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 is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/move-block-arrows.png\" alt=\"Move arrows on the search block toolbar\" class=\"wp-image-16355610\" style=\"width:513px;height:89px\" width=\"513\" height=\"89\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/move-block-arrows.png 684w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/move-block-arrows-300x52.png 300w\" sizes=\"auto, (max-width: 513px) 100vw, 513px\" \/><\/figure>\n\n\n\n<p>The <strong>up<\/strong> and <strong>down<\/strong> arrow icons can be used to shift a block up and down on the page. <\/p>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f5fa\">Detailed instructions on moving a block within the editor can be found <a href=\"https:\/\/wordpress.org\/support\/article\/moving-blocks\/\">here<\/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\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/alignment.png\" alt=\"Alignment tool on the search block toolbar\" class=\"wp-image-16355611\" style=\"width:515px;height:92px\" width=\"515\" height=\"92\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/alignment.png 686w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/alignment-300x53.png 300w\" sizes=\"auto, (max-width: 515px) 100vw, 515px\" \/><\/figure>\n\n\n\n<p>Use the change alignment tool to align the <em>Search block<\/em>. The following is a list of the block align options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>None<\/li>\n\n\n\n<li><strong>Align left<\/strong>&nbsp;\u2013 Make the block left-aligned.<\/li>\n\n\n\n<li><strong>Align center<\/strong>&nbsp;\u2013 Make the block alignment centered.<\/li>\n\n\n\n<li><strong>Align right&nbsp;<\/strong>\u2013 Make the block right aligned.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Toggle search label<\/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\/2023\/02\/toggle-search-label.png\" alt=\"Toggle search button on the search block toolbar\" class=\"wp-image-16355612\" style=\"width:516px;height:95px\" width=\"516\" height=\"95\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/toggle-search-label.png 688w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/toggle-search-label-300x55.png 300w\" sizes=\"auto, (max-width: 516px) 100vw, 516px\" \/><\/figure>\n\n\n\n<p>This button can be used to hide the search field label.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Change button position<\/h3>\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\/2023\/08\/image4-1024x531.jpg\" alt=\"Change button position\" class=\"wp-image-16358731\" style=\"width:573px;height:321px\" width=\"573\" height=\"321\" \/><\/figure>\n\n\n\n<p>This button can be used to change the position of the search button. There are three options to choose from:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Button outside<\/strong> \u2013 the default setting.<\/li>\n\n\n\n<li><strong>Button inside<\/strong> \u2013 the search button is part of the search text field.<\/li>\n\n\n\n<li><strong>No button<\/strong> \u2013 removes the Search button and only displays the Search text field on the page.<\/li>\n\n\n\n<li><strong>Button only<\/strong> &#8211; displays only the Search button and hides the Search input text field<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1338\" height=\"198\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/searchblock.png\" alt=\"Search block with button inside setting\" class=\"wp-image-16355614\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/searchblock.png 1338w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/searchblock-300x44.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/searchblock-1024x152.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/searchblock-768x114.png 768w\" sizes=\"auto, (max-width: 1338px) 100vw, 1338px\" \/><figcaption class=\"wp-element-caption\">Button inside setting<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1340\" height=\"142\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/search-placeholder-1.png\" alt=\"Search block with no button setting\" class=\"wp-image-16355616\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/search-placeholder-1.png 1340w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/search-placeholder-1-300x32.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/search-placeholder-1-1024x109.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/search-placeholder-1-768x81.png 768w\" sizes=\"auto, (max-width: 1340px) 100vw, 1340px\" \/><figcaption class=\"wp-element-caption\">No button setting<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"882\" height=\"238\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/image5.jpg\" alt=\"Button only setting\" class=\"wp-image-16358734\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/image5.jpg 882w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/image5-300x81.jpg 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/image5-768x207.jpg 768w\" sizes=\"auto, (max-width: 882px) 100vw, 882px\" \/><figcaption class=\"wp-element-caption\">Button only setting<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Use button with icon<\/h3>\n\n\n\n<p>The search button can be either text or icon.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1348\" height=\"322\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/search-button-text.png\" alt=\"Search button with icon\" class=\"wp-image-16355617\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/search-button-text.png 1348w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/search-button-text-300x72.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/search-button-text-1024x245.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/search-button-text-768x183.png 768w\" sizes=\"auto, (max-width: 1348px) 100vw, 1348px\" \/><figcaption class=\"wp-element-caption\">Search button with text<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1354\" height=\"320\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/search-button-with-icon.png\" alt=\"Search button with icon\" class=\"wp-image-16355618\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/search-button-with-icon.png 1354w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/search-button-with-icon-300x71.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/search-button-with-icon-1024x242.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/search-button-with-icon-768x182.png 768w\" sizes=\"auto, (max-width: 1354px) 100vw, 1354px\" \/><figcaption class=\"wp-element-caption\">Search button with icon<\/figcaption><\/figure>\n\n\n\n<p>Clicking on the Search button or the Search title in the search block will display three more buttons in the Block Toolbar &#8211; Bold, Italic and More Rich Text controls.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1354\" height=\"342\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/text-formatting.png\" alt=\"Text formatting options on the search block toolbar\" class=\"wp-image-16355619\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/text-formatting.png 1354w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/text-formatting-300x76.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/text-formatting-1024x259.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/text-formatting-768x194.png 768w\" sizes=\"auto, (max-width: 1354px) 100vw, 1354px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Bold<\/h3>\n\n\n\n<p>You can select the text in the Search title or the Search button and use the <strong>Bold<\/strong> option or <kbd>Ctrl+B<\/kbd> \/ <kbd>Cmd+B<\/kbd> 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<p>You can select the text in the Search title or the Search button and use the <strong>Italic<\/strong> option or <kbd>Ctrl+I<\/kbd> \/ <kbd>Cmd+I<\/kbd> on your keyboard to italicize it, which usually appears slanted to the right.<\/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>The block settings panel contains customization options specific to the block. To open it, select the block and click the <strong>Settings<\/strong> icon next to the <strong>Publish <\/strong>button.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"71\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/image6-1-300x71.jpg\" alt=\"How to open the block settings sidebar \" class=\"wp-image-16358736\" style=\"object-fit:cover\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/image6-1-300x71.jpg 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/image6-1.jpg 747w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Display settings<\/h3>\n\n\n\n<p>It\u2019s possible to adjust the <strong>Search<\/strong><em> <\/em>block width with the help of the Display Settings:<\/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\/2023\/02\/display-settings.png\" alt=\"Search block display settings\" class=\"wp-image-16355623\" style=\"width:395px;height:204px\" width=\"395\" height=\"204\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/display-settings.png 526w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/display-settings-300x155.png 300w\" sizes=\"auto, (max-width: 395px) 100vw, 395px\" \/><\/figure>\n\n\n\n<p>Alternatively, you can drag the block itself with your mouse:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1360\" height=\"322\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/button-drag.png\" alt=\"Search block drag tool\" class=\"wp-image-16355624\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/button-drag.png 1360w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/button-drag-300x71.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/button-drag-1024x242.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/button-drag-768x182.png 768w\" sizes=\"auto, (max-width: 1360px) 100vw, 1360px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Color<\/h3>\n\n\n\n<p>The <strong>Search<\/strong><em> <\/em>block<em> <\/em>provides Color settings options to change the text and background colors.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f5fa\">For details, refer to this support article: <a href=\"https:\/\/wordpress.org\/support\/article\/colors-settings-overview\/\">Color settings overview<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Typography<\/h3>\n\n\n\n<p>The <strong>Search<\/strong><em> <\/em>block<em> <\/em>provides typography settings to change the font family, size, appearance, line height, letter case, letter spacing, and decoration.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f5fa\">For details, refer to this support article: <a href=\"https:\/\/wordpress.org\/support\/article\/colors-settings-overview\/\"><\/a><a href=\"https:\/\/wordpress.org\/support\/article\/typography-settings-overview\/\">Typography settings overview<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Border<\/h3>\n\n\n\n<p>The <strong>Search<\/strong><em> <\/em>block provides border settings options to change border and radius size.<\/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\/2023\/02\/border.png\" alt=\"Search block border settings\" class=\"wp-image-16355625\" style=\"width:396px;height:221px\" width=\"396\" height=\"221\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/02\/border.png 528w, https:\/\/wordpress.org\/documentation\/files\/2023\/02\/border-300x167.png 300w\" sizes=\"auto, (max-width: 396px) 100vw, 396px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-left has-background\" 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>The Advanced tab lets you add CSS class(es) to your block. This will allow you to write custom CSS and styles for the block.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"182\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Screenshot-2023-08-24-at-8.21.24-AM-300x182.png\" alt=\"Advanced tab setting\" class=\"wp-image-16358745\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Screenshot-2023-08-24-at-8.21.24-AM-300x182.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/08\/Screenshot-2023-08-24-at-8.21.24-AM.png 568w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure>\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-extra-large-font-size\" id=\"changelog\">Changelog <\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Updated 2023-08-24\n<ul class=\"wp-block-list\">\n<li>Updated screennshots and videos for 6.3<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2023-06-20\n<ul class=\"wp-block-list\">\n<li>Updated rich text options section<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2023-02-07\n<ul class=\"wp-block-list\">\n<li>Updated screenshots<\/li>\n\n\n\n<li>Fixed formatting<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2022-11-26\n<ul class=\"wp-block-list\">\n<li>Removed redundant content <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2022-06-16\n<ul class=\"wp-block-list\">\n<li>Updated screenshots, added video for 6.0<\/li>\n\n\n\n<li>Updated 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>Updated 2022-06-06\n<ul class=\"wp-block-list\">\n<li>Update settings screenshot for 6.0<\/li>\n\n\n\n<li>Add &#8220;Use button with icon&#8221; section<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2022-02-04\n<ul class=\"wp-block-list\">\n<li>Updated screenshots to 5.9<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Created 2020-12-03<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Go back to the list of Blocks Use the Search block to place a search widget on your page or post. Click Block inserter (+) icon to open the block inserter pop-up window and search for the Search block. You can also use the keyboard shortcut \/search to quickly insert a Search block.&nbsp; Detailed instructions [&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,90],"class_list":["post-13740825","helphub_article","type-helphub_article","status-publish","hentry","category-customization","category-widget-blocks"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/13740825","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=13740825"}],"version-history":[{"count":10,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/13740825\/revisions"}],"predecessor-version":[{"id":16360390,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/13740825\/revisions\/16360390"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=13740825"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=13740825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}