{"id":302758,"date":"2020-02-24T07:41:16","date_gmt":"2020-02-24T14:41:16","guid":{"rendered":"https:\/\/css-tricks.com\/?p=302758"},"modified":"2020-02-24T07:41:18","modified_gmt":"2020-02-24T14:41:18","slug":"gutenberging","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/gutenberging\/","title":{"rendered":"Gutenberging"},"content":{"rendered":"\n

It’s been over a year since the big WordPress launch of Gutenberg<\/a>, the new editor. It seems to me most of the controversy around it has died down. There has been enough time that the UX and accessibility of it have improved, and people are seeing the potential a lot more clearly. There ain’t no turning back.<\/p>\n\n\n\n

I’m running across articles like Haris Zulfiqar saying he’s betting on it<\/a> and Nick Hamze saying that blocks are for the next generation<\/a>. <\/p>\n\n\n\n

While I think there are still rough edges (like why can’t I put a list in a blockquote? Why can’t I add a class to a link? Why can’t I arrow-key through the block chooser?), I’m a big fan overall. And not just conceptually anymore. I made it one of my 2020 goals<\/a> to get CSS-Tricks onto Gutenberg, and so I hopped to that right away in January.<\/p>\n\n\n\n\n\n\n

We already had one foot in the door<\/h3>\n\n\n

We had a smidge of experience Gutenberging since we had already converted the newsletter authoring experience<\/a> over to the new editor. Our newsletters are a Custom Post Type here on CSS-Tricks, which are published here at public URLs, have a custom RSS feed, and sent out by MailChimp which fetches and reads that RSS feed.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

We were able to just turn on Gutenberg for newsletters by way of the Gutenberg Ramp<\/a> plugin. That works great for Custom Post Types and posts with individual IDs, but I wanted to turn on Gutenberg only for new content<\/em>. I wound up monkey-patching the plugin. Here’s a pull request<\/a> in case anyone over there thinks it’s a good idea. <\/p>\n\n\n\n

This was important to me, as we have tens of thousands of old posts created with the old editor, and even though Gutenberg doesn’t mangle them if we open them up for editing, the editor experience it provides for them isn’t as good as the “classic” editor (e.g. we have special buttons for our special code blocks and stuff like that). <\/p>\n\n\n

Dealing with older content<\/h3>\n\n\n

What would really be great is if Gutenberg would convert old posts into proper blocks upon opening, but that feels like a dream at this point. Like, it would have to parse the HTML, identify what chunks look like blocks, identify which<\/em> block makes the most sense, including our custom<\/em> blocks which are the most important, and be really correct<\/em> about it in a non-fragile way. <\/p>\n\n\n\n

For now, old content just uses the old editor. There isn’t even an easy way to flip on Gutenberg for an individual post from the editor. (I could hard-code values into the Gutenberg Ramp usage, but that’s a bit tedious.)<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I worry a smidge that the old editor will really deteriorate. For example, one of the big reasons I got started with this is because, on this site, the old editor would just randomly scroll to the bottom of the page. I can’t for the life of me figure out why, but it makes authoring obnoxious for me. Just a little papercut bug that made me want to get on the editor experience that is being actively developed.<\/p>\n\n\n\n

But even if the old editor really gets bad, just flipping on Gutenberg for everything isn’t that bad. All the old content will just be in a big “classic” block and will be fine.<\/p>\n\n\n

So anyway \u2014 it’s working! <\/h3>\n\n\n

Turning on Gutenberg for new posts was its own little challenge, but it’s turned on for us and we’re creating all new content in it. I’m just speaking for myself here but OMG I love it so much.<\/strong> It’s such a massive upgrade for writing content that I’m a little obsessed with it. The team is happy as well.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n

Creating custom blocks<\/h3>\n\n\n

Check out this fancy text block we have:<\/p>\n\n\n\n

\"\"
A “callout” block on CSS-Tricks<\/figcaption><\/figure>\n\n\n\n

You might think, oh cool, an opportunity for a custom block. Heck, we even covered learning and making Gutenberg blocks in a whole big series<\/a>. But this brings up a pretty relevant situation: when not<\/em> to build a block<\/strong>. The only thing unique about this<\/em> block is that is has a special class name that our CSS uses to style that block. That’s it. Adding a class name is a built-in feature<\/strong> of every block, so a custom block here really isn’t necessary. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

In fact, we can go a step further, and make a text block with this exact class a “reusable block”<\/strong> so we don’t even have to remember or type in that class name. After I’ve created a text block with this class, I select “Convert to Reusable Block” from the kebab menu and now it’s forever saved as a reusable block.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

We’re already using it for a few other things now, like our “Article Series” block (an <h4><\/code> and <ol><\/code> with a special <div><\/code>-with-a-class wrapper) and footnote blocks and such.<\/p>\n\n\n\n

But we do actually need some custom blocks as well, and for that I used create-guten-block<\/a> to craft a special plugin\u00b9<\/a> to create them. I see One that is mega important for us is code blocks. There is already a native block for code blocks. It essentially puts the code in a <pre><\/code> tag and the content from Gutenberg is already escaped by default.<\/p>\n\n\n\n

Our fancy code block allows us to pick which language it is, highlight certain lines, and provide custom labels. This was all possible in our old editor via HTML attributes, so this block is just nice UI on top of all that. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

That block is so specific to CSS-Tricks it doesn’t make much sense to open source it. But there is another block I created that is open source, and that’s the CodePen Embed Block<\/a>. I wrote about it<\/a> over on the CodePen blog. <\/p>\n\n\n\n

It allows you to paste in a CodePen URL and it transforms into a CodePen Embed. oEmbed already does that by default, but with this plugin, you can control everything like the height, theme, and default tabs.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

It’s pretty awesome to actually see the embedded Pens while authoring!<\/p>\n\n\n

Unfaced challenges<\/h3>\n\n\n

The biggest challenge right now is handling images. In the old editor, we have integrated a very very fancy setup<\/a> with Cloudinary<\/a>. The images are automatically uploaded to Cloudinary, breakpoints are programmatically decided on, multiple sizes are created, a responsive images syntax is created, and what ends up in the HTML is a perfect responsive images syntax with the images hosted by Cloudinary. This has the provided us with the benefit of being on a CDN and serving the images in the best possible format as well.<\/p>\n\n\n\n

None of that is happening on posts created with Gutenberg. 😭<\/p>\n\n\n\n

I need to find or develop a new system that does a great job with images everywhere on the site and ideally with a less bespoke system that is easier to maintain. It’s possible I figure that out with Cloudinary, I might try some other service, I might let WordPress deal with it directly backed by the Jetpack Site Accelerator<\/a>. Not sure yet. Always something to do. <\/p>\n\n\n\n

\n
  1. I see WordPress themselves is getting in on the block scaffolding game. Their “create-wordpress-block” concept has made its way into the Gutenberg repo<\/a> itself, which you kick off with npm init @wordpress\/block [options] [slug]<\/code><\/li><\/ol>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"

    It’s been over a year since the big WordPress launch of Gutenberg, the new editor. It seems to me most of the controversy around it has died down. There has been enough time that the UX and accessibility of it have improved, and people are seeing the potential a lot more clearly. There ain’t no […]<\/p>\n","protected":false},"author":3,"featured_media":302780,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1390,264],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/turned-on.png?fit=1922%2C1132&ssl=1","jetpack-related-posts":[{"id":270918,"url":"https:\/\/css-tricks.com\/learning-gutenberg-2-what-is-gutenberg\/","url_meta":{"origin":302758,"position":0},"title":"Learning Gutenberg: What is Gutenberg, Anyway?","date":"May 21, 2018","format":false,"excerpt":"Gutenberg is the new React-driven SPA editing experience in WordPress. Oh wait, a string of buzzwords doesn't count for a viable explanation of software? We\u2019re going to unpack that string of buzzwords as we explain what Gutenberg is. Article Series: Series Introduction What is Gutenberg, Anyway? (This Post) A Primer\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/gutenberg-1.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":285529,"url":"https:\/\/css-tricks.com\/jetpack-gutenberg-blocks\/","url_meta":{"origin":302758,"position":1},"title":"Jetpack Gutenberg Blocks","date":"March 28, 2019","format":false,"excerpt":"I remember when Gutenberg was released into core, because I was at WordCamp US that day. A number of months have gone by now, so I imagine more and more of us on WordPress sites have dipped our toes into it. I just wrote about our first foray here on\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/gutenberg.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":291587,"url":"https:\/\/css-tricks.com\/managing-wordpress-metadata-in-gutenberg-using-a-sidebar-plugin\/","url_meta":{"origin":302758,"position":2},"title":"Managing WordPress Metadata in Gutenberg Using a Sidebar Plugin","date":"June 20, 2019","format":false,"excerpt":"WordPress released their anticipated over to the post editor, nicknamed Gutenberg, which is also referred to as the block editor. It transforms a WordPress post into a collection of blocks that you can add, edit, remove and re-order in the layout. Before the official release, Gutenberg was available as a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/gutenberg-editor-wires.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":260924,"url":"https:\/\/css-tricks.com\/gutenberg\/","url_meta":{"origin":302758,"position":3},"title":"Gutenberg","date":"October 7, 2017","format":false,"excerpt":"I've only just been catching up with the news about Gutenberg, the name for a revamp of the WordPress editor. You can use it right now, as it's being built as a plugin first, with the idea that eventually it goes into core. The repo has better information. It seems\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":277467,"url":"https:\/\/css-tricks.com\/styling-the-gutenberg-columns-block\/","url_meta":{"origin":302758,"position":4},"title":"Styling the Gutenberg Columns Block","date":"October 12, 2018","format":false,"excerpt":"WordPress 5.0 is quickly approaching, and the new Gutenberg editor is coming with it. There\u2019s been a lot of discussion in the WordPress community over what exactly that means for users, designers, and developers. And while Gutenberg is sure to improve the writing experience, it can cause a bit of\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/guten-columns.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":285445,"url":"https:\/\/css-tricks.com\/a-gutenburg-powered-newsletter\/","url_meta":{"origin":302758,"position":5},"title":"A Gutenburg-Powered Newsletter","date":"March 28, 2019","format":false,"excerpt":"I like Gutenberg, the new WordPress editor. I'm not oblivious to all the conversation around accessibility, UX, and readiness, but I know how hard it is to ship software and I'm glad WordPress got it out the door. Now it can evolve for the better. I see a lot of\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/bank-phrom-352283-unsplash-scaled.jpg?fit=1200%2C801&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/turned-on.png?fit=1024%2C603&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/302758"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=302758"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/302758\/revisions"}],"predecessor-version":[{"id":304167,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/302758\/revisions\/304167"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/302780"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=302758"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=302758"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=302758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}