{"id":74737,"date":"2019-03-04T15:27:37","date_gmt":"2019-03-04T21:27:37","guid":{"rendered":"https:\/\/wpengine.com\/?p=74737"},"modified":"2024-01-01T01:21:23","modified_gmt":"2024-01-01T07:21:23","slug":"four-atomic-blocks-for-creating-dynamic-website-content","status":"publish","type":"post","link":"https:\/\/wpengine.com\/resources\/four-atomic-blocks-for-creating-dynamic-website-content\/","title":{"rendered":"Four Atomic Blocks for Creating Dynamic Website Content"},"content":{"rendered":"<p>At WP Engine, our goal is to help you create stunning, functional, and highly performant WordPress sites. We want to\u00a0facilitate an easy path for our customers to build and maintain beautiful websites. One of the reasons <a href=\"https:\/\/wpengine.com\/blog\/wp-engine-acquires-studiopress\/\" target=\"_blank\" rel=\"noopener\">we acquired<\/a> StudioPress and the Genesis Framework was because we wanted our customers to have easily accessible, highly regarded WordPress themes. We&#8217;re deeply invested and committed\u00a0to extending the capabilities of WordPress and providing our customers with an unmatched digital experience platform.<\/p>\n<p><span style=\"font-weight: 400;\">It was for that reason we also recently brought Array Themes and its Atomic Blocks library into the <\/span><a href=\"https:\/\/wpengine.com\/blog\/bringing-array-themes-into-the-wp-engine-family\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">WP Engine family.<\/span><\/a><span style=\"font-weight: 400;\"> Array Themes offers beautiful, easy-to-use, premium WordPress themes that, alongside our StudioPress themes, provide WP Engine customers with the resources and agility they need to design beautiful sites.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">However, there are many facets to designing and building a site in WordPress beyond the theme. WordPress core engineers have been hard at work this past year evolving and improving the WordPress editing experience. WordPress 5.0 and Gutenberg, <\/span><a href=\"https:\/\/wpengine.com\/blog\/wordpress-5-0-is-here\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">which were released<\/span><\/a><span style=\"font-weight: 400;\"> in December of 2018, \u00a0offer WordPress users new ways to design content in the WordPress editor. Designing with blocks is speedier, more enjoyable, and offers more flexibility than the less dynamic classic editor.<\/span><\/p>\n<p>That&#8217;s why Atomic Blocks was an important part of the Array Themes acquisition.\u00a0Atomic Blocks is the most popular and most downloaded library of beautiful, responsive, and customizable blocks for Gutenberg. Even better, the Atomic Blocks collection is always growing. In this article, you&#8217;ll find demos of four blocks that will help you add dynamic content right in the WordPress editor.<\/p>\n<h2>Post Grid Block<\/h2>\n<div style=\"width: 1160px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-74737-1\" width=\"1160\" height=\"647\" autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2019\/03\/Post-Grid-Block-Video_edited.mp4?_=1\" \/><source type=\"video\/webm\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2019\/03\/Post-grid-webm.webm?_=1\" \/><a href=\"https:\/\/wpengine.com\/wp-content\/uploads\/2019\/03\/Post-Grid-Block-Video_edited.mp4\">https:\/\/wpengine.com\/wp-content\/uploads\/2019\/03\/Post-Grid-Block-Video_edited.mp4<\/a><\/video><\/div>\n<p>The Post Grid Block gives you a grid or list view of recent or existing posts that can be added to any page or post on your site. This block is useful for encouraging readers to stay on your site and read more content. You can customize the content according to the order in which it appears, categories, author, post date, and more. You can also adjust the way the posts appear to the reader by using the toggle-like function to display or not display a featured image, author, description, and more.<\/p>\n<h2>Author Profile Block<\/h2>\n<div style=\"width: 1160px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-74737-2\" width=\"1160\" height=\"772\" autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2019\/03\/Author-Profile-Block_edited.mp4?_=2\" \/><source type=\"video\/webm\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2019\/03\/Authour-Profile-webm.webm?_=2\" \/><a href=\"https:\/\/wpengine.com\/wp-content\/uploads\/2019\/03\/Author-Profile-Block_edited.mp4\">https:\/\/wpengine.com\/wp-content\/uploads\/2019\/03\/Author-Profile-Block_edited.mp4<\/a><\/video><\/div>\n<p>Adding an author profile to the classic editor in WordPress was not always the simplest task. The\u00a0<span style=\"font-weight: 400;\">Atomic Blocks <\/span><span style=\"font-weight: 400;\">\u00a0Author Profile Block<\/span><span style=\"font-weight: 400;\"> lets you add a user profile box to your page with an avatar, name, title, profile text, and social media links without ever leaving the editor. You can customize the appearance of the author profile block by changing font size, text and background color, avatar shape, and more.<\/span><\/p>\n<h2>Testimonial\u00a0Block<\/h2>\n<div style=\"width: 1160px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-74737-3\" width=\"1160\" height=\"595\" autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2019\/03\/Testimonial-Block_edited.mp4?_=3\" \/><a href=\"https:\/\/wpengine.com\/wp-content\/uploads\/2019\/03\/Testimonial-Block_edited.mp4\">https:\/\/wpengine.com\/wp-content\/uploads\/2019\/03\/Testimonial-Block_edited.mp4<\/a><\/video><\/div>\n<p>The Testimonial Block helps you bring credibility to your content by allowing you to add a testimonial box to your page with testimonial text,\u00a0a citation name, title,\u00a0and avatar. Customizations include text color, size, background color, and alignment.<\/p>\n<h2>Social Sharing Block<\/h2>\n<div style=\"width: 1160px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-74737-4\" width=\"1160\" height=\"574\" autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2019\/03\/Social-Sharing-Block_edited.mp4?_=4\" \/><source type=\"video\/webm\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2019\/02\/Social-Sharing_edited.webm?_=4\" \/><a href=\"https:\/\/wpengine.com\/wp-content\/uploads\/2019\/03\/Social-Sharing-Block_edited.mp4\">https:\/\/wpengine.com\/wp-content\/uploads\/2019\/03\/Social-Sharing-Block_edited.mp4<\/a><\/video><\/div>\n<p>Sharing options help to improve the reach of your content as well as increase the likelihood of engagement. The Social Sharing Block allows you to add social sharing icons at any point on your page. You can customize the button shape, size, and color as well as choose from a variety of social sharing button including Facebook, Twitter, Pinterest, LinkedIn, Reddit, and Email. To increase efficiency and speed, you can customize this block according to your preferences and then turn it into a reusable block for use in subsequent posts and pages.<\/p>\n<h2>Check Out More Atomic Blocks<\/h2>\n<p><span style=\"font-weight: 400;\">Want more information on using Atomic Blocks and Gutenberg? The Atomic Blocks team is hard at work creating more blocks for use within Gutenberg. Check out this <\/span><a href=\"https:\/\/wpengine.com\/resources\/genesis-onramp-for-gutenberg\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">whitepaper<\/span><\/a><span style=\"font-weight: 400;\"> for more information about using Gutenberg and the Genesis Framework, and check out the <\/span><span style=\"font-weight: 400;\">Atomic Blocks website<\/span><span style=\"font-weight: 400;\"> for information on more blocks like the <\/span><span style=\"font-weight: 400;\">Drop Cap Block<\/span><span style=\"font-weight: 400;\">, the <\/span><span style=\"font-weight: 400;\">Container Block<\/span><span style=\"font-weight: 400;\">, and more.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>At WP Engine, our goal is to help you create stunning, functional, and highly performant WordPress sites. We want to\u00a0facilitate an easy path for our customers to build and maintain beautiful websites. One of the reasons we acquired StudioPress and the Genesis Framework was because we wanted our customers to have easily accessible, highly regarded<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":173,"featured_media":75363,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1293],"tags":[],"class_list":["post-74737","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-atomic-blocks"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Four Atomic Blocks for Creating Dynamic Website Content<\/title>\n<meta name=\"description\" content=\"Atomic Blocks offer a unqiue and enjoyable way to create content in the new WordPress editor. These four blocks will help you resonate with your readers.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Four Atomic Blocks for Creating Dynamic Website Content\" \/>\n<meta property=\"og:description\" content=\"Atomic Blocks offer a unqiue and enjoyable way to create content in the new WordPress editor. These four blocks will help you resonate with your readers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/resources\/four-atomic-blocks-for-creating-dynamic-website-content\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-04T21:27:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-01T07:21:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/resources\/wp-content\/uploads\/2019\/03\/AtomicBlockspost_hero.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2400\" \/>\n\t<meta property=\"og:image:height\" content=\"1260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alyssa Cuda\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wpengine\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alyssa Cuda\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/resources\/four-atomic-blocks-for-creating-dynamic-website-content\/\",\"url\":\"https:\/\/wpengine.com\/resources\/four-atomic-blocks-for-creating-dynamic-website-content\/\",\"name\":\"Four Atomic Blocks for Creating Dynamic Website Content\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/resources\/#website\"},\"datePublished\":\"2019-03-04T21:27:37+00:00\",\"dateModified\":\"2024-01-01T07:21:23+00:00\",\"author\":{\"@id\":\"https:\/\/wpengine.com\/resources\/#\/schema\/person\/2e7ae57f60120ddae3dc029b03cfa81a\"},\"description\":\"Atomic Blocks offer a unqiue and enjoyable way to create content in the new WordPress editor. These four blocks will help you resonate with your readers.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/resources\/four-atomic-blocks-for-creating-dynamic-website-content\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/resources\/four-atomic-blocks-for-creating-dynamic-website-content\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/resources\/four-atomic-blocks-for-creating-dynamic-website-content\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Four Atomic Blocks for Creating Dynamic Website Content\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/resources\/#website\",\"url\":\"https:\/\/wpengine.com\/resources\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/resources\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/resources\/#\/schema\/person\/2e7ae57f60120ddae3dc029b03cfa81a\",\"name\":\"Alyssa Cuda\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/resources\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9031010d4260959c1fffb0b199ffa33db42a2b53baa3bf9927a289237e907252?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9031010d4260959c1fffb0b199ffa33db42a2b53baa3bf9927a289237e907252?s=96&d=mm&r=g\",\"caption\":\"Alyssa Cuda\"},\"description\":\"Alyssa is a Content Specialist at WP Engine. If she\u2019s not searching for a swimming hole to escape the heat in, you can usually find her baking something caloric or reading.\u2002\u2002\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Four Atomic Blocks for Creating Dynamic Website Content","description":"Atomic Blocks offer a unqiue and enjoyable way to create content in the new WordPress editor. These four blocks will help you resonate with your readers.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"Four Atomic Blocks for Creating Dynamic Website Content","og_description":"Atomic Blocks offer a unqiue and enjoyable way to create content in the new WordPress editor. These four blocks will help you resonate with your readers.","og_url":"https:\/\/wpengine.com\/resources\/four-atomic-blocks-for-creating-dynamic-website-content\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_published_time":"2019-03-04T21:27:37+00:00","article_modified_time":"2024-01-01T07:21:23+00:00","og_image":[{"width":2400,"height":1260,"url":"https:\/\/wpengine.com\/resources\/wp-content\/uploads\/2019\/03\/AtomicBlockspost_hero.jpg","type":"image\/jpeg"}],"author":"Alyssa Cuda","twitter_card":"summary_large_image","twitter_creator":"@wpengine","twitter_site":"@wpengine","twitter_misc":{"Written by":"Alyssa Cuda","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/resources\/four-atomic-blocks-for-creating-dynamic-website-content\/","url":"https:\/\/wpengine.com\/resources\/four-atomic-blocks-for-creating-dynamic-website-content\/","name":"Four Atomic Blocks for Creating Dynamic Website Content","isPartOf":{"@id":"https:\/\/wpengine.com\/resources\/#website"},"datePublished":"2019-03-04T21:27:37+00:00","dateModified":"2024-01-01T07:21:23+00:00","author":{"@id":"https:\/\/wpengine.com\/resources\/#\/schema\/person\/2e7ae57f60120ddae3dc029b03cfa81a"},"description":"Atomic Blocks offer a unqiue and enjoyable way to create content in the new WordPress editor. These four blocks will help you resonate with your readers.","breadcrumb":{"@id":"https:\/\/wpengine.com\/resources\/four-atomic-blocks-for-creating-dynamic-website-content\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/resources\/four-atomic-blocks-for-creating-dynamic-website-content\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/resources\/four-atomic-blocks-for-creating-dynamic-website-content\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/resources\/"},{"@type":"ListItem","position":2,"name":"Four Atomic Blocks for Creating Dynamic Website Content"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/resources\/#website","url":"https:\/\/wpengine.com\/resources\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/resources\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/resources\/#\/schema\/person\/2e7ae57f60120ddae3dc029b03cfa81a","name":"Alyssa Cuda","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/resources\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9031010d4260959c1fffb0b199ffa33db42a2b53baa3bf9927a289237e907252?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9031010d4260959c1fffb0b199ffa33db42a2b53baa3bf9927a289237e907252?s=96&d=mm&r=g","caption":"Alyssa Cuda"},"description":"Alyssa is a Content Specialist at WP Engine. If she\u2019s not searching for a swimming hole to escape the heat in, you can usually find her baking something caloric or reading.\u2002\u2002"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/posts\/74737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/users\/173"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/comments?post=74737"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/posts\/74737\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/media\/75363"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/media?parent=74737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/categories?post=74737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/tags?post=74737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}