Victor Ramirez is the Lead product analytics engineer @TheKnotWW and worked @DowJones @WSJ until about 9 months ago? He is also a co-organizer of WordCamp NYC and WordPress meetup. Founder of the Abstract Agency doing digital marketing and content strategy for customers.
Over Labor Day weekend he posted a twitter thread on his progressive plant to customizing the WordPress editor for clients.
This is the tweet that started the thread:
For better readability, I posted the other tweets here.
The progressive plan for customizing the WordPress Editor for clientx
Level 1
- Style the editor and core blocks to match the client theme.
- Disable custom colors & fonts to keep the client on brand
- Disable all core blocks your client doesn’t need per post type. Too many options are confusing. (Optional)
Level 2
- Customize the core blocks by adding block styles (think body styles on a car)
- And extend existing functionality
- Example: You don’t need a custom testimonial block. You need a block quote with a custom style and link attribute!
Level 3
- Build Gutenberg block patterns by grouping together core blocks and styling with CSS.
- Pro-tip: also disable columns. They’re too messy & your patterns can cover these.
We still have not created a custom block, installed any plugins, or added dependencies
Level 4
- Build custom blocks via ACF. We are only adding ACF for ease of use. Fields, custom post types, taxonomies, & user roles are all core WP.
- Less time training developers, training users, & maintaining systems (the hardest part!)
- 6-Step Guide To Custom Post Loop Gutenberg Blocks by Joey Farruggio
More Block Editor & Development Resources
- Victor’s repository from WordCamp Phoenix (GitHub)
- Block Unit Test (plugin) by Rich Tabor
- GoGutenberg – What is the Block Editor documentation and tutorials.
- InnerBlocks with ACF blocks
Transcript
Birgit Pauli-Haack: So, hi there. Welcome to the 21st Gutenberg Times Live Q&A. My name is Birgit Pauli-Haack and I’m your host and the publisher of Gutenberg Times. Thank you all for watching and joining us on this short-term notice, kind of two days before the event. Today’s show, we will discuss a multitude approach on customizing the block editor for clients.
Victor Ramirez is here with me and we will take a look at how he and his team approach it. Thank you, Victor, for taking the time and putting this together. Walk us through the process.
We’ll do some proper introduction in less than a minute. I have just a few housekeeping notes. As you all know, there is on the right-hand side … oh, on the bottom of the screen you see the chat window and that’s where you can post comments and say hi and where you’re coming from or where you’re watching from. Then there’s another one that says Q&A and that’s when you can put in your question and I will then, with Victor, kind of answer those. On YouTube, we are also live now and there’s on the right-hand side, there’s the chat window where you can leave your questions and your comments.
So thank you, all, for watching. Also those that are watching this on the re-run, welcome.
Well, if you make sure that you keep your questions question-like, not so much a blog post but more a question, and then also keep it family-friendly. Even if you disagree, be kind. That’s part of our housekeeping here. Yeah.
Well, Victor, you agreed to come to the show and I get an hour with you to talk about your work. But let me introduce you.
Victor Ramirez is the lead on product analytics engineer at The Knot WW, and formerly worked at Dow Jones and the Wall Street Journal until about nine months ago, and he’s also co-organizer for WordCamp New York City. One of my favorite WordCamps, of the WordPress MeetUp. He’s also the founder of Abstract Agency, doing digital marketing and content strategy for customers.
Hi, Victor. How are you and what’s new in your life?
Victor Ramirez: Just living through a pandemic like everyone else and just moved into a … you and I were just talking before. I moved into a co-working space to kind of get out of the house a little bit. I am isolated, though. I’m in my own little two desk space. Just moved in, so there’s … I don’t know if anyone sees the mess behind me. But yeah, doing that. And interesting enough, this year, even though it’s been a terrible year for the economy, I’m very lucky. Still employed, fingers crossed, at The Knot, but also my side business doing WordPress has been busier than ever just because clients are looking for ways to streamline content creation, and I’ve been working a lot with that, so I’ve been really busy.
Birgit Pauli-Haack: Wow, that’s awesome. I’ve had actually the same occurrence with February, March I got really busy and it got busier, busier. Right now, I’m still a little bit in the summer, summer ditch a bit which is actually good for recovering. So, I say hi to Ramona from Colorado. Hi to Rita from Reno. Thanks for saying hi in the chat.
You got my attention when you, Victor, when you tweeted over Labor Day weekend, and I think not only my attention but somebody else. Very quite insightful and succinct. This four-tiered approach on customizing block editor for clients. I think it’s very helpful for developers, aspiring developers and also developer designers who are just getting started with WordPress or Gutenberg. You started out with, because I’m overly opinionated … aren’t we all, Victor? The progressive plan for customizing WordPress Gutenberg and level one … so we have levels one, two and three. Then they require zero plug-ins and 90% cascading side sheets and level four. So do you want to walk us through the levels and kind of get started on that?
Hi, Andre.
Victor Ramirez: Yeah. Yeah, so the … it’s interesting. So my girlfriend and my coworkers have been telling me to begin to document the stuff that we’re doing because one of the things that I’ve gotten really, and I think it’s just from being involved in the meetup, in the WordCamp, and as like a quick FYI, every time a speaker flakes, and I don’t mean flakes. Things happen, people get busy, people can’t make a call. So I will step in as the speaker and so the challenge to me is then to have to write something quickly and what I do is at my day job, not just at The Knot doing analytics but my side business doing WordPress, most of the work I do is educating my developers and educating my clients about how we use WordPress.
So what I had to begin to do was … so I guess like my one teammate, she calls them Victor-isms, and they’re things that where I compartmentalize ideas to be in very kind of digestible steps that not only allow us to communicate to the client, but to communicate to the developers and communicate to the larger groups. For example, and this comes from the concept of when I was at Dow Jones, it took us two months to get a local environment set up, and I said, “Guys, it should take one day. Why does it take … a student can set up tensor flow in a weekend,” tensor flow’s a machine learning algorithm from Google, “and it takes us two months to set up a local environment for a WordPress website.” Now I keep that in my mind when I work with clients and I work with developers.
We recently hired some developers from offshore. One developer’s based in Vietnam, one’s based in Brazil, and then I work with a developer in Croatia. Every developer has their own approach, so what I wanted to do was try to one, have a uniform approach but two, I wanted to hire from less … from different talent pools. So one of the things when I hired the person that I hired from Vietnam, he’s like 23, just graduated college with two kids so he’s a very busy guy, and the other person, this young woman in Brazil, she is mainly a view developer, not a WordPress developer, but she knows WordPress enough.
So by doing this kind of leveled framework of where I’m like, “Hey guys,” they immediately would go, “Yeah, no, I’m going to go away for four weeks and do all this the way I do it and research things.” Now that could lead to a nightmare because some people might use ACF for fields, someone might use Metabox for fields, someone might roll their own fields. Again, think about all the things that are involved in a WordPress, basic WordPress project, right? Whereas I said, “Hey, I don’t want you to go away for four weeks because by the time that happens, WordPress could change completely, Gutenberg could change. Let’s work incrementally. What could we do in a week? What could we do in two weeks?”
So when I add a developer, the developer from Vietnam when I tested him before being hired, I gave him an HTML template to add in and he added the HTML template and knew how to use Gulp and SaaS and because of that, he was more able to get to what I would say the level two or level three of my tweets better than some WordPress developers because a lot of WordPress developers are so focused on PHP. They’re still using PH … most WordPress plug-ins and tutorials are still using PHP 5. You can cut and paste from PHP 5, 6. So what I tried to do was say, “Hey, let’s break this down where it’s just what can I do? What can I have a low level developer from Vietnam, Brazil, who’s just starting out do in three steps?” So the first three levels, I can hand them a handbook, walk away, and one week later they’ve completed it.
Birgit Pauli-Haack: So the level one is kind of … has three things on it, right? One is style the editor and the core blocks to match the client theme. Then this enables the custom colors and the fonts to keep the client on brand, and then disable all core blocks that your client doesn’t need for post type. Too many options are confusing. I totally agree with that. So style the editor and core blocks to match the client theme.
What other tools that you suggest to developers? You linked a page, or a website, an article by Rich Tabor saying how to add retro theme styles to Gutenberg. I’m going to share that link.
Victor Ramirez: Yeah, and if you want, what I can do also share my screen about….
Birgit Pauli-Haack: Right.
Victor Ramirez: I brought up … so WordCamp Phoenix, I did a talk about Gutenberg and the joke was that you don’t even need to know a reactor JavaScript to do half the things that we’re doing here. So this is my … and by the way, after the call, or after this Zoom or YouTube or whatever we’re calling it these days, this is a repository. It’s public. It’s on my GitHub user name is victorious. It’s WCHPX 2020. Shout Out out to WordCamp Phoenix. That was a really fun time. They had laser tag.
So basic WordPress … so if you see, the first step was style the editor and the core blocks to match the client theme. What I did was I would say to them, “Hey, look, the first thing I set up, and I even have it on my own personal site to show you guys,” I have them set up Richard Tabor’s block unit test. So that is not actually available in the WordPress repository anymore, but Richard Tabor’s project was acquired by GoDaddy and he was acqui-hired, but the plug-in is still available on the Go Daddy repository.
So the first thing my developers do is they go in and install the block unit test and what the block unit test does is creates every single available version of every single core block in the system and creates a mega page. Then what we do is if the developer … sorry, if the client already has brand styles, then we just match the brand styles to this. So for example, this is Heading One, Two, Three through Six, and we will then say to the client, “Do you have any alternate styles?” What we will do is then we will add, and this is in the level two I’ll talk about that, but we say, “Hey, do you have any H One through Six?” And it’s kind of funny. A lot of times, clients won’t have these styled, and this is one of the most frustrating things about WordPress. A lot of times when agencies sell a theme, they sell an incomplete theme. They sell a theme that only designs what the clients sees, whereas with this block unit test, we’re designing everything the client could potentially see in the future.
So we have the designer go and style these on the front end and on the back end as well so that not only when the user or the site owner is interacting with the blocks, they are interacting with it, excuse me, in the way that the user would. So we expect the same thing from our developers and it’s a challenge to them.
So in level one, they’re going and … let me just jump into this site to show you how the block unit test actually works.
Birgit Pauli-Haack: Mm-hmm. Yeah. That’s cool.
Victor Ramirez: So when that loads, like I said, from Richard Tabor, the block unit test and that plug-in goes and creates a page, and that page I have here called Block Unit Test, and the other thing, too, is we say to the developer, because a lot of times developers will just go and style the front end and they’ll go … and so many developers I found are used to the WordPress backend just being ugly and not looking nice. So what I say to them, “No, no. Look. This has to work this way and the client should be able to …” so that’s the level one, right? Just go and style all the things that are available in the core blocks.
The level two is disable custom colors and fonts. This isn’t on my site, but I can just let you know why this is a problem. You give this client this beautiful H 1. It matches their branding exactly. Then the client goes and instead of going to H 6 to make it smaller, they go and … oh, sorry. We did disable this. We remove the default font picker so they can’t go and pick the font size for these. The reason we do that is we don’t want the client to go and highlight this and then go make this font size 35 and all of sudden, they’re not using the H 1 in the way that it was meant … they’re going to take an H 6 and resize it, right?
The other thing is we usually disable custom colors, but we import the client colors. You can do a color palette for the client and have all their colors there, and then remove the custom color because in reality, they’re just going to go and do something silly like put a black font on a dark blue background and make it unreadable. So we restrict that.
Then in that same thing, we go and disable core blocks, and this is actually … this is kind of a nightmare. I have these things, there’s the affiliate’s image. That’s from my site, and I’m a WordPress user so I know what needs to be there, like layout elements, but one of the things we found is that clients … the column system is just not, and this isn’t any … it’s not even just like … it is not the system because Beaver Builder, Elementor, they’ve kind of been working on columns for four years. Clients just don’t understand columns. They’re never going to get a column to work correctly on mobile. So what we do is we disable the column picker, we disable Spotify, and we create a spreadsheet.
What I actually do is I go and I actively do a rest API, call up all the available blocks, dump it to a spreadsheet on a monthly basis, and when we onboard a client, we quickly go through and go, “Here’s your suggested configuration and here’s some blocks that we’re turning off. Do you think you need Spotify?” And the clients are like, “No,” and it’s very easy to turn off, by the way. Just to show you what I wanted to show you was in the repository that I shared from WordCamp Phoenix, I didn’t get into block development but I got into customizing the editor. What we went and did on every single type, this is … we create a custom functionality plug-in, and again this is more modern development that WordPress developers may not be used to. They go into everything into functions.php. The problem is if you throw everything into fucntions.php, and you change your theme, you lose everything.
So we go and add all of our blocks … sorry, all of our custom functionality that is not related to the theme into a file in a core functionality plug-in. In that core functionality plug-in, we require, once all the types and so for example here, we have this type of service and I think it’s the type of case study, I think, is where we removed … we did a block white list in one of these, so this was in February that I did this talk so I forget … ah, here we go. So in this February talk, all we do is run this big function, and I know I don’t normally like commented code left in a PR, but we leave this here so the client can just go and say … the client goes, “Oh, I want gallery back.” Okay, we comment it back on. “Okay, we want this back.” Oh, we turn it back. In each CPT file, we just have this big directory of the available blocks. So for this promotion, we limited it to only paragraphs, images, and headings for this CPT.
Birgit Pauli-Haack: CPT is custom post type?
Victor Ramirez: The other thing I do, just if anyone asks custom post type. Custom post type. Correct. Sorry. Thank you for that. I forget that we’re … outside the WordPress, we get in our little bubble.
Birgit Pauli-Haack: That’s okay. That’s okay.
Victor Ramirez: Yeah. There’s some other things that I highly recommend in this. Always document your functions. So we document the function of what it does. Restricts blocks for promotions post type. Put a link, so you can do at link. Again, if you borrow this repo, I put a hot link to every single function and you can command click it in VS Code or PhpStorm, and that way instead of my developers coming and going, “How’d you do that?” I literally link to every single thing because I’m not that smart and it makes it easier. So we’re documenting in the code, where the developers then, we go and hack and borrow from our own code.
So that’s level one and that was a lot, but those little things all of a sudden, cleaning up the client theme so it looks exactly how they want it, removing certain functionalities so they can’t make it look the way they don’t want it, because you don’t want a phone call when the client goes, “All my text is blue when I’m green,” and then disable the blocks they don’t need and then already the editor is much cleaner.
Birgit Pauli-Haack: Yeah. So there are, I think, two functions. One is to disable the core block colors and the other one is disable the core block font types.
Victor Ramirez: Correct.
Birgit Pauli-Haack: Okay. Yeah. Yeah, and the … you said you used the API column to clean, install, and then have that in a spreadsheet when you try to serve all available blocks?
Victor Ramirez: Yeah. So let me actually bring up my … in my other window, I have it. Let me … I’m just looking for it because we’ve done so many client projects recently with this, but it is called 03 and it is structure, so one second here. I’m actually going to show you one of the spreadsheets that we do this with, and it’s called … I’m in another window. Here we go.
So when we go and plan out the CMS, and this is something we’re doing now for clients, and I’ll show you guys in the window, we go … we don’t even work in the CMS with the client, because the client, they start to get blind. They go and see all these things in CMS, so we work in spreadsheets, and this client, for example, they had … their dashboard had all this garbage in there and so we were like, “Hey, we’re going to go and make it so all these are hidden and sliders, etc.,” then we go and get the types and then finally what I do is I hit the rest API and the rest API gives you all the available blocks. It can print out all the blocks. And we just shoot it into a spreadsheet and we go … if you recognize, let me zoom in a little bit here. If you recognize common formatting, all of these blocks, we go and say to the client, “Hey, which ones will be available per post type?” So the blog will have paragraph, we’re turning off audio, we’re going to turn on this.
Then also to make it easier for the client to understand, we go and link to every single … we do a demo where they as the … because everything’s remote and I kind of, not that I don’t like phone calls, it’s just exhausting to be talking all day. And so what I do is I say to the client, and also the client, I’m working with a CMO or marketing director or a manager, they don’t want to have to go and bother them so what they do is they can share this in a 20-person team and they’re like, “Well, what’s a quote block and how does that work?” Then I link to that for each one and then they go and … they just go and, “Oh, that’s a quote block and that’s great. Wait a minute. But our quote blocks should look different,” and that brings me to level two where we go and say, “Hey, you can choose styles,” and that’s how we demo this. We say, “Hey, look. There’s quote style one and quote style two, but we can do … what’s your brand’s quote style one and quote style two?” So yeah, so that’s how we plan that.
Birgit Pauli-Haack: That’s awesome. Thank you for sharing that. Yeah. So any questions for this level one customization from our people that are watching? Well, hi, Yuca, on YouTube. She had a comment. Although seeing the Gutenberg engine already, but definitely interested in this show. Super big thanks. Okay. Cool. There was this funny joke, you saw it kind of. Are those short stack developers instead of full stack developers? That’s pretty cool.
Victor Ramirez: Yes. Yeah, and it’s … but I think the thing, too, is we don’t … it’s not even like we’re not trying … I’m not hiring developers that are purposely lower skilled. It’s that also there are some developers who just to get up and running on WordPress, it’s so much work. It’s easier to find someone, in my opinion, who understands semantic HTML, CSS, and build tools, and then we disable the PHP engine and we just say, “Hey, look, now the WordPress site, the template, looks the way it needs to look, the HTML template looks the way it needs to look. Please go and use JavaScript and CSS to add the UI functionality that we need for the client to be happy.”
Birgit Pauli-Haack: Yeah. I totally get it, yeah. So if that’s level one, what’s level two? It says customize the core blocks by adding block styles, and then extend the existing functionality. Example, you don’t need a custom testimonial block. What you actually need is a block quote with a custom style and a link attribute. That’s kind of the next tweet. There was a lot of information in this Twitter thread.
Victor Ramirez: Right. So I don’t have … again, I don’t have styles loaded from a client, but if you guys steal somebody’s screen, this is a default functionality of WordPress core. So again, this is not anything custom. This is the default block quote from WordPress and it comes in two styles, default and large. What a lot of people may not realize is you can then … what this large is actually doing, and all it’s doing, is it is going and adding a wrapper, a class wrapper, around this block quote, with the class of let’s say large, right? And then so when I go to that quote, so then the client comes to us and says, “Oh, well, our block quote looks a certain way.” We can just go to this actual … find the block quote and see it says is style large, right? Well, now I just go look for that is style large in my CSS, and I could go and target only that particular style large class, right?
So when you go, and that’s why kind of that Richard Tabor tutorial, and actually I think the other one that’s really good that keeps it very straightforward, Bill Erickson does Gutenberg styles and he does block styles. Again, because I don’t have an option ready, he shows two versions. He just modified large and modified a regular, right? Again, you can just use the default styles, but then you can add an additional style by adding a JavaScript call. You do need a custom JavaScript file for your core editor and you can see here, some of what I was talking about before, he did Heading 1 through 6 one style, had a style two. So it’s about … I think it’s about 10 lines of code. You’re creating and queuing custom scripts that load in the editor and then he is registering the custom style and he labeled it alternate.
So they’re doing the same thing here in core, where they’re saying is large. You’re going to do is alternate, and then your new style will be available for each of these. You can do these for any of these. You can make your headings … I worked with clients where when you add that style, now that style will be pickable there, and that happens all the time where a client may have a cursive font or some kind of CTA font they want. You can do that even with buttons. We have, and actually I think that’s in core, in core there’s button style one and button style two. Actually, this is from this theme that I’m using. So you can go build your own.
Then extending the custom functionality, again I don’t have one right in front of me right now, but we had a client that wanted to do quotes, and what we did was we found okay, they wanted quotes with a link to the author’s name. All we did was we extended it, and I think linked in there to add extended functionality. That’s from Jeffrey Carandang. Sorry, Jeffrey, if I’m butchering your name. I know we’ve met twice.
So he has it’s extending blocks and it’s Jeffrey Carandang. So all you do is again, basic JavaScript. Now that you’ve added that basic JavaScript file that loads particular styles, you can use that same JavaScript file to add an attribute. What you can see he’s doing here is he is adding a custom attribute to a core Gutenberg block of like, and it adds an attribute and what it looks like it’s doing here is it’s assigning an attribute of visible on mobile and he’s registering it to … let me see here. Where he’s passing it? Right. Custom panel control. See, he added mobile, and this is a toggle. Mobile device visibility.
So recently we did that for a client where all we did was we added a text field and let them add a URL, and we didn’t add a custom testimonial block. All we did was add a custom attribute of a URL and they could click … they could highlight here, or click there, and have the URL and add the link. So you can modify the basic WordPress blocks very easily. So what we try to do is when we go and work with a client on a project, we work through these and we say, “Okay, do they need level one, level two, level three,” and that gives us also a better way to scope time.
So yeah, that’s what I was saying here. You don’t need a testimonial block. And also the other thing, too, is you can actually use Inner Blocks to cheat. I guess I should have put that as a level 2.5, where now ACF has Inner Blocks and even Gutenberg has Inner Blocks. An Inner Block is where you essentially create a block that calls in other blocks. So you can make your own testimonial block by using the H 1, the paragraph, a link, and then an image. Then now, use Inner Blocks to put those in with default attributes and now you’ve created your own testimonial block, but you’re not actually … you didn’t actually create a block. You’re just using the core blocks and calling them in a pattern.
Birgit Pauli-Haack: Yeah, so Juca Pauline has a question on YouTube. Is name scope a problem in doing Gutenberg blocks? Can the component be easily shielded into its own name space?
Victor Ramirez: So I’ve not run into any issue, but name spacing is important to make sure when you’re going and it’s all about how you build your files. So whenever we’re working with CSS, prefixing all of our functions, prefixing everything and actually had that in the demo. We’re building out currently where all of our CSS, all of our JavaScript is modularized where it is all name spaced and so by default, ES 6, and if you guys can see my screen, we go through all of our code and we make sure to name space this … sorry, I just pulled this down. I have a developer working on it. So yeah, for all that, you will run into name space issues if you don’t properly prefix, name space, and work with your code.
So that is one of the things that gets frustrating for developers, but that’s why I recommend, again, starting with level one and two. You really shouldn’t run into those issues as long as you’re using the core blocks and you’re, again, prefixing your functions, making sure to name space things and import properly. But yeah, that will be an issue if you go to scale and you don’t plan for those things.
Birgit Pauli-Haack: I’m just making a little pause here to make sure that people who have questions can kind of be more targeted and not have to wait until later. If you have questions about adding custom block styles as well as extending core blocks, now is a good time. Of course, we can do the Q&A later, but just to get the first questions out of the way.
Victor Ramirez: Then one more thing. On my screen, you might see there’s this guy, Igor Benic, who’s really….
Birgit Pauli-Haack: Benic.
Victor Ramirez: Yeah, Benic. Sorry. I’m going to butcher his name, yeah. So butchering names today. But yeah, so he writes great stuff and he actually wrote this a while back. If you look at this article, he talks about Inner Blocks but the thing I think that he did great was he showed how CoBlocks, which is owned by Richard Tabor, went and used the Accordion lock and the Accordion Block is using Inner Blocks. They didn’t really go and write their own block, they just used the core blocks to create a block called Accordion that uses Inner Blocks.
Birgit Pauli-Haack: Yeah, I’m glad that you mentioned that. That is actually one of the most clicked links on one of our resource pages from the Gutenberg Times. It’s Enable Inner Blocks for Gutenberg. It’s kind of interesting, yeah. Yeah. Okay. So we have that. I’m looking around the space and I don’t see any questions right now. Oh, good. Yuca Pauline says, “Good tip on naming.”
All right. We are at level three. Build Gutenberg block patterns by grouping together core blocks and styling with CSS. Pro tip, also disable columns. That’s what you mentioned before. Nobody gets that right. The Gutenberg block patterns is just new in WordPress 5.5, but it was around the Gutenberg plug-in for quite a while, and we have another link to Rich Tabor, How to Build Block Patterns for the WordPress Editor.
Victor Ramirez: Right. So the way that I came into that, I didn’t even know it was called block patterns because I had not been really following the block pattern build-out. So I left Dow Jones in January and I had not really been involved, kind of like tracking the active development of Gutenberg, but I did go … and what I was doing was we were using StudioPress Genesis, and a couple of things I actually kind of don’t like about StudioPress Genesis. I want to give a warning because sometimes I feel like some people may go and purchase something because I recommend it and then get mad because I didn’t warn them about something.
One of the things I don’t like about Genesis is it goes and changes default functional … I’m very opinionated in the sense that everything that you do should be as close to core as possible because you’re doing your clients and your user a disservice. So for example, if I want to change the layout of this to full width sidebar, in default WordPress you would go to page attributes and choose the … this should say sidebar left, sidebar right, but Genesis does this thing where it does layout. We actually kill this, get rid of this whole custom sidebar and move all the settings back over here via custom attributes.
Again, they had that. It wasn’t … again, they may be doing it for a particular reason. We did it and moved it over, and now we’re moving back to Patterns because before Atomic Blocks and Genesis, before Patterns was out, they had this thing called Layouts, and it actually was Patterns, but built a different way. So we would go and it wasn’t really well documented, but Atomic Blocks had in their repository you could go and make your own patterns. So these are patterns.
So if you see the way I’m doing this now, if I want to go and add something here on this page, instead of going add a block, and by the way in the new WordPress, in 5.5 which I don’t have active right here now, you would go like and instead of just adding a block, these patterns would show up next to your blocks as well and you can add a preview of each one. The layout picker, the way it works from Genesis or Atomic, is if I go and pick a layout and then I go and pick this and I click it, it goes and adds a layout, and what do you know? Three columns, right? I’ve disabled, again not in this instance, but they went and added in this layout, they went and added columns, they added column gap. So this whole pattern has its own controls, had its own functionality.
So now it’s really restricting the user, but it’s restricting the user in a good way. If you remember I said remove columns, now it’s easier because there’s so many times where a client will say, “Oh, I want to add two columns,” but then they go and … I had a client who was adding … they kept making columns and trying to put the media text block. If anyone’s not familiar, the media text is like a hero type image. But they kept trying to put the media text block into four columns and then getting annoyed that it looked terrible on mobile, but they didn’t understand padding, they didn’t understand all these things. So what we did was by getting rid of columns and restricting to layouts, they couldn’t just go and add other blocks in other places. If you see here actually, I can’t go and add other blocks into this layout.
So by restricting that, you’re taking away control for the client, but you’re also giving high value adds where you’re saying to the client, “Hey, just give me all of the available patterns or all the things you use, and I will add these for you.” Now some clients, I hear marketers and people that use Beaver Builder screaming, but what I do is I restrict … I will go and create a custom post type of promotions and restrict the page builder to only promotions of a custom post type. That way when the user logs in, they can only ruin those pages and then they can fight with the designer on how to get that. But for the primary users, we use this. So that’s what I like to do there.
Then yeah, that’s kind of it, really. They’re simple. You can build these blocks and similar to Richard Tabor’s tutorial, once I build out a group of blocks, I can just take that group and then export it and turn it into a pattern.
Birgit Pauli-Haack: Yeah. Yeah, and that’s what Rich is showing. I also shared a link to the Gutenberg Times WordPress Block Pattern resource list, which is actually covering the whole aspect of it, not only how you use them but also how there are plug-ins available that you can install as a site owner on your site, and then create, with the core blocks, your pattern so to speak, and then save it to the Pattern and it will show up as a pattern in your inserter. Those are quite nice. There’s some other cool links in there, also.
I found three themes that do block patterns quite well, so you can actually look at them and maybe learn from it and do some creative inspiration there. But that is … with 5.5, it has been … I think it’s a game changer, block patterns, because it can be done by anybody to do these templates but you don’t really need JavaScript for it. What Rich is showing is actually how to put it in your Functions page or a separate plug-in but also using the block editor to create them. You can style them and everything, so it’s really interesting.
I would suggest that any designer and developer to learn more about block patterns because it helps you so much with the Gutenberg and making really good with the clients, yeah.
All right. So, but we … as you said in your tweet, we still have not created a single custom block, installed any plug-ins, or added any dependencies, right?
Victor Ramirez: Right.
Birgit Pauli-Haack: So now we come to level four, or do we have questions before we go to level four? No question here. Nope. Nope. Yeah, go ahead.
Victor Ramirez: Okay, cool. Yeah, so on the level four, and again, there was actually someone that commented on the tweet, or the tweet storm I guess, that I did and they said, “Oh, I don’t agree about ACF.” I’ll be honest. I actually, when I was at Dow Jones, I kind of began to not like Advanced Custom Fields but the other thing was I … and I think a lot of developers make this mistake that you are in the WordPress developer bubble because what happens is you end up thinking, “Yeah, man. It’s just easy to maintain a block,” and it’s like if it was so easy to maintain code, I mean look at it like, what is it? Space Jam? Has anyone ever seen that, by the way? The Space Jam website, the Michael Jordan cartoon movie, the website’s still standing, I think 20 years later. Twenty years later this site is still standing, right, but if we were to go and look at the source code it is just plain HTML. There’s nothing in here. There’s no scripts. There’s nothing. I think there’s a script for a policy update warning and that’s it.
Birgit Pauli-Haack: There’s a tracker, yeah.
Victor Ramirez: Yeah, where as modern development, there’s so many different changes, so many things going in and when you are … and you’re doing yourself, in my opinion, a disservice. You can’t be mad at a client who pays you $10,000 for a website and then when you … when a block breaks they call you three months later to fix it and you’re like, “Oh, that will be another $500,” because now you’re charging them 5%. They’re abstracted from that mentally, meaning where they are like … and the one reason I bring that up, too, is I would say at Dow Jones and I even say at The Knot, we’re competing with Domino’s and the reason is that the user experience, when you go and order a Domino’s pizza, there’s a pizza tracker and you can watch from the minute the person puts the pizza in the oven to the minute the person delivers the pizza. For $10, that’s the user experience they get. People don’t realize there’s a 500-person development team at Domino’s who’s building their infrastructure systems, but to the user, they’re like, “Why does my $10 pizza have a better user experience than my $10,000 website,” right?
So one of the big things that I brought from being in enterprise development to now still doing websites for marketing for start-ups for their marketing websites is kind of how’s this thing going to stay standing? So AVF may … it doesn’t have inline … the one thing that drove me nuts, it didn’t have inline editing, right? You’re essentially just putting fields inside of the Gutenberg editor. The one thing that it does do is it handles the dependencies. Your client only has to worry about updating Advanced Custom Fields. They don’t have to worry about updating low dash, updating babble, updated web pack, updating all these JavaScript technologies, right? So ACF is really beneficial for that.
Now, of course, if you’re dealing with an enterprise client where you’re on an annual retainer and you have the development hours, go for it. Build custom blocks, right, but like I said, if you don’t have a client on a retainer and they’re not doing a maintenance plan you’re putting yourself in for a world of trouble by not using Advanced Custom Fields. The other thing, too….
Birgit Pauli-Haack: Especially now, yeah. Especially now that Gutenberg is still so volatile, changing APIs left and right and CSS and all that. Yeah.
Victor Ramirez: Right. And JavaScript and the web in general is getting volatile with core web vitals now, the way that we track speed. Everything’s changing.
But the beauty of Advanced Custom Fields is that, and actually I can even show you. Let me see if I have a demo available. So this is … let me see if this still works. Give me one second. And probably not, but let me see if I get in here. Give me one second. And auto fill. Nope, that’s the old one. Other pro tip, use a password manager always.
Birgit Pauli-Haack: Yeah.
Victor Ramirez: And so….
Birgit Pauli-Haack: Yeah, so I shared in the chat the link to the documentation for ACF guide, how to do blocks, so people can then study for themselves later on. Yeah.
Victor Ramirez: Yeah. And so this is actually one of my favorite examples of what we do now for clients. This is like full circle WordPress 101, okay? This is actually … this is what I spoke about at WordCamp Phoenix. If you go and borrow that repo, it’s what I built in here.
So the number one thing that drives me nuts at most WordPress build-outs is you will see here that notice it says Search. That should say Search Testimonials. But even Modern Tribe Events Calendar Pro, when you go and hit view or whatever, it will say when you hit Add a New Testimonial or you publish a testimonial or publish an event, it will say View Post. That drives me crazy. It’s not a post, it’s an event. Again remember, get out of your WordPress bubble. Outside of the WordPress bubble, that is very confusing because you know that an event is a custom post type because you’re in the bubble. Outside the bubble, they don’t know that.
So the other thing is that on most people when they go and create CPTs, they leave this button up here that says View Posts, View Testimonials. Well, this testimonial is headless, meaning where we don’t even allow … there’s no render. And so what people don’t realize you can do, and I did this at WordCamp Phoenix, is you can go to the type of testimonial, and I did this here. I went and disabled … I changed all the labels to match exactly which is insert testimonial, view testimonial, filter testimonials, et cetera, et cetera. I go and remove … I leave the title, by the way. It drives me nuts when people change the default title to an ACF field. There’s so much rich functionality that the default title field does. You’re creating work for yourself. Don’t do it. So I change that.
Then we go and do this kind of work, and again it’s documented here at site point, where we go and it says testimonial updated, testimonial created, and if there is no front forward facing publicly queryable link, it will not say view update. It will just say updated. It won’t say view updated testimonial.
So why does this all matter? The reason this is great is now we have this set up where there’s a front-end submission form where the client, via gravity forms, can send it to the user, they go and fill out the form with their testimonial. When the testimonial … and then they see it as a draft. The client goes into the testimonial and then publishes it. If you see here, just standard ACF, they can go and see here. It gets categorized, the testimonials, the user image, and then the program type. The reason I’m showing you CPT when I’m talking about blocks or ACF and blocks is now this user can go and simply add this testimonial wherever they want.
The way that we’ve written these … let me just go here. The way that we’ve written these blocks is if the testimonial that they chose has been deleted, it will fall back to the most recent testimonial. So that way if the client forgets to put a testimonial, and so I can go here. And the other thing we did was we put the user’s … we put the site’s keywords into each custom block. So if you see here, this is ACF, ACF, ACF. So they have SEI testimonials, and then it by default lists all the testimonials but they can go pick one, they can select the testimonials. So a lot of the stuff that I see people doing with custom blocks, the client doesn’t want a custom block. All they want to be able to do is get the content into here.
Now an example of that is you go and get a tool like … I was using, in my younger days when I was in WordPress, eight years ago, I would go and reach for a plug-in. I would go and say, “Okay, they want testimonials. What’s the best testimonials plug-in? Tick, tick, tick. Okay, what’s the best whatever?” And then there was a great plug-in called like Super … not Super. Great Testimonial … there was a great testimonial plug-in, but the user would have to go and create a testimonial view, then take that testimonial short code and paste it where they wanted it. Then they would have to go and add the testimonials in the testimonials section. That was actually good … so you’re sending the user all these places.
Now think about this. The people who maintain this site, they don’t have to actually go and create the testimonials. They’re submitted to a page. They go and get an alert when there’s a new testimonial via Gravity forms that needs to be approved. They approve it and then the people creating the content can just go and grab the testimonials and add them where they want them, swap them out, select the testimonials here. They can even go taxonomy. So now you’ve made this … and there’s nothing to change, there’s nothing here. They can’t really break it because they’re not actually choosing the testimonials.
Now some people might say, “Well, why not just make a testimonial block they can fill in,” right? Well, you’re assuming that someone wants to go and change the testimonials on 50 different pages, right? What I’m doing here is I’m giving them hey, you never have to touch this page again because it’s using a CPT and it’s querying those.
So that even means like when we’ve done … outside of this, I’ve done logo sliders. I’ve done logo arrays where people show off their favorite clients and all they have to do … and even bigger, and this is kind of like I don’t want to jump off Gutenberg, you can use something like WP All Import and there’s other ones too, that synchronize via CSV and we have clients where they have sites with thousands of posts. They don’t actually go into WordPress, they edit the event via CSV in a Google sheet. The Google sheet is dynamically being pulled in the blocks and then people can go and style and do whatever they want to do and add different things to the pages, but the events are automatically pulled into CPTs and no one can even actually edit the custom types.
So that’s why I love … again, I went on a little diatribe there, but that’s why I love ACF for blocks for CPTs.
Birgit Pauli-Haack: Yeah, yeah, very interesting. Good. Then you shared … so you shared the post with ACF, how to bridge custom blocks, but you’re still … so it’s without code on that side, but you still need to template the block on how it’s rendered.
Victor Ramirez: Right. So that would require … yeah. And to show you kind of, let me bring it up. SAI. So this is the code base. It’s not public, sorry. I probably should make an OpenSource of a full theme that we did. Again, we do everything in the functions file. So the types and taxonomies are in the functions file….
Birgit Pauli-Haack: Of the plug-in.
Victor Ramirez: Of the plug-in, correct. The plug-in function file. But then for the theme, we do put all of the in the lib, all of the blocks which are actually under … man, I haven’t touched this in forever, and I’m actually on the wrong branch, I think. Ah, doo, doo, doo. It’s under either template parts … here we go. Template parts. And so for the testimonials, they have the block CSS and this is all it is. Block PHP and it’s just a loop to, “Hey, here’s the loop.” If the testimonials are ordered by single or by count or selected and remember I told you all we do is go and get basic HTML and this is super basic HTML. It’s going and getting the post thumbnail, the attachment URL. By the way, that’s because I prefer thumbnails over custom fields. Gets the attachment responsive. Post meta. And that’s it. That’s the template to go and create the block and then the CSS is very light as well.
Again, just basic CSS and then the block is actually declared, because again this belongs to the theme itself. The type, the data still exists, but the block belongs to the theme in this case. So in that case, we went and moved … again, this is crazy. This was built four or five months ago, and now we’re realizing no, this is not how we want to do it. We want to move these over somewhere else. But we go and register those here, so like that. And that’s all it is. Like 10 lines.
Birgit Pauli-Haack: Yeah. Yeah, and then in the level four, you also shared a link to the 6-Step Guide To Custom Post Loop Gutenberg Blocks by Joey Farruggio, I think was his name. So I’m going to share that out as well, because you want to….
Victor Ramirez: And actually my comments are … I have a super comment on there where I told him, “Hey man, you probably should not use the word post because people don’t know what that means. It should be select testimonials,” and when you see in his tutorial, he literally tells people select post, and that makes no sense. Again, because he’s using WordPress brain, not user brain.
Birgit Pauli-Haack: Yeah. All right. So well, we are all through the level one with styling, core block disabling parts. Then customizing the core blocks with adding block styles, adding stuff. That’s the level two. Level three is build the Gutenberg block patterns with a lot of resources there, and then level four is build the custom block with ACF, or if you are willing to do that, you can certainly do this in JavaScript and build your own custom blocks, but for maintainability….
Victor Ramirez: By the way, I just saw Carrie … sorry. I just saw Carrie Delzazon here, by the way. So Carrie, if I did anything stupid with Genesis, tweet me because now I’m like, “Uh oh.” I’m checking the names to make sure … yeah.
Birgit Pauli-Haack: Yeah.
Victor Ramirez: Carrie … I steal all of Carrie’s … can I just say that the best part of the WordPress community, I feel like we’re all just Mad Max ripping stuff off each other’s car and trying to put together hot rods and I borrow Carrie’s. Carrie’s like … if anyone is interested in Genesis after this, go look up Carrie’s LinkedIn courses, and then also Tonya Mork has this great site called Know the Code, and so I borrow their stuff from Genesis. So I’m like all these concepts I borrowed from the Genesis community and the Atomic community who gave me a heads-up. You can tell I kind of have my favorite artists that I follow, right? It’s like a record collection. You have these certain labels and groups. If anyone remembers, you used to follow a record label, you know?
Birgit Pauli-Haack: Yeah, yeah. So Tom, yes. This show will be shared on YouTube and I have the links here. I’ll put them on gutenbergtimes.com. So each of our live Q&As has its own post on the Gutenberg Times with all the links that were shared in a transcript later on. You can always use it as a resource. Carrie Dils just published another article on Gutenberg blocks and Genesis, so we will have that in our newsletter that comes out tomorrow. So if you want to sign up for it.
All right. Now are there any questions, apart from things? Yeah, hi, Carrie. Any other questions? I see … yeah, this is awesome. All right.
We also have … the Gutenberg Times also has the Gutenberg Changelog podcast. The number 28 has been published, or the episode 28 has been published and we will record next week, Friday, after Gutenberg 9.0 comes out and do that.
Other announcements I don’t have. Do you have anything?
So if people want to contact you, Victor, thank you so much for leading us through this and giving a little deep insight on how you and your team work this all out. Is there a place … how can they reach you and if you have anything else that you want to have last words, so to speak?
Victor Ramirez: One thing I did not mention in this tweet storm, and I probably should add it at the end, is I use WPGulp. It’s not … it hasn’t updated in a minute. It’s by a guy named Ahmad Awais. WPGulp, there’s a comment in there … I think Carrie and I actually uploaded the comment and I even … the guy has had a … there’s a guy who made a PR and it’s how to split your code between so you can write one file for your fonts and it will automatically split it between the editor and the front end. Same thing with JavaScript, same thing so you’re not having one giant, 20,000-line front end code item. You can split your code, and I even now have it where I split code by CPT, split code by the editor if we have a really large set of data for our front-end component. So I highly recommend that.
If you want to talk to me, just talk to me on Twitter is probably the best space. DMs, there’s just so much spam out there and that way, too, on Twitter, it makes it I can share answers with everybody. So yeah, check it out on there. That’s the best … or even go to … we have a meetup. Shout out to WordPress NYC. We have a meetup this Tuesday. Luckily I’m not speaking this week, but someone will be speaking about unit testing and we are 100% virtual, so just go to meetup or just Google meetup WP NYC, and also more of my talks are on wpnyc.org, we record all of those, or you can check me out on WordPress TV.
Birgit, you’re muted, Birgit.
Birgit Pauli-Haack: Well, I didn’t want to … I muted myself because I was typing and some folks kind of get those vibration on the show. I just shared the WPGulp link in the chat and it’s by Ahmad Awais, who also is kind of very strong in VS code stuff as well as he was the first with cool grade Guten blocks.
Victor Ramirez: Yeah. CGB.
Birgit Pauli-Haack: Yeah. So it’s a great community. Thank you so much, Victor. This was an awesome show walk-through. Within one hour you kind of have the whole development process revolutionized for a few people. Thank you so much and it was great that we had you.
Victor Ramirez: By the way, I’m flattered that you even thought that, so thank you for everyone who was impressed by that tweet, so thank you.
Birgit Pauli-Haack: Well, thank everybody for attending. If you have any questions, just shoot me an email or also connect on Twitter. Well, this was it. Thank you so much, everybody. Have a great weekend, and I’ll see you when I see you.
Victor Ramirez: Bye. Thanks, guys.
Birgit Pauli-Haack: Bye. Bye bye. Bye, Peter. Bye, Rita. Kristen. Bye bye.
