{"id":437,"date":"2020-05-27T04:25:04","date_gmt":"2020-05-27T04:25:04","guid":{"rendered":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/?page_id=437"},"modified":"2022-09-13T00:33:33","modified_gmt":"2022-09-13T04:33:33","slug":"button-block","status":"publish","type":"page","link":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/products\/nc-state-web-platform\/blocks\/button-block\/","title":{"rendered":"Buttons Block"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Use Cases<\/h2>\n\n\n\n<p>The Buttons block is a nice way to include styled hyperlinks on a page or post. Effective in grabbing a reader&#8217;s attention at the end of paragraph or story, the Buttons block can be a good way to prompt users to dig deeper into a site and explore other relevant content. That said, it is important to be mindful of the placement of a Buttons block, as readers will typically expect to find them at the end of a thought. Placement elsewhere, such as the beginning or middle of a paragraph, can oftentimes come off as irregular to a user. See an example of the Buttons block below. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"596\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/screen-shot-button-1024x596.png\" alt=\"\" class=\"wp-image-587\" srcset=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/screen-shot-button-1024x596.png 1024w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/screen-shot-button-300x175.png 300w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/screen-shot-button-768x447.png 768w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/screen-shot-button.png 1310w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Features<\/h2>\n\n\n\n<p>In Gutenberg, adding a Buttons block to a page is as easy as clicking the &#8220;Add a block&#8221; button and choosing &#8220;Buttons&#8221; from the block list. Alternatively, the block can be found by using the &#8220;Search for a block&#8221; function. For more info on blocks and adding them to a WordPress site, see our <a rel=\"noreferrer noopener\" href=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/platforms\/nc-state-theme\/blocks\/\" target=\"_blank\">documentation on blocks<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"878\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/button-pt-1.gif\" alt=\"\" class=\"wp-image-588\"\/><\/figure>\n\n\n\n<p>Once added, the Buttons block is easy to setup. Creators will simply need to provide a link and call to action. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"878\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/button-pt-2.gif\" alt=\"\" class=\"wp-image-589\"\/><\/figure>\n\n\n\n<p>Additional customization is also available through the block settings found on the right-hand side menu where the style of the block can be change.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"878\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/button-pt-3.gif\" alt=\"\" class=\"wp-image-590\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Additional Functionalities<\/h2>\n\n\n\n<p>Another trick is that the styling of the Buttons block&nbsp;is context aware in some cases. For example, when a YouTube link is placed in the Buttons block\u2019s URL field, it will stylize the button to display a \u201cplay\u201d icon. This helps communicate to visitors of your site that the button leads to a video.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"396\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/11\/block-button-play-icon-demo.gif\" alt=\"\" class=\"wp-image-1556\"\/><\/figure>\n\n\n\n<p>In a recent update of the Buttons block, it also now possible to add multiple buttons within a single block. This update also supports alternative stylings across each specific button (see example below).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"852\" height=\"317\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/08\/buttons-block-update.jpg\" alt=\"\" class=\"wp-image-2335\" srcset=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/08\/buttons-block-update.jpg 852w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/08\/buttons-block-update-300x112.jpg 300w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/08\/buttons-block-update-768x286.jpg 768w\" sizes=\"(max-width: 852px) 100vw, 852px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Need help?<\/h2>\n\n\n\n<p>Have questions? Feel free to reach out with any questions or concerns at\u00a0<a href=\"http:\/\/go.ncsu.edu\/ucomm-dev-request\">go.ncsu.edu\/ucomm-dev-request<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use Cases The Buttons block is a nice way to include styled hyperlinks on a page or post. Effective in grabbing a reader&#8217;s attention at the end of paragraph or&hellip;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":178,"menu_order":15,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ncst_dynamicHeaderBlockName":"ncst\/default-header","ncst_dynamicHeaderData":"{\"pageIntro\":\"A stylish alternative to basic hyperlinks.\"}","ncst_content_audit_freq":"","ncst_content_audit_date":"","footnotes":"","_links_to":"","_links_to_target":""},"acf":[],"_links":{"self":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/437"}],"collection":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/comments?post=437"}],"version-history":[{"count":8,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/437\/revisions"}],"predecessor-version":[{"id":3002,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/437\/revisions\/3002"}],"up":[{"embeddable":true,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/178"}],"wp:attachment":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}