Product Build Breakout Summit/2020: Rock Your Blocks! Web Design Acceleration with Genesis Pro
Need professional, secure, SEO-ready sites spun up faster than ever before? Learn how to use Genesis Pro’s page builder to create compelling content faster while keeping the content on brand. Bonus: get an exclusive preview of block building capabilities coming in Q3 2020!
Bryan Smith, Genesis Product Manager at WP Engine discusses:
- The state of WordPress blocks including: WordPress core blocks and editor features, block libraries and editor enhancement tools, and custom blocks – plus, how to create your own blocks!
The Block Editor is the absolute center of modern WordPress.
Full text transcript
[00:00:01.09]
– Hi everyone, thank you for joining me for this product breakout session rock your blocks, web design acceleration with Genesis Pro.
[00:00:08.09]
My name is Bryan Smith, the product manager fo Genesis here at WP Engine, and you can find me on Twitter @smithkbryan. Let’s get into it.
[00:00:19.02]
So what’s in your block editor toolbox. There’s really three main areas that I wanna talk about today. The first of which is the WordPress core blocks and editor features, then we’ll talk about block libraries, and other editor enhancement tools that really extend what’s available in WordPress core.
[00:00:35.08]
And then lastly, we’ll get into custom blocks, and show you something that you may not have seen before, but this is really the ability to create your own blocks, no knowledge of JavaScript required.
[00:00:46.05]
Let’s talk first about core blocks. So this really is the foundation of modern WordPress.
[00:00:53.05]
As many of you know, Gutenberg was released in December of 2018 and WordPress 5.0.
[00:00:59.06]
So this is the first time we had access to the block editor in core, what we’ve seen leading
up to that release, and since then are much faster release cycles in virtually every core release cycle.
[00:01:10.04]
We’re seeing new blocks coming for the block editor, new improvements to the block editor.
And we’re now in 2020 moving from phase one of Gutenberg, which is the ability to add blocks
to the content area of your page, that exists now.
[00:01:26.02]
We’re moving into full site editing where every area of your page will be editable as blocks, header, footer, sidebar, all of that is coming very soon.
[00:01:37.09]
Hopefully before the end of the year, we’ll see it in WordPress core.
[00:01:40.09]
What many people don’t know is that this is gonna change the way that themes fundamentally work.
[00:01:46.07]
They become a lot less, less functionality in the theme itself and more blocks with the
answer for functionality. Themes are more about the style itself, but the takeaway that I
want to impart upon you is the block editors, the absolute center of modern WordPress, 73.2%
of WordPress sites now are running WordPress 5.0 or later.
[00:02:10.04]
So this is really taking off. It’s not going anywhere. This is a Gutenberg, and it’s part of WordPress.
[00:02:17.07]
Let’s talk block libraries and editor enhancements. So these are things like the atomic blocks block library that many of you might be familiar with. I wanna show you a new product that we have as part of Genesis Pro. It’s called the Genesis page builder, and I’m gonna show walk you through a demo here in just a second.
[00:02:36.02]
Before I do, Genesis page builder really builds upon what we’ve done with atomic blocks.
And we’re introducing what we call a library of sections. These are page sections, and full page layouts, all built with blocks.
[00:02:48.07]
So these are blocks within blocks to build out entire pages worth of content. So let me walk you through it.
[00:02:57.04]
So first on our clean WordPress install, we wanna make sure that we have the plugin installed.
So this is part of Genesis Pro, it’s called Genesis page builder, we’ll then make sure that we have a Gutenberg theme installed. I’m using monochrome Pro, this is a clean and simple theme.
[00:03:13.03]
It has a Genesis theme, but Genesis themes are not required to use this plugin.
[00:03:18.00]
Let’s create a page next, we’ll give it a title, and then up here, you’ll see the layouts model so this is part of the plug in functionality.
[00:03:29.01]
You’ll also see it in the block selector here. Then you can also pull up the layouts modal with a forward slash start typing layouts. So what you see here is our list of sections.
[00:03:41.07]
We have over 40 sections now, you can favorite the ones that you like the most.
[00:03:45.07]
These are really pre built sections, page sections. Within the modal window, we can also select categories. So if I’m looking for a hero header, or I’m searching for a profile header column, for example, they would show up there in the keyword search.
[00:04:01.06]
The second tab is our layouts. So think of these as multiple sections combined to create a full page of content. Now we’ve pre designed this library, we have over 20 section currently, we’re adding more all the time.
[00:04:13.09]
Then lastly, within the window, the modal, I’ve got my favorites that I selected on those previous tabs.
[00:04:21.04]
So let’s select a layout. We’ll select mobile app, and now we need to customize it. Cause this is all kind of pre designed content, it is not suited for your use case, but it is very easy to modify this to whatever site you’re trying to build.
[00:04:42.09]
So we can switch out background images simply and easily. And this is the block editor that we’re looking at.
[00:04:50.04]
So this is a Gutenberg. We can easily edit paragraph headers and each of these areas of
the pages I’m showing you are sections that build up an entire full page layout.
[00:05:04.07]
See that I easily change the text there on a button, really leveraging what’s available in WordPress core with the block editor, but extending it much further than what’s currently available.
[00:05:17.09]
So in this section, I’m gonna show you how easy it is to completely customize it.
[00:05:22.00]
I’ve added an accordion block, I’m just copying text these column blocks down here, cause we wanna change our layout of the section from a column view to an accordion view.
[00:05:35.06]
So now I’ve removed that column section. Just trying to demonstrate how easy it is to customize individual sections. And let’s add in a completely new section to this page.
[00:05:49.01]
This is a pricing table. Here we can quickly and easily change the terms of the pricing for our
different levels of service, change the numbers as well as year versus month, over here on the right, you see that we’ve got our settings, we can set currency, currency symbol, we can also change the styling here.
[00:06:14.07]
So I’ve added a border, I can easily change the color on that from blue to red,
any color you can imagine, and then once I’m done with it, I can save it.
[00:06:26.08]
Here I’m saving it as a reusable block. Reusable blocks ore a WordPress core functionality, but it’s something that we’ve integrated tightly into our layouts module.
[00:06:39.01]
So now that I’ve customized that, I removed it, now I’m gonna pull back up our layout selector and now you see a new tab called reusable blocks.
[00:06:47.06]
This is the section we just saved. And here you can see our custom version of our pricing table section.
[00:06:54.09]
I published that and here is the complete page so you can see it very much looks like what it did on the back end.
[00:07:02.06]
The last thing I wanna show you is our block permissions settings. So for all of our library of blocks, within the settings of each block, you can set permissions. So as long as you’re the admin you can set who has access to what, whether it’s, the Drop Cap or the Drop Cap size, in the case of that block we just looked at, you can set it and getting some really good feedback on that.
[00:07:31.07]
So if your Genesis pro user, please check it out and let us know what you think.
[00:07:35.08]
So that is the Genesis Page Builder plugin as part of Genesis Pro.
[00:07:41.00]
Next, we’ll go on to custom blocks. So this is when a block library is not quite enough, kind of a pre built library of sections and layouts, just don’t have the extensibility that you need.
[00:07:55.05]
So the next plugin I’m gonna show you, also part of Genesis Pro, is Genesis custom blocks.
[00:08:05.04]
So what you see here is a block for a campaign. You can see it has a unique style to it. Over there on the left, we’ve got a progress bar showing that we’ve raised 70,000 of our $100,000 goal, we’ve also got the donate now button, and then some, the name of the campaign your voice for them, and then some subtext as well.
[00:08:26.09]
So let’s recreate this. First, we wanna make sure we have the plugin installed and activated.
[00:08:32.04]
We’re using the 2020 child theme here, but it would work with the Genesis theme. Work with any Gutenberg ready theme. So let’s come to the plugin settings, add a new content block, we’ll give it a name, we’ll choose our icon, and then we’ll give a keyword to make it easier to search for.
[00:08:55.05]
Now we need to add in the fields. So these are all the areas that you saw on that original block
so will give a goal. A title text progress bar, which is going to be a number, an image field, and then our button itself. The button link, as well as the button text.
[00:09:17.07]
Hit publish there, you’ll see that it’s complaining that we’re missing some files.
[00:09:21.05]
So let’s come over here to our editor, we’ll go into the theme folder, add a new folder called blocks, another folder under that, which is gonna be the name of our blog, campaign, then we’re gonna create two files here, block.php, and block.CSS.
[00:09:43.08]
And let’s hear you refresh. Okay, yep, that warning went away.
[00:09:47.06]
So let’s see what it looks like at this point.
[00:09:51.08]
So you’ll see campaign right there, we can select it, and now we can start adding in the content of our fields. So this is the title of the campaign that you saw initially, the text where we’re at on our progress towards our $100,000 goal, we select our image.
[00:10:11.09]
Let’s give the button a link.
[00:10:16.06]
And then the text we want on that button. Block rendered as empty. We need to do a little bit of coding here. But don’t worry, we’re just gonna use some included functions.
[00:10:29.09]
Now you see, we’re already starting to get data through here. Come back here, so block field
is the name of the function. So next, to organize the HTML here and then I’m gonna use this block field function for all of my different fields.
[00:10:47.07]
Let’s change it from title to text in here, and then now we’ll work on our progress bar.
[00:10:58.03]
Change that to progress, so now we’re pulling that data through to the front end.
[00:11:05.07]
Goal is our max, and then here’s our text. So far we’ve raised that 78,000 of our 100,000.
[00:11:16.01]
And then now for our button, our sorry, our image, you can see that the data is already now being pulled through from the front and it isn’t styled yet.
[00:11:23.01]
We’re gonna do that here in just a second. But first, let’s add in our button URL, and then our button text. We’ll give this class a name called block campaign.
[00:11:39.04]
One more div here. This is gonna help with displaying it. Styled the way that we wanted the image wrapper there.
[00:11:47.03]
Okay, now let’s make it look pretty. So in the CSS file, I’m using Flexbox. And we’re gonna use some of the built in functionality of that.
[00:11:56.05]
To style this we use flex grow and then we set the background color, and set our padding as well. And to align that wide.
[00:12:08.04]
Okay, now we’ve aligned it wide. You can see we’re starting to see some of the style come through.
[00:12:12.08]
So let’s just add in a few more sections here. It’s gonna be for our button.
[00:12:17.06]
Next, we’ll add in the padding, and the color, background color, and this bit down here at the bottom is all around our progress bar and setting the right colors for that font size and opacity.
[00:12:43.07]
Let’s just look back over this one more time here. Make sure we have it the way that we want it,
then we should be able to see our final result here.
[00:13:00.07]
Here we go. Our finalized block looks just like that original one. We’ve created a block, a Gutenberg block in less than five minutes.
[00:13:11.04]
Simple, elegant, and no JavaScript required. So I think you can see the power of this tool,
Genesis custom blocks, and how easy it is for anyone really to build a block.
[00:13:26.09]
So back to Genesis, how does all this stuff fit together? So we’re building on one of the greatest legacies in WordPress.
[00:13:33.00]
As many of you know, we celebrated our 10th anniversary of Genesis back in February and Genesis has always been known as a powerful theme framework.
[00:13:40.08]
But what we’re adding here is Genesis as a block library and custom blocks.
[00:13:45.08]
We wanna present this as a full fledge site building platform optimized for the future
of WordPress, where WordPress is going with Gutenberg.
[00:13:55.04]
All of our tools are centered around that. So we’ve got Genesis, our free functionality,
which includes the framework, block library and custom blocks, and then we’ve introduced
Genesis pro as well.
[00:14:08.06]
This is where you get all of our premium themes, premium blocks, layouts and custom blocks.
So we’re investing more than ever in Genesis and I wanted to just shout out to our team of 15 product and engineering leaders that have been around the WordPress community for a long time.
[00:14:24.06]
You may recognize some of them, but we are committed to really helping the Genesis community into the future of WordPress, and everyone else in the WordPress community, utilize and leverage all of the great functionality that WordPress core has been introducing over the last couple of years.
[00:14:45.01]
So what’s next? Well, I’ve mentioned over and again that we’re building for
this future of WordPress, but what does that mean?
[00:14:52.00]
So Genesis today is a parent theme framework. Our vision for it though,
is to become a plug in, a plug in that we can distribute on wordpress.org
that anyone can use, and get a feel for it.
[00:15:05.07]
We want to make sure that this plugin that we’re introducing also supports full site editing.
[00:15:11.04]
So we’ll need to introduce a full site editing theme as well. So these things will work in tandem.
So stay tuned for more details on that by following our StudioPress blog or WP Engine blog
as we release more information on that, and lastly, I just wanted to mention our Genesis cloud.
[00:15:30.02]
So this is something that is currently slated to start development in the next few weeks.
And think of this as a flavor of digital asset management. So if you are building custom sections or layouts, blocks, or themes, you wanna be able to download and upload these assets to cloud and access them from the Genesis plugin.
[00:15:53.00]
So that’s exactly what we’re looking to build, the ability for you to build out these custom assets in WordPress, upload them to our Genesis cloud, and then on any site that you have the Genesis plugin installed,you’d be able to pull those down, customize them, and then upload them back for reuse on future sites.
[00:16:10.05]
You no longer have to use the built in importing and exporting of blocks and themes and things like that are built into WordPress. If you’re interested in Genesis Pro, check it out on wpengine.com/genesis-pro, and lastly, thank you so much.
[00:16:29.00]
I really appreciate you joining me today. We’re gonna take some questions here in just a minute.
But again, thank you really appreciate it.
[00:16:37.09]
– Hello, everyone, welcome to the Q&A section for rock your blocks, Bryan I just gotta say I love that presentation. I know there’s a lot of chatter and slack and everything around some of the demos was really well done, so we have some questions from the audience here and we’ve kind of been compiling those, people have been asking them.
[00:16:59.04]
If you still have questions, please make sure to post in there in the question area beneath the video, but we’re gonna start with one from Billy.
[00:17:07.02]
Billy says this is awesome. Any thoughts about adding block animations or blocks with animations?
[00:17:15.08]
– Yeah, I mean we’re always looking at adding new premium blocks, especially to the Genesis page builder that I demoed earlier.
[00:17:23.08]
That is something that’s come up. It’s not towards the top of our list right now, but I’m always open to that sort of feedback.
[00:17:31.05]
And we’re also looking around in the space to see what else is being built with blocks? What’s core doing? We follow along closely with that.
[00:17:39.07]
So appreciate the question. Certainly something we will keep in mind.
[00:17:44.03]
– Right, like those animated blocks. Next question is from Eric. Some of this looks like it overlaps with Lock Lab. What are the strengths or weaknesses of one over another?
[00:17:59.03]
– Yeah, so I mean, talking specifically about Genesis custom blocks, there is quite a bit of overlap. The team that we have on board that’s working on it participated in the Block Lab, plugin development. So a lot of what you see there is very similar.
[00:18:17.00]
In that regard, we’re looking to expand upon that, and really take this into a much bigger, broader direction. We’re also looking at integrating Genesis custom blocks into the broader Genesis suite of site building tools.
[00:18:32.00]
So looking for integrations into our Genesis themes, the framework itself, and then the block library that I mentioned, as well. So really looking to take what a lot of the functionality that you’ve seen in Block Lab and take that much further now that the folks from Block Lab have joined forces with WP Engine.
[00:18:50.08]
– Yeah, you can actually catch an article on that Eric on the Block Lab blog. They kind of blogged about that, and their move over to WP Engine.
[00:18:58.08]
Rob, Luke and Ryan have all joined the WP Engine team. They are working on Genesis custom blocks as Brian just said, really excited to have these folks on board, and also super excited for custom blocks that’s probably one of the most requested block based features we’ve gotten in the Genesis universe.
[00:19:16.07]
All right, Brian Next up is John. John asks so all Genesis themes are moving into the pro service, will full site editing only be in pro?
[00:19:29.06]
And that’s the end of his questions. So the first question is, will all the themes be moving into the pro service, the Genesis pro service?
[00:19:40.00]
– Gotcha, so the Genesis themes are still available for sale, for purchase on StudioPress.com.
[00:19:46.06]
As WP Engine customers of course you get those as part of any WP Engine hosting plan.
[00:19:51.08]
That will continue to remain the same. If you go to StudioPress.com and you’re not a WP Engine customer, we have launched Genesis pro there, it is a replacement for Pro Plus.
[00:20:04.05]
So Pro Plus on StudioPress.com used to be the all themes package.
[00:20:10.03]
Now you can get access to all the themes by buying Genesis Pro, through StudioPress.com.
[00:20:16.04]
– Studiopress themes that third party themes are still sold individually.
[00:20:20.06]
– They’re still sold individually, third party themes are still sold individually on StudioPress.com.
[00:20:25.03]
So what was the second part of the question.
– And then will Genesis pro be the only product in the gym as paraphrasing here, but will it be the only product in the Genesis pray universe that supports full site editing?
[00:20:38.07]
– No, our intent is that, our Genesis products independent of pro support full site editing. And David, you mentioned this in a talk earlier this morning really where we’re looking to go is in creating a Genesis experience that we can distribute on wordpress.org so that would include
a theme that supports full sight editing as well.
[00:21:01.06]
So looking to extend the full site editing theme, or that functionality within a theme that we distribute on wordpress.org, or details to come, please follow along and let us know your feedback.
[00:21:13.06]
There is a project right now we have called Gen X.
[00:21:17.04]
There’s one, it’s part of the Genesis studio press repo.
[00:21:20.08]
And you can check out some of our full site editing experience experiments there
to follow along with what we’re doing, but so not explicitly be part of the pro service.
[00:21:31.08]
– Right, so the side questions actually come up quite a bit, but what is the difference
between Genesis and Genesis pro?
[00:21:42.05]
– That’s a great question. I mean, I did talk about it just a little bit. We’re trying to build on, one of the greatest legacies of WordPress and that’s this Genesis, this Genesis theme, this Genesis Framework.
[00:21:54.08]
It’s been around for 10 years. We just celebrated our 10th anniversary in February.
We’re trying to look ahead to the future we’ve been building with core for quite a while now.
[00:22:05.01]
I’m trying to stay as closely linked with the Gutenberg project as possible to make sure
that our themes, our framework, and our plugins, all, support the direction that core is moving in.
[00:22:17.01]
And in doing so, we’ve really tried to reimagine what Genesis is. It started as this theme, which became this theme framework through which the StudioPress child themes were built.
[00:22:29.02]
In recent years, atomic blocks became part of the Genesis family. And most recently,
the team from Block Lab has joined forces with us to kind of extend our custom block building capabilities.
[00:22:40.04]
So Genesis has really become a suite of products. And the way that it’s really taking shape
is there will be a number of products that are available, some of which are already available for free on wordpress.org atomic blocks for example, the replacement plugin for Block Lab will also remain there.
[00:23:02.05]
The premium functionality within that is what you get with Genesis Pro, as well as all of those
StudioPress themes. So the difference really is, we have to take a step back first, just to answer that question.
[00:23:15.07]
Genesis is not just a theme framework anymore.
[00:23:18.06]
It’s a whole suite of site building tools and within which we offer, some capabilities that are
either one time purchase from our StudioPress themes, that would be part of the free Genesis suite.
[00:23:31.00]
And then we’ve recently introduced Genesis Pro, which really gets you access to everything,
all of the premium themes, the Genesis page builder, and the Genesis custom blocks.
[00:23:41.03]
– Nice Thanks, Brian. Such a such a big universe and the Genesis-
[00:23:44.07]
– Yeah, it takes a little bit to explain just cause we’re, we’re really have this site building platform
that’s taking shape, as we bring all of these different plugins and themes and ideas together to make sure that we’re building for the future of WordPress with our core Jason strategy.
[00:24:04.06]
– This doesn’t even include all the third party products in the ecosystem like all that great premium Genesis themes, like design palette pro and just a whole smattering of other Genesis related products and themes made by others.
[00:24:17.09]
All right, we’re gonna switch it up a little bit here. This question comes from Brandon, I feel like this is a full site editing question. But it says how will Genesis and pro manage site wide slash global styles going forward versus on individual blocks? So what’s I guess the difference between sightline styles and styling on an individual block?
[00:24:41.07]
– I mean, it’s certainly a problem that we’ve experienced firsthand with, Genesis page builder and our robust library of sections and layouts. Really, having that base theme that can kind of unite all of your styles together.
[00:24:53.02]
So it is something that we have our eye on and recommend that you check out that Genesis acts repo as part of the StudioPress repo where we’ve got a full site editing theme, and plugin, which demos some of our ideas around that.
[00:25:10.01]
Right now we’re experimenting with a concept called style packs, where you can easily switch, it’s kind of a precursor to what Cores talked about with global styles, you can easily switch all of the colors and the fonts on your site.
[00:25:22.09]
So we’re closely following what core is doing.
[00:25:25.09]
And, kind of running our own experiments in the background in the Gen X repo to really kind of figure out how that shakes out for our Genesis themes and plugins, once full site editing arrives. So it’s something that’s currently being explored.
[00:25:42.04]
– Awesome, I know full site editing represents a huge change in WordPress core. So we know that you and the rest of the engineering or our dealer are investing heavily in making sure that Genesis continues that legacy of helping people win with WordPress, particularly in a core adjacent way and I know that isn’t easy, but thank you for all the effort you’re putting into that.
[00:26:03.08]
Our next question comes from nick.co. And this person asks, I believe this is around the
custom block capabilities, but is it possible to create repeater fields, like an ACF?
[00:26:18.00]
– Yes, and that is part of the Genesis custom blocks as part of Genesis Pro. Yep, there’s a repeater field in there.
[00:26:26.02]
– All right, good deal. And then this next question comes from Aaron. In the demo, essentially,
you created fields from the WPE dashboard or WPE admin. Is it possible to do it via functions.php? Create the fields.
[00:26:45.03]
– To create the fields, so currently, we’re using the functions that we built within Genesis custom blocks.
[00:26:54.08]
– So not directly I guess in functions that PHP I guess on your own, but maybe that’s something
to explore more, we do have the product group channel in the slack account for the summit wpe-events.slack.com so please make sure to ask those questions there and be able to do a little more research on any particular question and give you some feedback.
[00:27:16.01]
Our next question comes from Fred Swap, hope I pronounced that correctly. If you have purchased the Genesis Pro Plus package will Genesis-
[00:27:29.02]
Okay, I think this is a little bit different. I’m gonna reword the question cause I think it’s what the person meant to ask. If you purchase the Pro Plus package, will Genesis pro be available
or will it cost extra money?
[00:27:43.00]
– Right, yeah, so those are two separate offerings. So Pro Plus was the all themes package that we offered in the past. And what we’ve replaced that with is Genesis pro so it is a separate offering.
[00:27:57.09]
You would have to buy Genesis pro to get access to all the Genesis pro capabilities. But if you have purchased Pro Plus you’re not gonna lose any of the entitlements to the themes
that you purchased as part of Pro Plus.
[00:28:10.04]
– Awesome, thank you, Brian. Next question is gonna be one of my own. How should freelancers agencies, anybody, internal teams be thinking about when should I start experimenting with full site editing?
[00:28:25.04]
Like, obviously, Genesis is way ahead of the curve with these experiments. I mean, FSC isn’t even near complete yet, yet you’re already experimenting. That’s not necessarily the best fit
for every business or every agency. When should people start, like experimenting with FSC?
[00:28:42.00]
– Yeah, great question. So I can say like from our team’s perspective, we’ve been following along very closely, way ahead of what you see in the Gutenberg plugin, and it’s sometimes perhaps to a fault because so many things are happening in different places, within core, that you can’t end up spinning your wheels as a team trying to follow along.
[00:29:03.03]
But we actively try to participate in those conversations, and what’s happening in core.
[00:29:09.01]
My recommendation, though, for anyone listening is maybe to take a step back, it’s always worth observing what’s happening, to the degree that you’re interested in.
[00:29:21.05]
One thing that anyone can do is try out the Gutenberg plugin, and enable the full site editing experiments there. I think that’s that.
[00:29:29.07]
– Is that basically helps the core team get feedback as you test it. So even though it might
be too early to worry about it on a production site, giving that feedback and early testing is critical to these teams.
[00:29:40.04]
Bryan, we’re out of time. So many questions, please hit us up in slack, love to answer these questions further, and any others that you have.
[00:29:46.07]
Bryan, you did an excellent job. Thank you so much.
[00:29:49.01]
Thanks, everyone else for coming to this summit. We have a lot more content for the rest of the day. Really appreciate it. So thank you very much. Enjoy your next session.
[00:29:56.06]
– Thanks, everyone.
