{"id":20,"date":"2024-03-13T13:19:43","date_gmt":"2024-03-13T13:19:43","guid":{"rendered":"https:\/\/www.mtsu.edu\/style-guide\/?page_id=20"},"modified":"2026-08-19T07:22:29","modified_gmt":"2026-08-19T07:22:29","slug":"mtsu-custom-blocks","status":"publish","type":"page","link":"https:\/\/www.mtsu.edu\/web-training\/mtsu-custom-blocks\/","title":{"rendered":"MTSU Custom Blocks"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Expandable Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This section highlights the custom WordPress blocks created specifically for use across our websites. These blocks are designed to support university branding, accessibility standards, and common content needs that are not fully met by core WordPress blocks. Editors are encouraged to use these custom blocks to ensure consistency, flexibility, and compliance with institutional guidelines.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Please click the name of each block to learn more about the block and how to use it within the WordPress editor.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-query is-layout-flow wp-block-query-is-layout-flow\"><ul class=\"columns-3 wp-block-post-template is-layout-grid wp-container-core-post-template-is-layout-cda6dc4f wp-block-post-template-is-layout-grid\"><li class=\"wp-block-post post-970 post type-post status-publish format-standard has-post-thumbnail hentry category-blocks tag-expandable-block tag-mtsu-blocks tag-wordpress-blocks\">\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-03ac971c wp-block-group-is-layout-flex\"><figure style=\"height:50px\" class=\"wp-block-post-featured-image\"><a href=\"https:\/\/www.mtsu.edu\/web-training\/2026\/05\/13\/mtsu-expandable-blocks\/\" target=\"_self\"  style=\"height:50px\"><img decoding=\"async\" src=\"https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/05\/expandableblock.svg\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"MTSU Expandable Blocks\" style=\"height:50px;object-fit:cover;\" \/><\/a><\/figure>\n\n<h2 class=\"wp-block-post-title\"><a href=\"https:\/\/www.mtsu.edu\/web-training\/2026\/05\/13\/mtsu-expandable-blocks\/\" target=\"_self\" >MTSU Expandable Blocks<\/a><\/h2><\/div>\n\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">The MTSU Expandable Blocks allow you to organize content into expandable sections that users can open and close. This is useful for FAQs or pages with a lot of information, as it helps keep content compact and easier to navigate. <\/p><\/div><\/div>\n\n<\/li><li class=\"wp-block-post post-979 post type-post status-publish format-standard has-post-thumbnail hentry category-blocks tag-icon tag-mtsu-blocks tag-wordpress-blocks\">\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-03ac971c wp-block-group-is-layout-flex\"><figure style=\"height:50px\" class=\"wp-block-post-featured-image\"><a href=\"https:\/\/www.mtsu.edu\/web-training\/2026\/05\/13\/mtsu-font-awesome-icon-block\/\" target=\"_self\"  style=\"height:50px\"><img decoding=\"async\" src=\"https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/05\/fontawesome.svg\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"MTSU Font Awesome Icon Block\" style=\"height:50px;object-fit:cover;\" \/><\/a><\/figure>\n\n<h2 class=\"wp-block-post-title\"><a href=\"https:\/\/www.mtsu.edu\/web-training\/2026\/05\/13\/mtsu-font-awesome-icon-block\/\" target=\"_self\" >MTSU Font Awesome Icon Block<\/a><\/h2><\/div>\n\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">The Custom Icon block allows you to add Font Awesome icons to your content for visual emphasis or branding purposes. It is useful for highlighting key information, supporting visual hierarchy, or adding recognizable iconography not available in core WordPress blocks. <\/p><\/div><\/div>\n\n<\/li><li class=\"wp-block-post post-985 post type-post status-publish format-standard has-post-thumbnail hentry category-blocks tag-info-icon tag-mtsu-blocks tag-wordpress-blocks\">\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-03ac971c wp-block-group-is-layout-flex\"><figure style=\"height:50px\" class=\"wp-block-post-featured-image\"><a href=\"https:\/\/www.mtsu.edu\/web-training\/2026\/05\/13\/mtsu-icon-info-blocks\/\" target=\"_self\"  style=\"height:50px\"><img decoding=\"async\" src=\"https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/05\/infoiconblock.svg\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"MTSU Icon Info Blocks\" style=\"height:50px;object-fit:cover;\" \/><\/a><\/figure>\n\n<h2 class=\"wp-block-post-title\"><a href=\"https:\/\/www.mtsu.edu\/web-training\/2026\/05\/13\/mtsu-icon-info-blocks\/\" target=\"_self\" >MTSU Icon Info Blocks<\/a><\/h2><\/div>\n\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">The Icon Callout block allows you to display an icon alongside a heading, supporting text, and a button. It is useful for highlighting key information, promoting actions, or creating visually engaging content sections that guide users\u2019 attention. <\/p><\/div><\/div>\n\n<\/li><li class=\"wp-block-post post-989 post type-post status-publish format-standard has-post-thumbnail hentry category-blocks tag-image-buttons-block tag-mtsu-blocks tag-wordpress-blocks\">\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-03ac971c wp-block-group-is-layout-flex\"><figure style=\"height:50px\" class=\"wp-block-post-featured-image\"><a href=\"https:\/\/www.mtsu.edu\/web-training\/2026\/05\/13\/mtsu-image-buttons-block\/\" target=\"_self\"  style=\"height:50px\"><img decoding=\"async\" src=\"https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/05\/imageblocks.svg\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"MTSU Image Buttons Block\" style=\"height:50px;object-fit:cover;\" \/><\/a><\/figure>\n\n<h2 class=\"wp-block-post-title\"><a href=\"https:\/\/www.mtsu.edu\/web-training\/2026\/05\/13\/mtsu-image-buttons-block\/\" target=\"_self\" >MTSU Image Buttons Block<\/a><\/h2><\/div>\n\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">The Image Button Grid block displays a set of buttons arranged in a grid, each with a background image and text overlay. It is useful for creating visually engaging navigation, highlighting key actions, or directing users to important content areas. <\/p><\/div><\/div>\n\n<\/li><li class=\"wp-block-post post-993 post type-post status-publish format-standard has-post-thumbnail hentry category-blocks tag-image-cards tag-mtsu-blocks tag-wordpress-blocks\">\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-03ac971c wp-block-group-is-layout-flex\"><figure style=\"height:50px\" class=\"wp-block-post-featured-image\"><a href=\"https:\/\/www.mtsu.edu\/web-training\/2026\/05\/13\/mtsu-image-cards-block\/\" target=\"_self\"  style=\"height:50px\"><img decoding=\"async\" src=\"https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/05\/imagecard.svg\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"MTSU Image Cards Block\" style=\"height:50px;object-fit:cover;\" \/><\/a><\/figure>\n\n<h2 class=\"wp-block-post-title\"><a href=\"https:\/\/www.mtsu.edu\/web-training\/2026\/05\/13\/mtsu-image-cards-block\/\" target=\"_self\" >MTSU Image Cards Block<\/a><\/h2><\/div>\n\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">The Image Content Card block displays a card-style layout featuring an image at the top, followed by a heading, supporting text, an optional list, and a call-to-action button. It is useful for highlighting featured content, promoting key pages, or presenting information in a visually structured and engaging way. <\/p><\/div><\/div>\n\n<\/li><li class=\"wp-block-post post-997 post type-post status-publish format-standard has-post-thumbnail hentry category-blocks tag-mtsu-blocks tag-wordpress-blocks tag-youtube-playlist\">\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-03ac971c wp-block-group-is-layout-flex\"><figure style=\"height:50px\" class=\"wp-block-post-featured-image\"><a href=\"https:\/\/www.mtsu.edu\/web-training\/2026\/05\/13\/mtsu-youtube-playlist-block\/\" target=\"_self\"  style=\"height:50px\"><img decoding=\"async\" src=\"https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/05\/youtubeplaylist.svg\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"MTSU YouTube Playlist Block\" style=\"height:50px;object-fit:cover;\" \/><\/a><\/figure>\n\n<h2 class=\"wp-block-post-title\"><a href=\"https:\/\/www.mtsu.edu\/web-training\/2026\/05\/13\/mtsu-youtube-playlist-block\/\" target=\"_self\" >MTSU YouTube Playlist Block<\/a><\/h2><\/div>\n\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">The YouTube Playlist block allows you to embed an entire YouTube playlist on your page, displaying multiple related videos in one organized view. It is useful for showcasing video series, courses, recorded events, or curated video content without embedding each video individually. <\/p><\/div><\/div>\n\n<\/li><\/ul><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Expandable Block This section highlights the custom WordPress blocks created specifically for use across our websites. These blocks are designed to support university branding, accessibility standards, and common content needs that are not fully met by core WordPress blocks. Editors are encouraged to use these custom blocks to ensure consistency, flexibility, and compliance with institutional [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-bannernosidebar.php","meta":{"footnotes":""},"class_list":["post-20","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":1,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":1075,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/pages\/20\/revisions\/1075"}],"wp:attachment":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/media?parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}