Title: Writing my first Gutenberg Block Author: Gary Pendergast Published: September 15, 2017 Last modified: December 19, 2023 --- [ ](https://profiles.wordpress.org/pento/) [Gary Pendergast](https://profiles.wordpress.org/pento/) 10:39 pm _on_ September 15, 2017   # Writing my first Gutenberg Block Inspired by a comment I read a week or so ago, I wrote my first Gutenblock. Here are my impressions of that process. I initially planned on copying an existing blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., but quickly found [the example in the blocks directory README](https://github.com/WordPress/gutenberg/tree/master/blocks). [This is the ultimate result](https://gist.github.com/pento/19b35d621709042fc899e394a9387a54), you should open the example and the result to follow along how things changed. Getting from one to the other was not too tricky, but did have a handful of surprises and confusing bits. I started with changing the block name, which caused the first problem – I got an error that it needed to be namespaced. That was easily rectified. Changing the title was easy enough, but I didn’t know what I should change the categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. to. I got an error when I left it blank, so I set it to common. Next up, changing the `attribute` definition. Changing the `type` to ‘int’ was a lucky guess, there was nothing to suggest what the valid types are. `source` confused me for some time, as I didn’t really know what it needed to be. I figured I needed to store the value as a `data` attribute on the HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. that `Star` returned, so I wrote a basic version of the` Star` element, and tried to save it there. It… didn’t work. I tried several variations of this before noticing in the docs that `source` is optional. So, I tried deleting it, and it worked! That bit of magic made me smile, but I was a bit annoyed I spent so much time on a non-problem. Writing the `setStars()` method was easy enough, even without really knowing what the `props.setAttributes()` call did. Trying to add the `Stars` render to the `children` array gave me a weird error, complaining that the element needed an identifier. I tried adding an `id` attribute to the HTML that `Stars` rendered, but that didn’t help. Googling the error message showed me that I needed to set the `key` attribute, which was kind of weird, and I didn’t understand why it was necessary now, when the example didn’t need it. But it worked, so I moved on. Adding the `input` element to `children` was also easy. I got the same error as before about needing an identifier, so I added a `key` attribute to that, too. I added all the extra attributes for fun, but realised when defining the `min` / ` max` attributes that there was no nice way to validate the data being put into the stars attribute. It was around this time that I discovered the `Stars` element wasn’t actually rendering, the problem was that I didn’t know how to put the text inside the `div` element. Did I need to append it? Was there a `createTextNode()` method I needed to call? As it turns out, it just magically accepted the string, but I only found that out by guessing. (Excuse the hacky math to add the “½”, I got a little carried away.) One annoyance throughout was that every time I changed the attribute definition, or the output of `Stars`, GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. [https://wordpress.org/gutenberg/](https://wordpress.org/gutenberg/) threw a warning about the format changing. It seems like this warning would show whenever a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress. org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party. upgrade included a block change, though I didn’t test that. And that’s about the sum of it – I found it to be a generally pleasant experience, it was nice that I could do this all without needing to compile from JSX, but I knew that option was there for if I wanted it. It’s still a bit of a raw experience, but it shows a lot of promise for creating a delightful development experience. ### Share this: * [ Threads ](https://make.wordpress.org/test/2017/09/15/writing-my-first-gutenberg-block/?share=threads) * [ Mastodon ](https://make.wordpress.org/test/2017/09/15/writing-my-first-gutenberg-block/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/test/2017/09/15/writing-my-first-gutenberg-block/?share=bluesky) * [ X ](https://make.wordpress.org/test/2017/09/15/writing-my-first-gutenberg-block/?share=x) * [ Facebook ](https://make.wordpress.org/test/2017/09/15/writing-my-first-gutenberg-block/?share=facebook) * [ LinkedIn ](https://make.wordpress.org/test/2017/09/15/writing-my-first-gutenberg-block/?share=linkedin) * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Ftest%2F2017%2F09%2F15%2Fwriting-my-first-gutenberg-block%2F%23respond&locale=en_US) ### Like this: Like Loading… ### Leave a Reply 󠀁[Cancel reply](https://make.wordpress.org/test/2017/09/15/writing-my-first-gutenberg-block/?output_format=md#respond)󠁿 You must be [logged in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Ftest%2F2017%2F09%2F15%2Fwriting-my-first-gutenberg-block%2F&locale=en_US) to post a comment. # Post navigation [← Widgets, Menus and Customize Changesets](https://make.wordpress.org/test/2017/09/10/widgets-menus-and-customize-changesets/) [Gutenberg usability testing meeting two →](https://make.wordpress.org/test/2017/10/12/gutenberg-usability-testing-meeting-two/)