{"id":1954,"date":"2019-07-24T11:24:33","date_gmt":"2019-07-24T02:24:33","guid":{"rendered":"https:\/\/n8finch2024.local\/?p=1954"},"modified":"2022-03-11T06:44:29","modified_gmt":"2022-03-10T21:44:29","slug":"building-and-deconstructing-a-gutenberg-block","status":"publish","type":"post","link":"https:\/\/n8finch2024.local\/building-and-deconstructing-a-gutenberg-block\/","title":{"rendered":"Building and Deconstructing a Gutenberg Block"},"content":{"rendered":"\n<p>This presentation walks through the new Block Editor in WordPress, covering:<\/p>\n\n\n\n<ul><li>what comes out of the box from WordPress Core<\/li><li>plugins that will add blocks to your site<\/li><li>importing demo content<\/li><li>styling blocks with CSS<\/li><li>creating your own blocks with Advanced Custom Fields and ES5 to ESNext.<\/li><\/ul>\n\n\n\n<!--more-->\n\n\n\n<p><strong><a href=\"https:\/\/drive.google.com\/open?id=13Wqr2KBkWHMKPxQamyU2Rs6xGoLg36OH\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Presentation Slides (opens in a new tab)\">Presentation Slides<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This presentation walks through the new Block Editor in WordPress, covering: what comes out of the box from WordPress Core plugins that will add blocks to your site importing demo content styling blocks with CSS creating your own blocks with Advanced Custom Fields and ES5 to ESNext.<\/p>\n","protected":false},"author":1,"featured_media":1955,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[1,46,8,48],"tags":[51],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Building and Deconstructing a Gutenberg Block | Nate Finch<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/n8finch-site.site.strattic.io\/building-and-deconstructing-a-gutenberg-block\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building and Deconstructing a Gutenberg Block | Nate Finch\" \/>\n<meta property=\"og:description\" content=\"This presentation walks through the new Block Editor in WordPress, covering: what comes out of the box from WordPress Core plugins that will add blocks to your site importing demo content styling blocks with CSS creating your own blocks with Advanced Custom Fields and ES5 to ESNext.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/n8finch-site.site.strattic.io\/building-and-deconstructing-a-gutenberg-block\/\" \/>\n<meta property=\"og:site_name\" content=\"Nate Finch\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-24T02:24:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-10T21:44:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/n8finch-site.site.strattic.io\/wp-content\/uploads\/2020\/11\/Block-Editor_u1cfgn.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1794\" \/>\n\t<meta property=\"og:image:height\" content=\"1006\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nate\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@n8finch\" \/>\n<meta name=\"twitter:site\" content=\"@n8finch\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nate\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/building-and-deconstructing-a-gutenberg-block\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/building-and-deconstructing-a-gutenberg-block\/\"},\"author\":{\"name\":\"Nate\",\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\"},\"headline\":\"Building and Deconstructing a Gutenberg Block\",\"datePublished\":\"2019-07-24T02:24:33+00:00\",\"dateModified\":\"2022-03-10T21:44:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/building-and-deconstructing-a-gutenberg-block\/\"},\"wordCount\":55,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\"},\"keywords\":[\"Gutenberg\"],\"articleSection\":[\"Blog\",\"Talks\",\"Web Development\",\"WordPress\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/building-and-deconstructing-a-gutenberg-block\/\",\"url\":\"https:\/\/n8finch-site.site.strattic.io\/building-and-deconstructing-a-gutenberg-block\/\",\"name\":\"Building and Deconstructing a Gutenberg Block | Nate Finch\",\"isPartOf\":{\"@id\":\"https:\/\/n8finch.local\/#website\"},\"datePublished\":\"2019-07-24T02:24:33+00:00\",\"dateModified\":\"2022-03-10T21:44:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/building-and-deconstructing-a-gutenberg-block\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/n8finch-site.site.strattic.io\/building-and-deconstructing-a-gutenberg-block\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/building-and-deconstructing-a-gutenberg-block\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/n8finch.local\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building and Deconstructing a Gutenberg Block\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/n8finch.local\/#website\",\"url\":\"https:\/\/n8finch.local\/\",\"name\":\"Nate Finch\",\"description\":\"All the things, keeping it clever...&#x1f913;\",\"publisher\":{\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/n8finch.local\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\",\"name\":\"Nate\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg\",\"contentUrl\":\"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg\",\"width\":796,\"height\":792,\"caption\":\"Nate\"},\"logo\":{\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Building and Deconstructing a Gutenberg Block | Nate Finch","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/n8finch-site.site.strattic.io\/building-and-deconstructing-a-gutenberg-block\/","og_locale":"en_US","og_type":"article","og_title":"Building and Deconstructing a Gutenberg Block | Nate Finch","og_description":"This presentation walks through the new Block Editor in WordPress, covering: what comes out of the box from WordPress Core plugins that will add blocks to your site importing demo content styling blocks with CSS creating your own blocks with Advanced Custom Fields and ES5 to ESNext.","og_url":"https:\/\/n8finch-site.site.strattic.io\/building-and-deconstructing-a-gutenberg-block\/","og_site_name":"Nate Finch","article_published_time":"2019-07-24T02:24:33+00:00","article_modified_time":"2022-03-10T21:44:29+00:00","og_image":[{"width":1794,"height":1006,"url":"https:\/\/n8finch-site.site.strattic.io\/wp-content\/uploads\/2020\/11\/Block-Editor_u1cfgn.jpg","type":"image\/jpeg"}],"author":"Nate","twitter_card":"summary_large_image","twitter_creator":"@n8finch","twitter_site":"@n8finch","twitter_misc":{"Written by":"Nate"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/n8finch-site.site.strattic.io\/building-and-deconstructing-a-gutenberg-block\/#article","isPartOf":{"@id":"https:\/\/n8finch-site.site.strattic.io\/building-and-deconstructing-a-gutenberg-block\/"},"author":{"name":"Nate","@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce"},"headline":"Building and Deconstructing a Gutenberg Block","datePublished":"2019-07-24T02:24:33+00:00","dateModified":"2022-03-10T21:44:29+00:00","mainEntityOfPage":{"@id":"https:\/\/n8finch-site.site.strattic.io\/building-and-deconstructing-a-gutenberg-block\/"},"wordCount":55,"commentCount":0,"publisher":{"@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce"},"keywords":["Gutenberg"],"articleSection":["Blog","Talks","Web Development","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/n8finch-site.site.strattic.io\/building-and-deconstructing-a-gutenberg-block\/","url":"https:\/\/n8finch-site.site.strattic.io\/building-and-deconstructing-a-gutenberg-block\/","name":"Building and Deconstructing a Gutenberg Block | Nate Finch","isPartOf":{"@id":"https:\/\/n8finch.local\/#website"},"datePublished":"2019-07-24T02:24:33+00:00","dateModified":"2022-03-10T21:44:29+00:00","breadcrumb":{"@id":"https:\/\/n8finch-site.site.strattic.io\/building-and-deconstructing-a-gutenberg-block\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/n8finch-site.site.strattic.io\/building-and-deconstructing-a-gutenberg-block\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/n8finch-site.site.strattic.io\/building-and-deconstructing-a-gutenberg-block\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/n8finch.local\/"},{"@type":"ListItem","position":2,"name":"Building and Deconstructing a Gutenberg Block"}]},{"@type":"WebSite","@id":"https:\/\/n8finch.local\/#website","url":"https:\/\/n8finch.local\/","name":"Nate Finch","description":"All the things, keeping it clever...&#x1f913;","publisher":{"@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/n8finch.local\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce","name":"Nate","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/n8finch.local\/#\/schema\/person\/image\/","url":"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg","contentUrl":"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg","width":796,"height":792,"caption":"Nate"},"logo":{"@id":"https:\/\/n8finch.local\/#\/schema\/person\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts\/1954"}],"collection":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/comments?post=1954"}],"version-history":[{"count":2,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts\/1954\/revisions"}],"predecessor-version":[{"id":1957,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts\/1954\/revisions\/1957"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/media\/1955"}],"wp:attachment":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/media?parent=1954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/categories?post=1954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/tags?post=1954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}