{"id":17119,"date":"2022-10-16T12:23:46","date_gmt":"2022-10-16T11:23:46","guid":{"rendered":"https:\/\/johnjohnston.info\/blog\/?p=17119"},"modified":"2025-12-05T11:09:33","modified_gmt":"2025-12-05T11:09:33","slug":"blocks-css","status":"publish","type":"post","link":"https:\/\/johnjohnston.info\/blog\/blocks-css\/","title":{"rendered":"Blocks CSS"},"content":{"rendered":"
\r\n
\"hypercard<\/figure>\r\n<\/div>\r\n\r\n\r\n

Yesterday I was posting a note about a book<\/a> and though of a slight visual joke. I needed a bit of css animation added and it seems a bit too much to either have it in the customiser or my child theme. It turns out there is a block for that: Blocks CSS: CSS Editor for Gutenberg Blocks<\/a>. <\/p>\r\n\r\n\r\n\r\n

This plugin just added a field to the more settings area for the block where you can add some css, I’ve used it on the image of the HyperCard icon about to animate it.<\/p>\r\n\r\n\r\n\r\n

I am still not all in on using blocks, but this could be fun.<\/p>\r\n\r\n\r\n\r\n

Update 5 Dec 2025: I am moving the css from this system to a theme css files. I’ve only used it a handful of times in 3 years. <\/p>\r\n","protected":false},"excerpt":{"rendered":"

Yesterday I was posting a note about a book and though of a slight visual joke. I needed a bit of css animation added and it seems a bit too much to either have it in the customiser or my child theme. It turns out there is a block for that: Blocks CSS: CSS Editor […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"mf2_syndication":["https:\/\/twitter.com\/johnjohnston\/status\/1581606868052750337","https:\/\/mastodon.social\/@johnjohnston\/109177696415697956"],"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"webmentions_disabled_pings":false,"webmentions_disabled":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[660],"tags":[1558,79,1045,11],"post_format":[],"class_list":{"0":"post-17119","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-micro","7":"tag-blocks","8":"tag-css","9":"tag-plugins","10":"tag-wordpress","11":"kind-article","13":"h-entry","14":"hentry"},"better_featured_image":null,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p57zFQ-4s7","jetpack_likes_enabled":false,"jetpack_sharing_enabled":true,"kind":false,"_links":{"self":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts\/17119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/comments?post=17119"}],"version-history":[{"count":6,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts\/17119\/revisions"}],"predecessor-version":[{"id":21606,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts\/17119\/revisions\/21606"}],"wp:attachment":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/media?parent=17119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/categories?post=17119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/tags?post=17119"},{"taxonomy":"post_format","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/post_format?post=17119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}