News

One of the biggest benefits of WordPress is the extensibility it provides. As the Core team continues development of the Gutenberg block editor, we are proactively following along as well.

As part of the Gutenberg content series on the StudioPress blog, last week we showed how to add a color palette to a custom Genesis theme. In this second installment of the series, we are going to show you how you can provide custom font sizes to Gutenberg editor blocks.

Block Font Sizes

According to the Gutenberg Handbook, blocks may allow the user to configure the Font Sizes they use, e.g., the paragraph block.

Gutenberg provides a default set of font sizes, but a theme can overwrite it and provide its own. Here is a screenshot that shows the Gutenberg editor with default settings:

Below is the code that is used to add custom font sizes to the Gutenberg editor. This can be used to customize the Genesis Sample theme:

Once this code has been added, you will notice that the editor outputs the custom font sizes that have been specified. See the screenshot below:

One thing to note is that themes are responsible for styling sections of text where custom font sizes are being applied.

By default the paragraphs are given a class that is appended with has-, followed by the font size name and ending with -font-size.

For example, here’s the CSS that would be used to style text using the XL (larger) option applied:

Genesis and Block Options

We have exciting news! The newly expanded Genesis engineering team is currently working on the integration of Gutenberg block style functions directly into Genesis.

The idea is for Genesis to do the heavy lifting of code, while we supplying a config system in the child themes to handle the data. While the instructions in this post are a manual way of adding color pallets to Gutenberg blocks, weÔÇÖll be releasing features in Genesis that make this much easier.

This would allow us to ship themes with pre-configured options that are easy to customize and extend further, while allowing you to control block options in your own custom child themes!

Additional Resources

Below is a list of resources that will help you understand building and styling themes with better integration for the Gutenberg editor:

• Gutenberg Theme Support: Block Font Sizes ÔÇö WordPress.org
• The Complete Anatomy Of The Gutenberg WordPress Editor ÔÇö Smashing Magazine
• Deploying the new Gutenberg Block Editor on my Personal Blog ÔÇö Rich Tabor
• The Gutenberg WordPress Editor: 10 Things You Need to Know ÔÇö iThemes

Note: The Block Font Sizes feature has been added to the Beta branch of the Genesis Sample theme. We invite you to download this version for testing. Feel free to report any bugs you might find in the GitHub repository.

This blog was originally posted on Studiopress.com This post is in no way associated with Kembel.ca. For more posts by this author, please click here.

One of the biggest benefits of WordPress is the extensibility it provides. As the Core team continues development of the Gutenberg block editor, we are proactively following along as well.

As part of the Gutenberg content series on the StudioPress blog, last week we showed how to add a color palette to a custom Genesis theme. In this second installment of the series, we are going to show you how you can provide custom font sizes to Gutenberg editor blocks.

Block Font Sizes

According to the Gutenberg Handbook, blocks may allow the user to configure the Font Sizes they use, e.g., the paragraph block.

Gutenberg provides a default set of font sizes, but a theme can overwrite it and provide its own. Here is a screenshot that shows the Gutenberg editor with default settings:

Below is the code that is used to add custom font sizes to the Gutenberg editor. This can be used to customize the Genesis Sample theme:

Once this code has been added, you will notice that the editor outputs the custom font sizes that have been specified. See the screenshot below:

One thing to note is that themes are responsible for styling sections of text where custom font sizes are being applied.

By default the paragraphs are given a class that is appended with has-, followed by the font size name and ending with -font-size.

For example, here’s the CSS that would be used to style text using the XL (larger) option applied:

Genesis and Block Options

We have exciting news! The newly expanded Genesis engineering team is currently working on the integration of Gutenberg block style functions directly into Genesis.

The idea is for Genesis to do the heavy lifting of code, while we supplying a config system in the child themes to handle the data. While the instructions in this post are a manual way of adding color pallets to Gutenberg blocks, weÔÇÖll be releasing features in Genesis that make this much easier.

This would allow us to ship themes with pre-configured options that are easy to customize and extend further, while allowing you to control block options in your own custom child themes!

Additional Resources

Below is a list of resources that will help you understand building and styling themes with better integration for the Gutenberg editor:

• Gutenberg Theme Support: Block Font Sizes ÔÇö WordPress.org
• The Complete Anatomy Of The Gutenberg WordPress Editor ÔÇö Smashing Magazine
• Deploying the new Gutenberg Block Editor on my Personal Blog ÔÇö Rich Tabor
• The Gutenberg WordPress Editor: 10 Things You Need to Know ÔÇö iThemes

Note: The Block Font Sizes feature has been added to the Beta branch of the Genesis Sample theme. We invite you to download this version for testing. Feel free to report any bugs you might find in the GitHub repository.

This blog was originally posted on Studiopress.com This post is in no way associated with Kembel.ca. For more posts by this author, please click here.

Do you use the Genesis Framework? Would you like to have a say in what it will look like moving forward?

If so, weÔÇÖd like to invite you to take the Genesis Community Survey, a short set of questions that will help us shape the future of the Genesis Framework and StudioPress.

The survey, which is open until October 19, will help us gather important insights weÔÇÖll use to inform our strategy moving forward and share back with the wider Genesis communityÔÇövia email and blogÔÇöso you can benefit from the feedback as well.

If you have a friend or colleague who uses Genesis, please share the survey with them too!

WeÔÇÖre excited for all the things weÔÇÖll learn, how weÔÇÖll use those lessons to improve Genesis, and how together with you, weÔÇÖll discover new information that will make the Genesis community even better.

Some key areas of the survey include questions about …

• How you use Genesis compared with other theme frameworks,
• The ways youÔÇÖre preparing for Gutenberg, and
• Ways Genesis can help you design better themes and ultimately, better websites.

Once the survey has concluded, weÔÇÖll use the findings to better inform our processes for building themes and the kind of functionality weÔÇÖre adding to them. WeÔÇÖll also use the information to help the community prepare for the release of Gutenberg.

This is a great opportunity to make your voice heard and help us determine the best ways Genesis can serve the wider WordPress ecosystem.

The Genesis Community Survey closes on October 19,  so make sure to get your submission in now and help us shape the future!

Click here to share your thoughts

This blog was originally posted on Studiopress.com This post is in no way associated with Kembel.ca. For more posts by this author, please click here.

Do you use the Genesis Framework? Would you like to have a say in what it will look like moving forward?

If so, weÔÇÖd like to invite you to take the Genesis Community Survey, a short set of questions that will help us shape the future of the Genesis Framework and StudioPress.

The survey, which is open until October 19, will help us gather important insights weÔÇÖll use to inform our strategy moving forward and share back with the wider Genesis communityÔÇövia email and blogÔÇöso you can benefit from the feedback as well.

If you have a friend or colleague who uses Genesis, please share the survey with them too!

WeÔÇÖre excited for all the things weÔÇÖll learn, how weÔÇÖll use those lessons to improve Genesis, and how together with you, weÔÇÖll discover new information that will make the Genesis community even better.

Some key areas of the survey include questions about …

• How you use Genesis compared with other theme frameworks,
• The ways youÔÇÖre preparing for Gutenberg, and
• Ways Genesis can help you design better themes and ultimately, better websites.

Once the survey has concluded, weÔÇÖll use the findings to better inform our processes for building themes and the kind of functionality weÔÇÖre adding to them. WeÔÇÖll also use the information to help the community prepare for the release of Gutenberg.

This is a great opportunity to make your voice heard and help us determine the best ways Genesis can serve the wider WordPress ecosystem.

The Genesis Community Survey closes on October 19,  so make sure to get your submission in now and help us shape the future!

Click here to share your thoughts

This blog was originally posted on Studiopress.com This post is in no way associated with Kembel.ca. For more posts by this author, please click here.

As many of you know, WordPress is in the middle of developing a brand-new editor called Gutenberg, which will present an entirely new way of publishing content: using a block level approach. It is currently available as a plugin, and will be shipped in WordPress 5.0.

The Gutenberg editor will revolutionize the way we publish content with WordPress, and many folksÔÇömyself includedÔÇö are very excited about the expedited workflow and granular layout options the new editor has in store.

To give users a deeper level of control over the display of content, Gutenberg will offer a number of exciting features.

Theme Color Palettes

Among those features are Background Color and Text Color, which allow you to customize the way that text, paragraphs, and buttons appear on your website.

I can see plenty of other uses for these features, but for now, IÔÇÖll focus on the ones belowÔÇösince they will be the most widely used.

Before I show you how to add theme colors to the Gutenberg editor, hereÔÇÖs how the default controls appear in the dashboard:

The Gutenberg editor ships with 11 default colors, including pink, red, orange, yellow, green, blue, and gray. In addition, it will always include a color picker with the palette, for further customization.

This gives the user full control over what color is used for various elements, such as text, background, and buttons. But there is also a way to implement a unique color palette as well.

Custom Theme Color Palettes

One of the many benefits of WordPress is the extensibility it offers to designers and developers who build websites for clients.

The Gutenberg editor provides a method to create custom color palettes, which is especially helpful to end users and anyone who publishes content on a regular basis.

Below is the code that is used to add theme colors to the Gutenberg editor. This can be used to customize the Genesis Sample theme:

Note: The first 3 hexcodes #f5f5f5, #999, #333 are base colors found within the theme. You will also see that labeling each color is possible as well.

A screenshot that shows custom colors in the palette:

The color picker that is standard in the Gutenberg editor can be helpful. But letÔÇÖs face itÔÇöthere are plenty of instances when delivering that capability might be considered a suboptimal situation.

A designer or developer might prefer to remove that option from client use. HereÔÇÖs the code that will remove the color picker:

A screenshot that shows the custom palette, sans color picker:

You might be wondering what some of the use cases would be for adding custom theme colors to your website. Hint: There are many.

Use Cases for Custom Theme Colors

The firstÔÇöand most obviousÔÇöuse for custom theme colors is to change the color of text. Perhaps you wish to create a separate look for text, which is what I do at the beginning of my blog posts.

An example of this would be using custom theme colors in the Gutenberg editor to style an intro paragraph, paired with italics, and centered text.

Beyond that, you might want to provide a content box within your entry, which points out something specific to your reader.

Or quite possibly, you may want to display a call-to-action button, putting emphasis on the action you want your visitor to take.

Genesis and Block Options

We have exciting news! The newly expanded Genesis engineering team is currently working on the integration of Gutenberg functions directly into Genesis.

The idea is for Genesis to do the heavy lifting of code, while we supplying a config system in the child themes to handle the data. While the instructions in this post are a manual way of adding color pallets to Gutenberg blocks, weÔÇÖll be releasing features in Genesis that make this much easier.

This would allow us to ship themes with pre-configured options that are easy to customize and extend further, while allowing you to control block options in your own custom child themes!

Additional Resources

Below is a list of resources that will help you understand building and styling themes with better integration for the Gutenberg editor:

• Styling Themes for Gutenberg ÔÇö ThemeShaper
• Gutenberg Theme Support ÔÇö WordPress.org
• Gutenberg, or the Ship of Theseus ÔÇö Matias Ventura
• Getting your theme ready for Gutenberg ÔÇö Bill Erickson
• How to add WordPress Theme Styles to Gutenberg ÔÇö Rich Tabor

Note: The Theme Color Palette feature has been added to the Beta branch of the Genesis Sample theme. We invite you to download this version for testing. Feel free to report any bugs you might find in the GitHub repository.

This blog was originally posted on Studiopress.com This post is in no way associated with Kembel.ca. For more posts by this author, please click here.

As many of you know, WordPress is in the middle of developing a brand-new editor called Gutenberg, which will present an entirely new way of publishing content: using a block level approach. It is currently available as a plugin, and will be shipped in WordPress 5.0.

The Gutenberg editor will revolutionize the way we publish content with WordPress, and many folksÔÇömyself includedÔÇö are very excited about the expedited workflow and granular layout options the new editor has in store.

To give users a deeper level of control over the display of content, Gutenberg will offer a number of exciting features.

Theme Color Palettes

Among those features are Background Color and Text Color, which allow you to customize the way that text, paragraphs, and buttons appear on your website.

I can see plenty of other uses for these features, but for now, IÔÇÖll focus on the ones belowÔÇösince they will be the most widely used.

Before I show you how to add theme colors to the Gutenberg editor, hereÔÇÖs how the default controls appear in the dashboard:

The Gutenberg editor ships with 11 default colors, including pink, red, orange, yellow, green, blue, and gray. In addition, it will always include a color picker with the palette, for further customization.

This gives the user full control over what color is used for various elements, such as text, background, and buttons. But there is also a way to implement a unique color palette as well.

Custom Theme Color Palettes

One of the many benefits of WordPress is the extensibility it offers to designers and developers who build websites for clients.

The Gutenberg editor provides a method to create custom color palettes, which is especially helpful to end users and anyone who publishes content on a regular basis.

Below is the code that is used to add theme colors to the Gutenberg editor. This can be used to customize the Genesis Sample theme:

Note: The first 3 hexcodes #f5f5f5, #999, #333 are base colors found within the theme. You will also see that labeling each color is possible as well.

A screenshot that shows custom colors in the palette:

The color picker that is standard in the Gutenberg editor can be helpful. But letÔÇÖs face itÔÇöthere are plenty of instances when delivering that capability might be considered a suboptimal situation.

A designer or developer might prefer to remove that option from client use. HereÔÇÖs the code that will remove the color picker:

A screenshot that shows the custom palette, sans color picker:

You might be wondering what some of the use cases would be for adding custom theme colors to your website. Hint: There are many.

Use Cases for Custom Theme Colors

The firstÔÇöand most obviousÔÇöuse for custom theme colors is to change the color of text. Perhaps you wish to create a separate look for text, which is what I do at the beginning of my blog posts.

An example of this would be using custom theme colors in the Gutenberg editor to style an intro paragraph, paired with italics, and centered text.

Beyond that, you might want to provide a content box within your entry, which points out something specific to your reader.

Or quite possibly, you may want to display a call-to-action button, putting emphasis on the action you want your visitor to take.

Genesis and Block Options

We have exciting news! The newly expanded Genesis engineering team is currently working on the integration of Gutenberg functions directly into Genesis.

The idea is for Genesis to do the heavy lifting of code, while we supplying a config system in the child themes to handle the data. While the instructions in this post are a manual way of adding color pallets to Gutenberg blocks, weÔÇÖll be releasing features in Genesis that make this much easier.

This would allow us to ship themes with pre-configured options that are easy to customize and extend further, while allowing you to control block options in your own custom child themes!

Additional Resources

Below is a list of resources that will help you understand building and styling themes with better integration for the Gutenberg editor:

• Styling Themes for Gutenberg ÔÇö ThemeShaper
• Gutenberg Theme Support ÔÇö WordPress.org
• Gutenberg, or the Ship of Theseus ÔÇö Matias Ventura
• Getting your theme ready for Gutenberg ÔÇö Bill Erickson
• How to add WordPress Theme Styles to Gutenberg ÔÇö Rich Tabor

Note: The Theme Color Palette feature has been added to the Beta branch of the Genesis Sample theme. We invite you to download this version for testing. Feel free to report any bugs you might find in the GitHub repository.

This blog was originally posted on Studiopress.com This post is in no way associated with Kembel.ca. For more posts by this author, please click here.

It is time for your agency website to get a fresh, mobile-responsive, SEO-friendly, fast, and secure new look!

Breakthrough Pro combines a palette of beautiful colors and minimal design in a sleek, modern layout for an advertising or marketing agency to demonstrate your work, services, creativity, and moreÔÇöperfect for your next breakthrough moment.

As with all of our professional child themes, Breakthrough is compatible with Gutenberg and we will be releasing updates to this theme with additional Gutenberg capabilities when Gutenberg is rolled into WordPress core!

Some key features include:

• Easy to customize
• HTML5 Markup
• Responsive, mobile-friendly design
• Widgetized homepage for a flexible, engaging layout
• Selectable colors to match your branding
• Upload your own logo or simply type in your website name to match the default branding
• WooCommerce ready
• Integrate with email subscriptions
• Portfolio designed to showcase your work
• Styled buttons, subscription widget, and forms
• Landing page, full-width template
• Customizable pricing table
• Designed to grow your business
• Gutenberg ready!

View the demo and refresh your site with Breakthrough Pro today.

The Breakthrough Pro theme and all StudioPress themes are included in all WP Engine Start-Up, Growth, Scale, Premium and Enterprise plans, and WP Engine Agency Partners also have it available for download in their free WP Engine agency plans.

Breakthrough Theme Details & Pricing

This blog was originally posted on Studiopress.com This post is in no way associated with Kembel.ca. For more posts by this author, please click here.

It is time for your agency website to get a fresh, mobile-responsive, SEO-friendly, fast, and secure new look!

Breakthrough Pro combines a palette of beautiful colors and minimal design in a sleek, modern layout for an advertising or marketing agency to demonstrate your work, services, creativity, and moreÔÇöperfect for your next breakthrough moment.

As with all of our professional child themes, Breakthrough is compatible with Gutenberg and we will be releasing updates to this theme with additional Gutenberg capabilities when Gutenberg is rolled into WordPress core!

Some key features include:

• Easy to customize
• HTML5 Markup
• Responsive, mobile-friendly design
• Widgetized homepage for a flexible, engaging layout
• Selectable colors to match your branding
• Upload your own logo or simply type in your website name to match the default branding
• WooCommerce ready
• Integrate with email subscriptions
• Portfolio designed to showcase your work
• Styled buttons, subscription widget, and forms
• Landing page, full-width template
• Customizable pricing table
• Designed to grow your business
• Gutenberg ready!

View the demo and refresh your site with Breakthrough Pro today.

The Breakthrough Pro theme and all StudioPress themes are included in all WP Engine Start-Up, Growth, Scale, Premium and Enterprise plans, and WP Engine Agency Partners also have it available for download in their free WP Engine agency plans.

Breakthrough Theme Details & Pricing

This blog was originally posted on Studiopress.com This post is in no way associated with Kembel.ca. For more posts by this author, please click here.

Gutenberg is the future of WordPress. It brings the promise of new functionality, enabling developers and designers to create reusable modules (ÔÇ£blocksÔÇØ) for design and content, while empowering end-users to combine and customize those modules to do everything from launching twenty simple landing pages in an hour to building a complex new digital experience.

There are also valid concerns with the project, on subjects such as launch timeline and backwards-compatibility. A healthy path forward means addressing concerns while embracing the new benefits.

There are some key questions we want to help you answer such as…

• How will Genesis support the transition to Gutenberg?
• How will this result in new, wonderful features for the designers, developers, and end users of Gutenberg-enabled WordPress sites?
• How will Genesis make it easier and more efficient to create new Gutenberg-powered themes?
• How will Genesis help you lead with Gutenberg?

We’re going to be posting heavily in the coming months on studiopress.blog to help address these questions and to share the work the newly expanded Genesis engineering team is doing to help you lead with Gutenberg.

The Gutenberg launch date currently looks like it will occur in early 2019 (although that could change), and from now until then, weÔÇÖll be sharing and releasing updates to Genesis and the StudioPress themes in addition to more content with our thoughts around Gutenberg strategy. Here is a summary of some of our thoughts to get the conversation going.

The role of blocks and themes

Content blocks and WordPress themes have been architected as two separate worlds. The idea is that themes should provide a style for blocks, as opposed to providing the blocks themselves, and blocks should continue to work if you switch themes. This is similar to how WordPress is architected with the components that blocks are replacing, for example, widgets and shortcodes.

Of course, we all know that’s not how things actually work with widgets and shortcodes! Switching themes often breaks sites and portability between themes is rare (although Genesis helps with that greatly — portability between two Genesis child themes often works, thanks to sharing a common underlying framework). This is because for modern websites, ÔÇ£just slap a different CSS on itÔÇØ is too simple to capture all of the behavior that happens when you switch themes.

Because of this, we’re exploring the role of blocks within theme creation. What does it mean when you have reusable pre-configured blocks that load with your theme? What does it mean to create custom child themes with custom blocks? Is it true that we should think about these things separately, and what role should / can Genesis play in making it easier to indeed switch between themes and still have blocks look and act properly? Surely some blocks are best-suited for plugins rather than themes, so what are the conditions where thatÔÇÖs true, and what sort of technology or standards do we need to make those plugged-in blocks play nicely with a large number of themes?

We have what we feel are interesting and clever ideas on these fronts that the Genesis engineering team is actively working on; stay tuned for more.

New CSS for blocks in your child themes

Gutenberg blocks include default styles which may not match your child theme. To enable blocks on your site, you will first need to create styles for the blocks used within Gutenberg. StudioPress will provide new block styles for its most popular themes, including the sample Genesis child theme and all newly-created themes, and we’ll be publishing articles explaining how you can do the same for your custom Genesis child themes.

Genesis and block style guides

As part of the core Genesis framework, we are creating ways to make styling blocks more efficient, performant, and portable across child themes. We’re also looking at how to leverage the block options functionality in Gutenberg (suggesting theme colors, fonts, etc. in the block admin UI) to help content creators stay within their self-imposed style-guides.

This creates a huge benefit — one that we use today at WP Engine with our own web properties, and that we plan to help bring to the world with Genesis and Gutenberg.

The idea is: Designers and developers want to create beautiful, well-structured, performant, device- and language-compatible components, and then empower their clients (the end-users, the marketers) to reuse and customize those components to build all sorts of sites.

The problem is: How do you provide marketers the ability to customize, but not the ability to break the design or functionality?

Today, the answer is often to lock down customization to the point where itÔÇÖs essentially not customizable at all. But this creates a constant stream of trivial requests to tweak a color or trivially rearrange the elements on a page, and this isnÔÇÖt a good use of anyoneÔÇÖs time.

Another answer is to allow maximum customization, but this can easily break the design. For example, you can supply a color-picker for a marketer to change the title color on a widget. But then that marketer can select colors which are off-brand, and now the design is broken.

The best answer is that the designers and developers who create the components should also be able to set the parameters of how they can be customized. In our example, the marketer should be able to select a color, but only from a pre-approved palette.

Our goal is to provide a system inside Genesis where this can be done in a standardized way, so that anyone can make customizable components, with the right balance of empowering the end-user and not allowing them to create sites that lack proper design or functionality.

Finally, weÔÇÖre also exploring how Genesis can help you with Editor Styles for Gutenberg to deliver an even better and more visually accurate admin page building experience. The users of the sites you build should be able to easily create pages within the parameters of your style and brand. But even further, the interface they use to do that should look like the page theyÔÇÖre building!

With the investment in people and resources WP Engine is making in the Genesis team, weÔÇÖre excited about the capabilities the team is adding to Genesis to help you win with Gutenberg.

Gutenberg and backwards-compatibility

Our team is working on our official roll-out strategy recommendation for Gutenberg in general.

WeÔÇÖll also be publishing content around backwards-compatibility, but there are some key areas you should be aware of today.

You have a choice

While the Gutenberg editor is the future of WordPress and something we want to help you embrace, you donÔÇÖt have to use the Gutenberg editor on day one.

You can choose to use the “Classic Editor” plugin which reverts pages to the old editor (selected page by page) and the “Gutenberg Ramp” plugin which lets you choose which types of pages to apply Gutenberg to (e.g. posts, ecommerce posts, pages, etc.). Both of these options will allow you to continue using the Classic Editor / TinyMCE for your posts and pages. Rest easy. You can take your time rolling out Gutenberg.

Your custom post types and custom meta fields will still work

Many plugins and custom-built sites rely heavily on custom post types and custom meta fields. From everything weÔÇÖve seen on Gutenberg, CPTs and custom fields will still continue to work once Gutenberg rolls out and well into the future.

WeÔÇÖre testing and updating Genesis and the StudioPress themes with Gutenberg

Engineers and designers from StudioPress and WP Engine are testing and reviewing the code of each plugin. We’ll be publishing our findings along the way and building out a final roll-out plan which we’ll be sharing with WP Engine and StudioPress customers.

Great news: Genesis itself has very few if any substantial backwards-compatibility issues with Gutenberg. The main focus of updates to the StudioPress themes are on adding styles for the new Gutenberg blocks. WeÔÇÖll also be publishing content with tips on how you can do the same to the custom child themes you have created.

All in all, Genesis and the StudioPress themes are performing very well with backwards-compatibility testing; however, itÔÇÖs the new features that we will be adding to Genesis and the StudioPress that have us most excited.

We are looking forward to the opportunity to lead with you in these areas and work together to help usher WordPress into the next era of site creation. We are also humbled by the contributions of the hundreds of thousands of people in the Genesis community and are honored to take this journey with you.

This blog was originally posted on Studiopress.com This post is in no way associated with Kembel.ca. For more posts by this author, please click here.

Gutenberg is the future of WordPress. It brings the promise of new functionality, enabling developers and designers to create reusable modules (ÔÇ£blocksÔÇØ) for design and content, while empowering end-users to combine and customize those modules to do everything from launching twenty simple landing pages in an hour to building a complex new digital experience.

There are also valid concerns with the project, on subjects such as launch timeline and backwards-compatibility. A healthy path forward means addressing concerns while embracing the new benefits.

There are some key questions we want to help you answer such as…

• How will Genesis support the transition to Gutenberg?
• How will this result in new, wonderful features for the designers, developers, and end users of Gutenberg-enabled WordPress sites?
• How will Genesis make it easier and more efficient to create new Gutenberg-powered themes?
• How will Genesis help you lead with Gutenberg?

We’re going to be posting heavily in the coming months on studiopress.blog to help address these questions and to share the work the newly expanded Genesis engineering team is doing to help you lead with Gutenberg.

The Gutenberg launch date currently looks like it will occur in early 2019 (although that could change), and from now until then, weÔÇÖll be sharing and releasing updates to Genesis and the StudioPress themes in addition to more content with our thoughts around Gutenberg strategy. Here is a summary of some of our thoughts to get the conversation going.

The role of blocks and themes

Content blocks and WordPress themes have been architected as two separate worlds. The idea is that themes should provide a style for blocks, as opposed to providing the blocks themselves, and blocks should continue to work if you switch themes. This is similar to how WordPress is architected with the components that blocks are replacing, for example, widgets and shortcodes.

Of course, we all know that’s not how things actually work with widgets and shortcodes! Switching themes often breaks sites and portability between themes is rare (although Genesis helps with that greatly — portability between two Genesis child themes often works, thanks to sharing a common underlying framework). This is because for modern websites, ÔÇ£just slap a different CSS on itÔÇØ is too simple to capture all of the behavior that happens when you switch themes.

Because of this, we’re exploring the role of blocks within theme creation. What does it mean when you have reusable pre-configured blocks that load with your theme? What does it mean to create custom child themes with custom blocks? Is it true that we should think about these things separately, and what role should / can Genesis play in making it easier to indeed switch between themes and still have blocks look and act properly? Surely some blocks are best-suited for plugins rather than themes, so what are the conditions where thatÔÇÖs true, and what sort of technology or standards do we need to make those plugged-in blocks play nicely with a large number of themes?

We have what we feel are interesting and clever ideas on these fronts that the Genesis engineering team is actively working on; stay tuned for more.

New CSS for blocks in your child themes

Gutenberg blocks include default styles which may not match your child theme. To enable blocks on your site, you will first need to create styles for the blocks used within Gutenberg. StudioPress will provide new block styles for its most popular themes, including the sample Genesis child theme and all newly-created themes, and we’ll be publishing articles explaining how you can do the same for your custom Genesis child themes.

Genesis and block style guides

As part of the core Genesis framework, we are creating ways to make styling blocks more efficient, performant, and portable across child themes. We’re also looking at how to leverage the block options functionality in Gutenberg (suggesting theme colors, fonts, etc. in the block admin UI) to help content creators stay within their self-imposed style-guides.

This creates a huge benefit — one that we use today at WP Engine with our own web properties, and that we plan to help bring to the world with Genesis and Gutenberg.

The idea is: Designers and developers want to create beautiful, well-structured, performant, device- and language-compatible components, and then empower their clients (the end-users, the marketers) to reuse and customize those components to build all sorts of sites.

The problem is: How do you provide marketers the ability to customize, but not the ability to break the design or functionality?

Today, the answer is often to lock down customization to the point where itÔÇÖs essentially not customizable at all. But this creates a constant stream of trivial requests to tweak a color or trivially rearrange the elements on a page, and this isnÔÇÖt a good use of anyoneÔÇÖs time.

Another answer is to allow maximum customization, but this can easily break the design. For example, you can supply a color-picker for a marketer to change the title color on a widget. But then that marketer can select colors which are off-brand, and now the design is broken.

The best answer is that the designers and developers who create the components should also be able to set the parameters of how they can be customized. In our example, the marketer should be able to select a color, but only from a pre-approved palette.

Our goal is to provide a system inside Genesis where this can be done in a standardized way, so that anyone can make customizable components, with the right balance of empowering the end-user and not allowing them to create sites that lack proper design or functionality.

Finally, weÔÇÖre also exploring how Genesis can help you with Editor Styles for Gutenberg to deliver an even better and more visually accurate admin page building experience. The users of the sites you build should be able to easily create pages within the parameters of your style and brand. But even further, the interface they use to do that should look like the page theyÔÇÖre building!

With the investment in people and resources WP Engine is making in the Genesis team, weÔÇÖre excited about the capabilities the team is adding to Genesis to help you win with Gutenberg.

Gutenberg and backwards-compatibility

Our team is working on our official roll-out strategy recommendation for Gutenberg in general.

WeÔÇÖll also be publishing content around backwards-compatibility, but there are some key areas you should be aware of today.

You have a choice

While the Gutenberg editor is the future of WordPress and something we want to help you embrace, you donÔÇÖt have to use the Gutenberg editor on day one.

You can choose to use the “Classic Editor” plugin which reverts pages to the old editor (selected page by page) and the “Gutenberg Ramp” plugin which lets you choose which types of pages to apply Gutenberg to (e.g. posts, ecommerce posts, pages, etc.). Both of these options will allow you to continue using the Classic Editor / TinyMCE for your posts and pages. Rest easy. You can take your time rolling out Gutenberg.

Your custom post types and custom meta fields will still work

Many plugins and custom-built sites rely heavily on custom post types and custom meta fields. From everything weÔÇÖve seen on Gutenberg, CPTs and custom fields will still continue to work once Gutenberg rolls out and well into the future.

WeÔÇÖre testing and updating Genesis and the StudioPress themes with Gutenberg

Engineers and designers from StudioPress and WP Engine are testing and reviewing the code of each plugin. We’ll be publishing our findings along the way and building out a final roll-out plan which we’ll be sharing with WP Engine and StudioPress customers.

Great news: Genesis itself has very few if any substantial backwards-compatibility issues with Gutenberg. The main focus of updates to the StudioPress themes are on adding styles for the new Gutenberg blocks. WeÔÇÖll also be publishing content with tips on how you can do the same to the custom child themes you have created.

All in all, Genesis and the StudioPress themes are performing very well with backwards-compatibility testing; however, itÔÇÖs the new features that we will be adding to Genesis and the StudioPress that have us most excited.

We are looking forward to the opportunity to lead with you in these areas and work together to help usher WordPress into the next era of site creation. We are also humbled by the contributions of the hundreds of thousands of people in the Genesis community and are honored to take this journey with you.

This blog was originally posted on Studiopress.com This post is in no way associated with Kembel.ca. For more posts by this author, please click here.