On the podcast today we have Aki Hamano.
Aki is a freelance developer from Japan. He builds websites for clients and enjoys setting himself difficult problems to solve.
He came to my attention when Justin Tadlock wrote an article about a playful block that he’s created.
After a little further exploration, it turns out that Aki’s been busy in his spare time creating a range of blocks, all of them useful and all of them freely available in the WordPress plugin repository.
We start off by having a brief chat about what the WordPress scene is like in Japan. Is there a strong sense of community, and do in-person events take place?
We then move on to talk about how he became interested in creating blocks. Did he find it easy to understand the new skills required to get up and running and was there enough documentation to make speedy progress?
We spend the remainder of the podcast talking through the five blocks which Aki has put in the WordPress plugin repository. Often, they were created to scratch his own itch, to solve a problem that he faced in his work, but sometimes, as with his excellent Piano Block, it was just for fun and the challenge of trying something new.
The Piano Block aside, all of Aki’s blocks have an easy to understand purpose, and they take on a simple challenge, and solve it.
This is perhaps one of the main reasons that blocks are so interesting, they can be simple or complex, utilitarian or just fun.
It’s an interesting discussion, and you never know, perhaps you’ll find yourself using Aki’s blocks at some point yourself.
Useful links.
Play the Piano and Other Instruments via the WordPress Block Editor
Transcript
[00:00:00] Nathan Wrigley: Welcome to the Jukebox podcast from WP Tavern. My name is Nathan Wrigley. Jukebox is a podcast which is dedicated to all things WordPress, the people, the events, the plugins, the blocks, the themes, and in this case, the building of useful blocks and making them freely available. If you’d like to subscribe to the podcast, you can do that by searching for WP Tavern in your podcast, player of choice. Or by going to WP tavern.com forward slash feed forward slash podcast. And you can copy and paste that URL into most podcast players as well.
If you have a topic that you’d like us to feature on the podcast. Well, I’m very keen to hear from you and hopefully get you, or your idea featured on the show.
Head over to WP tavern.com forward slash contact forward slash jukebox. And you can use the contact form there.
So on the podcast today, we have Aki Hamano. Aki is a freelance developer from Japan. He builds websites for clients and enjoys setting himself difficult problems to solve. He came to my attention when Justin Tatlock wrote an article on the Tavern. About a playful block he’d created, but more on that later.
After a little further exploration, it turns out that Aki’s been busy in his spare time, creating a range of blocks. All of them useful and all of them freely available in the WordPress plugin repository.
We start off by having a brief chat about what the WordPress scene is like in Japan. Is there a strong sense of community and do in-person events take place there?
We then move on to talk about how he became interested in creating blocks. Did he find it easy to understand the new skills required to get up and running? And was there enough documentation to make speedy progress?
We spend the remainder of the podcast talking through the five blocks, which Aki has put in the WordPress plugin repository. Often they were created to scratch his own itch, to solve a problem that he faced in his work. But sometimes, as with his excellent piano block, it was just for fun, and the challenge of trying something new.
The piano block aside. All of our keys blocks have an easy to understand purpose and they take on a simple challenge and solve it. This is perhaps one of the main reasons that blocks are so interesting. They can be simple or complex, utilitarian or just fun.
It’s an interesting discussion. And you never know, perhaps you’ll find yourself using Aki’s blocks at some point yourself.
If you’re interested in finding out more, you can find all the links in the show notes by heading over to WP tavern.com forward slash podcast. Where you’ll find all of the other episodes as well.
And so without further delay, I bring you, Aki Hamano.
I am joined on the podcast today by Aki Hamano. Hello Aki.
[00:03:35] Aki Hamano: Hello, Nathan.
[00:03:36] Nathan Wrigley: I am really pleased to have you on the podcast today. Real welcome to you. Aki is joining us today to talk largely about blocks. We’ve had a few conversations before this, trying to figure out what it is that we’re going to say. We’re going to talk mainly about Aki’s contribution to wordpress.org and the blocks that he’s created there.
First of all Aki would you just introduce yourself, tell us who you are and where you come from?
[00:04:06] Aki Hamano: Okay. I’m a web developer by living in Japan. And I built many website, for my client and recently, in my side project, I create some blocks, and published to wordpress.org plugin directory. It’s very fantastic.
[00:04:29] Nathan Wrigley: We will be talking about those blocks later. There’s many of them and some of them have a very serious purpose, as we’ll find out, and some of them are just for fun. So we’ll get into that in a moment. Before then, could you just tell us a little bit about the WordPress community in Japan? I confess I have never been to Japan, and I don’t know too many people in the WordPress community in Japan. So I’m just interested to hear what it’s like, how big it is. Are there any meetups? Anything like that?
[00:05:02] Aki Hamano: Ah, yes. Actually, we plan to create an event, WordPress Mega Meetup in May. And there is a lot of communities in Japan, and we are enjoying to contribute or talking about WordPress or create things. It’s very exciting in Japan.
[00:05:27] Nathan Wrigley: Do you have regular meetups spread throughout Japan? For example, in the UK, there are different meetups, usually in the big cities like Leeds and London and Manchester and so on. Do you have meetups in Japan as well?
[00:05:43] Aki Hamano: Actually, I don’t have a meetup, but the biggest meetup is WordPress Tokyo meetup. That’s the biggest communities.
[00:05:54] Nathan Wrigley: And are real world events happening at the moment, or like the rest of the world, are you doing virtual meetups because of COVID restrictions.
[00:06:04] Aki Hamano: Yes.
[00:06:05] Nathan Wrigley: Yeah, it’s all virtual, like it is here in the UK. Well, it’s nice to, nice to have you on the show. If anybody who is listening to this, is from Japan, we’d be most interested to hear from you and possibly get engaged in conversations about what people in Japan are doing with WordPress. But it’s nice to hear that you’ve got your Mega Meetup, hopefully coming out in May.
Let’s talk about your blocks. Well, before we get to your blocks, let’s talk about blocks in general. And I want to ask you the question, what is it that you like about blocks? Why do you find blocks to be exciting?
[00:06:41] Aki Hamano: I have a simple answer. I love to build the things, and I think it was similar to use Lego blocks. It’s very exciting, and I’m very excited to see on block editor when I create some little code on my editor. It’s a very, very fantastic, that’s all.
[00:07:05] Nathan Wrigley: Did you start to build blocks right at the beginning? Have you been doing it for years or is it more recent? Have you just been doing it for a year or two years or three years?
[00:07:17] Aki Hamano: Maybe three, maybe three years, and actually my first block plugin, Rich Text Extension. And WP Tavern posted an article about this plugin three years ago. That’s my first block.
[00:07:36] Nathan Wrigley: There’s quite a few more that have come down the pipe and we’ll get to those in just a moment. We’ll do them one at a time in a minute. I’m curious to know how difficult you found it. Was it very hard to learn the new skills required to build blocks? Did you find it straightforward or was it really challenged?
[00:07:57] Aki Hamano: Ah yes. I think it’s very, very hard. because we need to build codes and we need to learn another language, JavaScript, and framework reworked or NPM. I didn’t know why do we need to build the code because, for example, PHP works you know? I didn’t understand what does it mean to build. So, it was very difficult to understand the commands, new language and the build tools.
[00:08:33] Nathan Wrigley: Why did you make the effort? If it was really difficult, why did you persevere and why did you keep going with all of this difficult new technology, when it would have been easier just to carry on doing what you were always doing?
[00:08:49] Aki Hamano: So. I will learn from and Block Editor Handbook. There is many tutorials on there. It’s very useful document. I started to create blocks. And another example, there is a useful GitHub repository, Gutenberg Examples. There are many examples on the repository and I analyze these codes, and also, I deep dive into Gutenberg core code and core blocks. It’s hard to understand these codes, but it’s very useful for me to build the blocks.
[00:09:33] Nathan Wrigley: Do you think it’s easier now? If somebody was starting to build blocks today, do you think they would have an easier time? Are there more, tutorials, more documentation to make it easier than it was for you? Is it an easier thing?
[00:09:52] Aki Hamano: I want to recommend NPM package. So it’s a WordPress create block. The package creates a block plugin template and automatically install recommended script package. And with simple command, we can build plugin quickly. And if you change some codes in JavaScript, we can see the change on block editor. So first I want to recommend create block package.
[00:10:29] Nathan Wrigley: I will link to that in the show notes. So that’s the WordPress create block package.
[00:10:35] Aki Hamano: Yes.
[00:10:36] Nathan Wrigley: Are there any other tools that you have found useful? That could be things on your computer, software, or it could be resources, tutorials, or books or anything that you might have used. Is there anything which you think was really useful apart from the WordPress create block?
[00:10:55] Aki Hamano: There’s many tools but I use basic tools. For example, I use VS code. For local environments, I use WPM, that’s all.
[00:11:07] Nathan Wrigley: Just those two things?
[00:11:08] Aki Hamano: Yes.
[00:11:09] Nathan Wrigley: Now I played with your blocks over the last few days and there are five, I think, currently there. You can find Aki’s Github repository which has links to the public facing versions of them. Alternatively, you can also find them on wordpress.org, and I will, in the show notes, link to them individually. There are five and I’m going to go through them in order of my favorite. Not necessarily in order of how clever they are, or how brilliant they are, but just the ones that I like, because I could see a use for them. I’ve left probably the most, interesting one until the end, which is just fantastic fun, but I couldn’t see myself using it, so I’ve left it until the end.
But, first off, let’s talk about your flexible space of block. Now this, you will find on the wordpress.org repo as you will do for all of them. Tell us what this does. This is sublimely clever. It’s very, very cool.
[00:12:12] Aki Hamano: Yes. we know that core spacer block can create space, but only unit, and only one height. But I want to create multiple spacers, depends on window width. This plugin enables you to create three types spacer, for desktop and tablet and the mobile. And we can change the break points.
So breakpoints, it’s used to media queries and also I can create a negative space. So we can cross two blocks, and I need it, so I made it.
[00:12:55] Nathan Wrigley: Is that why? It was something you needed, and so you created it and then let it go into the repository? That’s very nice to hear.
[00:13:02] Aki Hamano: Okay, thank you.
[00:13:03] Nathan Wrigley: The interface, the way that the block works, is you obviously install it as a plugin in WordPress, and then you have an option, there’s a spacer option, which appears, a flexible spacer. And instead of the core block, which just has the spacer, Aki’s block gives you three different spacers in one.
So the interface shows you what the mobile spacer will do, what the tablet spacer will do, and what the desktop spacer will do. And they’re all there in the interface all at the same time. I can only say that you’ll get it if you install it. It’s difficult to explain, but the moment you actually have it on your website and you see the purpose of it, it’s brilliant. So rather than having the settings in the menu on the right, all of the settings are, well, certainly for the height, all of the height settings are actually right before you in a visual way, and then as Aki said, there’s the option to, create negative space. There’s a toggle switch and you can create negative space and then you can draw up your content to overlap with other blocks. It’s really nice. It works really, really well. Well done.
[00:14:11] Aki Hamano: Thank you.
[00:14:12] Nathan Wrigley: The next one that I want to talk about is probably I think the most installed of the five that we’re going to talk about. This is your flexible table block. And again, I will link in the show notes. Would you just quickly tell us what your flexible table block does?
[00:14:29] Aki Hamano: Ah, yes. The most great point is that we can create merged cells. Core table block doesn’t allow too merge cells. This burning can create many, many kinds of styles on each cells and it’s very easy to insert or delete row and column from bottom, top of the table. So I think you can create any kinds of a table.
[00:15:00] Nathan Wrigley: Yeah. So when you’re in Gutenberg, after you’ve installed the plugin, you get the option to add in a block, and in this case, you want to be picking the flexible table block. If you just search for table, you’ll get the option to insert it.
It’s got an icon with like a lightning bolt, and then it throws in a table, but the options there’s so many fantastic options. The most useful, I think of which as you said, is the ability to merge cells. So for example, if you put a three by three, three row and three column table in, you could merge all of the columns or the rows, or just a portion of them, and you can do that by clicking shift and selecting multiple cells at the same time. And then you click the little merge icon to make that happen.
But it also brings along a whole load of other possibilities. So there’s, there’s the option to obviously add in as many rows as you want in a intuitive UI, but there’s options to add in colors, uh, you can add in headers and footers to the table, you can add in widths of difference sizes and, you know, padding and margins and all of that. And then you’ve got options for captions as well, and topography options as well. It’s got a lot, basically. And it’s all done in a visual way and it just works. Now this must I’m imagining have taken quite a long time to create.
[00:16:23] Aki Hamano: Yes, it might be confused to create table, but we can create any kind of table. It’s my purpose.
[00:16:31] Nathan Wrigley: it’s really, really excellent. So again, if you go to the show notes, you’ll be able to find the flexible table block. And as Aki said, the main purpose there is just to, is to really, to be able to create any layout and merge different things. And you’ll see in the show notes on the wordpress.org repo, all of the different options and what have you. And it’s, it’s very comprehensive. Essentially, if you want a table to be displayed in almost any configuration, then the flexible table block is highly recommended.
My third pick is your rich text extension.
[00:17:05] Aki Hamano: Yes.
[00:17:07] Nathan Wrigley: Again really interesting. Tell us what this does.
[00:17:10] Aki Hamano: The plugin is my first plugin. I made it two or three years ago. Now Gutenberg enables you to create inline highlight, but, two or three years ago, we don’t have the function. So, I want to create, I want to highlight inline text, or I want to enable, I want to change the inline font size. So I made it.
[00:17:39] Nathan Wrigley: There’s a couple of options which become available. Essentially, you can highlight text in several different ways. So you could fully highlight in one color or another. So you could, for example, in the pre-installed version, when the plugin is installed, you get the option for yellow and red, but you can change those as you wish.
And you can either do full highlighting of the text, or you can do half highlighting and you can, you can specify how thick the highlighting is. So for example, if you wanted it to appear almost like an underline, it could highlight a bit like that. Or alternatively, you could just go full height and highlight the whole text, and you’ve got several options to switch different things on, rename the highlighting.
So you might like to rename it as bold red or something like that. And then you’ve also, got the, other option, which is to change the defaults for the size of your text. So you can have as many as four different options, and you can rename them, whatever you like. And you could have like an ultra small, a medium, a big, or a really big. Pick whatever names you like.
And then those are added into the Gutenberg editor, as options for changing the text size. So let’s say for example, that in the middle of a sentence, for some particular reason, you just wanted one word to be extremely big, you could do that with Aki’s rich text extension solution. And then of course you could highlight it as well.
There’s a settings menu, which enables you to fiddle with these things, but there is only one menu and everything that you need to interact with is in that one, simple menu. Does Gutenberg now do all that this one did?
[00:19:24] Aki Hamano: So highlighting inline text is able to create now via Gutenberg now. But to change in line text size, we can’t create now on Gutenberg.
[00:19:37] Nathan Wrigley: So it still, it still serves a purpose, it’s still useful. Just as an aside, how often do you go back and look at these plugins and update them. I can see, for example, that the flexible spacer block was updated two months ago and you’ve updated the flexible table block just one week ago.
Are you committed to keeping each of these going? Do you go back and look at them, all five of them regularly?
[00:20:05] Aki Hamano: Ah yes. So before WordPress major update, I check these plugins will work. Fix some issues, I want to add some new functions, yes.
[00:20:18] Nathan Wrigley: So you go back periodically and check them just to make sure each time WordPress Core is updated. That’s great. Thank you. Okay, next one, second to last one, is the custom HTML block extension. What does this do?
[00:20:37] Aki Hamano: There is block that we can create pure HTML, and we can create pure HTML to show on front-end. It’s a custom HTML block, but it’s very hard coding on block, because there is no text highlight and it’s difficult to add indent. So I want to create some codes in editor which are like VS Code. Actually, this plugin use VS Code Core library named Monaco editor. So we can write code like we coding on VS Code. It’s very similar to VS Code. It’s easy to create code.
[00:21:26] Nathan Wrigley: This feels like it was the most difficult to create. I could be wrong, but this one has so many different options in there.
[00:21:37] Aki Hamano: Yes.
[00:21:38] Nathan Wrigley: If you wish to create something on your website, which requires you to write some HTML, but the core HTML block doesn’t really highlight things or indent things in a way which makes it easy for you to understand, because you’re used to your IDE, VS code as you’ve described in this case or whatever you’re using.
This makes the HTML in Gutenberg look and feel just like it would do in your text, editor of choice. So things can be indented, things are highlighted, the font can be altered. You can customize it to look exactly how you prefer it.
And then when you click save and publish, everything is output on the front end just as HTML. So, all of that design is stripped away and it becomes HTML. You know, if you’ve got something in an H1 tag, it looks like an H1 on your website, depending on what your theme is telling that to do. Again, why did you build this?
[00:22:46] Aki Hamano: Why? So sometime I can’t create a layout with core block or other plugin. So sometime I need to write some code directly. And so I want to write code more easily.
[00:23:07] Nathan Wrigley: If you are familiar with using a text editor, then this will just be fantastic for you. You’ve got everything that you want. You can resize, you can use things like Emmet and what have you, and, you might be able to throw in a, the demonstration that you have here is a list item, sorry, a an ordered list and you add five items in using the Emmet shortcodes and five list items will appear and so on.
So it’s really for those people who want to put HTML into their WordPress posts or pages and want it to look like their IDE, something that they’re familiar with, something that they’re used to. And yeah, bravo, it’s a chore doing anything in the core block cause it doesn’t have enough similarity to what you’re used to doing on your Mac or PC. Okay. So we’ll recommend that one as well.
And last but by no means least. This is just genius. In fact, this is the one that alerted Justin Tatlock, I think to you, he maybe been following you before this, but this was the one that he wrote a piece about over on the WP Tavern, and I’ll link to that. This is, this is the piano block. I can tell you it does exactly what you think it’s going to do. It puts, it puts a piano inside of Gutenberg. Now, why, why do we need a piano inside Gutenberg? This is brilliant.
[00:24:33] Aki Hamano: First, I want to say it’s just fun. And maybe someone might say, what can they do with this plugin or, what does it mean. My purpose, my purpose to build these things is, enjoy to create. I want to try a potential, possibility of block editor..
I want to know what block editor can create, can explain, and also, I love music. I wanted to play music on book editor. It was crazy.
[00:25:09] Nathan Wrigley: Yeah, that’s something that I just find really interesting. The idea that it doesn’t have a purpose beyond learning how to use the block editor.
I would thoroughly encourage everybody to go and install this one one, and just put it somewhere and try it out. Basically what you get is a block and you add the piano block. It’s got a lovely, obvious icon. It’s probably the most obvious icon I’ve ever seen that clearly is a piano as an icon. And, you get, it looks like a couple of octaves, keys are all there. You’ve got keyboard shortcuts, so every key on the piano is mapped to a key on your keyboard.
So if you really wanted to, you could actually play on the keyboard. Alternatively, you can just hover over with your mouse and click on the key in question. You can increase the volume and decrease the volume. There’s the opportunity to choose from, I don’t know, it looks like about 12 different sounds.
So we’ve got an acoustic bass and electric guitar and organ, a regular piano, violin, harp, and xylophone and so on. And then there’s the addition of, there’s a toggle switch for those people who like to have sustain. So it turns the sustain pedal on and off. Now the only purpose is for fun.
[00:26:29] Aki Hamano: Yes.
[00:26:30] Nathan Wrigley: At the minute, it doesn’t go onto the front end though does it? If you publish this, that block will not appear on your website. It’s only in the editor itself. Now, why is that?
[00:26:43] Aki Hamano: My purpose is to play on block editor, not the front end. It’s the reason, and it was difficult to create piano on front end because this block made with React, and I don’t build React on front end now, but I think it is possible. In the future I may enable it.
[00:27:09] Nathan Wrigley: So at the minute, it’s not able on the front end because there’s gaps in the knowledge that you have. It’s built with React on the backend, and you’ve yet to figure out how to make that happen. Obviously with a project, as fun as this, it doesn’t necessarily have a purpose on the front-end and probably it’s not right at the top of your priority list.
I’ve got to say though, it’s got the least options, a lot of the other ones, for example the rich text extension that you have and the flexible table block, they’ve got lots of different options available to style the way things look and so on. The custom HTML block extension in particular has lots and lots of different options.
I’m imagining though that they were potentially easier to build than the piano block, because the piano block, It’s like a toy, it’s almost like a game built inside of the editor. So was the piano block, was that the most difficult to pull off because, you know, you’ve got all sorts of things happening.
You’re creating sounds at the moment that you click a button and those sounds have to be a particular octave. They have to add sustain and be generated by a different audio sound. I’m imagining, you know, depending on which instrument you’re manipulating. Was that the most challenging one to build?
[00:28:25] Aki Hamano: Uh, yeah. This plugin used web audio API, and web audio API is very, very complicated, but I use wrapper library, tone.js. It’s enabled to create sounds with small code. And most of the difficult things is to find good sounds, because this plugin used real audio sounds, each note.
[00:28:53] Nathan Wrigley: Oh wow, okay.
[00:28:55] Aki Hamano: I needed to find audio with GPL compatibility. It’s very difficult to find it.
[00:29:02] Nathan Wrigley: So, for example, if I play, I don’t know, an a on the acoustic piano and then play a D for example, then they are different audio files that you’re pulling out in order to render that sound?
[00:29:17] Aki Hamano: Yes.
[00:29:18] Nathan Wrigley: That’s really interesting. These are all free. Obviously the piano block is just something a bit different. It’s a bit of fun, but all of the other four that we mentioned, they’re all free and they all have a very useful application. Do you plan now that you’ve got all this experience, do you plan at any point to come out with any new blocks, any new things that we might hear about?
[00:29:43] Aki Hamano: Now, I have no idea, but I want to create block for full site editor. For example, I want to create block, inside the query loop block. For example, if the article was posted in a few days, we need a new level. So I’m planning to create a new level block. Or social network sharing link block.
[00:30:12] Nathan Wrigley: So you’ve got a couple planned for the future. This must take a lot of time. And although you described earlier that you’ve been doing this so that you can learn, and in some cases you needed something to be done, presumably for your websites. Do you plan on creating revenue, charging, having a pro version of any of these, or are they always going to be freely available on the repo?
[00:30:41] Aki Hamano: So, I want to create these plugins for free. It depends on WordPress philosophy. No, I don’t think because I get money from my own work. So these plugins don’t need money. I want create these plugins for free in the future.
[00:31:01] Nathan Wrigley: That’s absolutely fantastic to hear. I love the fact that you’ve created so many free plugins and they’re so different from each other. If anybody wanted to reach out to you and talk about these different blocks that you’ve created, what’s the best way? That could be an email or it may be a Twitter account or perhaps Slack. What’s the best way to get in touch with you Aki?
[00:31:25] Aki Hamano: If you love these plugins, please follow my Twitter account, or please send and direct message. Or please check my Github repositories.
[00:31:36] Nathan Wrigley: I will link to all of those. The accounts for Github, the Twitter account, I will link to in the show notes. So yeah, if you want to reach out to Aki and express your gratitude, or just have any questions, then be sure to check out the show notes on the WP Tavern website.
Thank you for joining us on the podcast today. I really appreciate it.
[00:32:00] Aki Hamano: Me too. Thank you.
source https://wptavern.com/podcast/24-aki-hamano-on-building-useful-blocks-for-fun
Comments
Post a Comment