{"id":109,"date":"2023-07-29T09:54:54","date_gmt":"2023-07-29T12:54:54","guid":{"rendered":"https:\/\/kylekelly.com\/?p=109"},"modified":"2023-07-29T12:18:10","modified_gmt":"2023-07-29T15:18:10","slug":"building-customizable-wordpress-blocks","status":"publish","type":"post","link":"https:\/\/kylekelly.com\/posts\/building-customizable-wordpress-blocks\/","title":{"rendered":"Building customizable WordPress blocks"},"content":{"rendered":"\n<p>This is a fantastic video that just came out on working on WordPress blocks and themes:<\/p>\n\n\n\n<p class=\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"><a href=\"https:\/\/www.youtube.com\/watch?v=KreJC3aB0q4\">https:\/\/www.youtube.com\/watch?v=KreJC3aB0q4<\/a><\/p>\n\n\n\n<p>The first topic by Michael Burridge is on how to give users control over styling the content of your block, not just the wrapper.<\/p>\n\n\n\n<p>This can be done by using CSS custom properties and passing a styles object that combines them with block attributes:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"921\" height=\"515\" src=\"https:\/\/kylekelly.com\/wp-content\/uploads\/2023\/07\/wordpress-user-styling-inside-blocks.webp\" alt=\"A screenshot of code from a WordPress block. React code is displayed showing how to combine CSS custom properties with block attributes and then pass that the useBlockProps\" class=\"wp-image-111\" srcset=\"https:\/\/kylekelly.com\/wp-content\/uploads\/2023\/07\/wordpress-user-styling-inside-blocks.webp 921w, https:\/\/kylekelly.com\/wp-content\/uploads\/2023\/07\/wordpress-user-styling-inside-blocks-300x168.webp 300w, https:\/\/kylekelly.com\/wp-content\/uploads\/2023\/07\/wordpress-user-styling-inside-blocks-768x429.webp 768w\" sizes=\"(max-width: 921px) 100vw, 921px\" \/><\/figure>\n\n\n\n<p>The second by Justin Tadlock is on how to build your custom block in such as way that theme designers can use theme.json to style your block.<\/p>\n\n\n\n<p>This can be done by setting values in settings.custom in theme.json which are then turned into CSS custom properties you can use in your block styling. A future theme designer can then override them in their own theme.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"569\" src=\"https:\/\/kylekelly.com\/wp-content\/uploads\/2023\/07\/wordpress-custom-block-theme-styling-1024x569.webp\" alt=\"A screenshot of code showing theme.json and how to use settings.custom to add objects that will be converted to CSS custom properties.\" class=\"wp-image-112\" srcset=\"https:\/\/kylekelly.com\/wp-content\/uploads\/2023\/07\/wordpress-custom-block-theme-styling-1024x569.webp 1024w, https:\/\/kylekelly.com\/wp-content\/uploads\/2023\/07\/wordpress-custom-block-theme-styling-300x167.webp 300w, https:\/\/kylekelly.com\/wp-content\/uploads\/2023\/07\/wordpress-custom-block-theme-styling-768x427.webp 768w, https:\/\/kylekelly.com\/wp-content\/uploads\/2023\/07\/wordpress-custom-block-theme-styling.webp 1124w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>I think I&#8217;ll be combining these two techniques going forward.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a fantastic video that just came out on working on WordPress blocks and themes: https:\/\/www.youtube.com\/watch?v=KreJC3aB0q4 The first topic by Michael Burridge is on how to give users control over styling the content of your block, not just the wrapper. This can be done by using CSS custom properties and passing a styles object [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[9],"_links":{"self":[{"href":"https:\/\/kylekelly.com\/wp-json\/wp\/v2\/posts\/109"}],"collection":[{"href":"https:\/\/kylekelly.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kylekelly.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kylekelly.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kylekelly.com\/wp-json\/wp\/v2\/comments?post=109"}],"version-history":[{"count":5,"href":"https:\/\/kylekelly.com\/wp-json\/wp\/v2\/posts\/109\/revisions"}],"predecessor-version":[{"id":116,"href":"https:\/\/kylekelly.com\/wp-json\/wp\/v2\/posts\/109\/revisions\/116"}],"wp:attachment":[{"href":"https:\/\/kylekelly.com\/wp-json\/wp\/v2\/media?parent=109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kylekelly.com\/wp-json\/wp\/v2\/categories?post=109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kylekelly.com\/wp-json\/wp\/v2\/tags?post=109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}