Sign inGet GeneratePress One

GeneratePress 2.2

GeneratePress 2.2 is a very big feature release. Not only does it boast full compatibility with Gutenberg, but it includes lots of new free features built to save you time! Gutenberg Gutenberg is the current project name for the future block editor in WordPress 5.0, which is being released in the second half of November.

October 30, 2018

GeneratePress 2.2 is a very big feature release. Not only does it boast full compatibility with Gutenberg, but it includes lots of new free features built to save you time!

Gutenberg

Gutenberg is the current project name for the future block editor in WordPress 5.0, which is being released in the second half of November.

I’m personally really excited about Gutenberg! It will allow for more complex layouts to be built without the need for plugins, shortcodes or page builders.

In fact, we used Gutenberg in its infancy to re-design our current site.

If you’d like to learn more about Gutenberg, check out this site.

So, what has GeneratePress done when it comes to Gutenberg?

Disable Content Title

The option to disable the content title has been a part of GeneratePress for a long time, but we wanted to make it easier on you while using the block editor.

So, we added a toggle when you hover over your content title in the editor which you can click to disable the title.

Frontend Styling

The block editor will inherit all of the styles from your content area. This means things like your font families (including Google Fonts), font sizes, background colors, and text colors will be visible as you build your page.

This gives you a realistic view of what your page will look like when you’re done.

Realistic Content Width

Having an idea of how your content will look is important, so we’ve added logic to the editor that will set the width to what it will be on the live page. This width takes your sidebar layout into account, as well as your container width and your Page Builder Container settings.

Layout Elements

We’ve applied our own columns CSS to the columns block, which improves browser support and mobile responsiveness over what WordPress has done by default.

We’ve also added your paragraph margin setting to the bottom of each block on the frontend of your site. This keeps spacing consistent throughout your content.

Performance

Gutenberg adds a stylesheet to your site by default with all block styles. This makes us pretty sad, as we work hard to keep your site as light as possible.

We experimented with removing their styles by default and adding our own, but decided it would be a compatibility nightmare in the future.

However, they’re planning on only loading CSS used by blocks on your page, which will be a huge improvement that we’re looking forward to.

So, that’s enough of Gutenberg for the moment. What else is new?

Navigation Drop Point

One of the issues we see a lot is when the navigation is aligned right (or left), and the browser isn’t wide enough to fit the logo and navigation on one line.

To combat this, we’ve added a new option which allows you to specify a width at which point the navigation will drop down onto its own line and center.

Logo Width

You can now set the logo width directly inside the Customizer. This is great for creating retina logos, or even using SVG images as your logo.

Sub-Menu Direction

You can now change the direction of the sub-menu when you’re using a regular hover dropdown type.

Header Presets

We’ve added a Customizer control to serve as a shortcut for specific header layouts.

Navigation Color Presets

Like the Header Presets, we’ve added a Navigation Color Presets option to the Customizer. This option is helpful for free users so they’re not stuck with one color. It can also be a shortcut for premium users.

So Much More

This is a really big update. We’ve restructured our CSS completely, allowing us to actually reduce the filesize of style.min.css by 1kb, even with the Gutenberg additions.

We’ve also rewritten various PHP functions throughout the theme to be cleaner and more organized. 

All of the individual functions we used to use to add HTML classes to elements have been deprecated and replaced by a single function: generate_do_element_classes( $context )

All microdata is now added via the new generate_do_microdata( $context ) function. This gives us better control over the added microdata (filterable), and allows us to turn it off completely using the generate_schema_type filter.

If you’re using custom template files, you’ll want to make the above change when possible.

Full Changelog

2.2

  • New: Sub-menu direction option
  • New: Floated navigation drop point option
  • New: Logo width option
  • New: Content title color option
  • New: Blog post title color option
  • New: H1-H3 typography options
  • New: generate_comment_form_title filter
  • New: Header Presets control inside the Customizer
  • New: Navigation Color Presets control inside the Customizer
  • New: generate_entry_meta_post_types filter
  • New: generate_footer_meta_posts_types filter
  • New: Add paragraph bottom margin to Gutenberg blocks
  • New: Add .alignwide and .alignfull class for Gutenberg blocks
  • New: Styling for Gutenberg gallery block
  • New: Add frontend styling to Gutenberg editor
  • New: Add defaults for H1-H3 bottom margin options
  • New: generate_show_default_sidebar_widgets filter
  • New: generate_schema_type filter
  • New: generate_{context}_microdata filters
  • Tweak: Output theme microdata using generate_do_microdata()
  • Tweak: Replace individual element class functions with generate_do_element_classes()
  • Tweak: Major PHP code cleanup
  • Tweak: Replace generate_get_setting() with generate_get_option()
  • Tweak: Remove default text-align: left from site header
  • Tweak: Only add navigation alignment class to body if necessary
  • Tweak: Major style.css cleanup
  • Tweak: Remove different sub-menu width if in sidebar
  • Tweak: Set navigation search height (fixes full height nav search on mobile/in sidebars)
  • Tweak: Change Delete Customizer Settings button text to Reset
  • Tweak: Add quick Customize links to GP Dashboard
  • Tweak: Give H4-H6 elements the paragraph bottom margin
  • Tweak: Don’t close mobile menu when item is tapped
  • Tweak: Simplify a11y outline script
  • Tweak: Keep mobile sub-menus open if mobile toggle is closed
  • Tweak: Replace default sidebar widget content in template files with generate_do_default_sidebar_widgets()
  • Tweak: Clean up extra spaces in footer class attribute
  • Fix: screen-reader-text class conflicts with some plugins
  • Deprecated: generate_get_setting()
  • Deprecated: generate_right_sidebar_class()
  • Deprecated: generate_get_right_sidebar_class()
  • Deprecated: generate_left_sidebar_class()
  • Deprecated: generate_get_left_sidebar_class()
  • Deprecated: generate_content_class()
  • Deprecated: generate_get_content_class()
  • Deprecated: generate_header_class()
  • Deprecated: generate_get_header_class()
  • Deprecated: generate_inside_header_class()
  • Deprecated: generate_get_inside_header_class()
  • Deprecated: generate_container_class()
  • Deprecated: generate_get_container_class()
  • Deprecated: generate_navigation_class()
  • Deprecated: generate_get_navigation_class()
  • Deprecated: generate_inside_navigation_class()
  • Deprecated: generate_menu_class()
  • Deprecated: generate_get_menu_class()
  • Deprecated: generate_main_class()
  • Deprecated: generate_get_main_class()
  • Deprecated: generate_footer_class()
  • Deprecated: generate_get_footer_class()
  • Deprecated: generate_inside_footer_class()
  • Deprecated: generate_top_bar_class()
  • Deprecated: generate_body_schema()
  • Deprecated: generate_article_schema()

29 responses

  1. Simon

    This sounds incredible…I am so excited by this!!

    If I disable Gutenberg will that mean that the style sheet it sets is definitely not being added? I plan on using the Classic Editor plugins for myself and my clients until at least end of March 2019.

    1. Tom

      Yes, if Gutenberg is disabled, their styles shouldn’t load. Hopefully they implement the ability to only load block CSS if they’re in use on the page soon.

  2. Robin Roelofsen

    Installed 2.2 beta 1, and the integration of the styles into the editor is amazing!

    One thing, which I think might be more of a Gutenberg thing to change, is when you go to the Code Editor using the menu dots in the right top corner, the editor is – here – 387px wide, making is a very narrow column to edit in.

    Is this something that can be made wider following the front-end content width rules, so editing HTML is a tad easier?

    1. Tom

      Interesting! I’ll look into this and will get back to you 🙂

      Thanks for the feedback!

  3. Ovidiu

    Hi Tom,

    Those are some really extensive features, I’m really looking forward to version 2.2. In my opinion one of the biggest changes is the switch to JSON-LD. I am currently using GP Premium and have a custom template for product reviews that uses microdata information stored in custom fields (product rating, product name and so on). I’m very confused at this moment how I could still use this setup with JSON-LD. Again, the information changes on a per review basis and is retrieved from custom fields.

    Any ideas on how to best handle this would be greatly appreciated.

    Thank you!

    1. Tom

      I’m really happy with the JSON-LD feature. It’s super easy to extend it as well. I started an article here which might be helpful: https://docs.generatepress.com/article/json-ld/

      1. Ovidiu

        Thank you for your reply, Tom. I think I can make it work, the Advanced Example in the documentation is really useful. So I could basically use the code from my custom review template directly in functions.php to retrieve and output the information using JSON-LD. I use the Toolset plugin for custom fields if it has any relevance.

        Thanks again for your help.

        1. Tom

          Exactly! No problem. Feel free to open a support topic if you need help with it 🙂

  4. Ryan Smith

    I was about to ask the same thing I see above, the code editor is very narrow, if you could add some css to the theme to make this 100% width this it would be great, it seems like all the editor styles have to be controlled by the theme, thanks!

    1. Tom

      Are we talking about the HTML block, or any block when in code editing?

      The code editor for any block doesn’t appear to give us a class to alter the width with.

      However, we could force the HTML block to have a minimum width.

  5. Ryan Smith

    I’m not seeing the option for the navigation drop point show up in my customizer. Is this feature implemented yet?

    1. Tom

      Only in 2.2 when the navigation is set to float right or left.

  6. Anonymous

    What’s the user case for the Header Presets control inside the Customizer feature? Is it to set a default header? Thanks!

    1. Tom

      That control is just a shortcut to a few layouts you can achieve by changing a few different Customizer options. It basically changes multiple options for you automatically.

  7. Samuel

    I would still find it interesting why JSON-LD is not used after all. https://github.com/tomusborne/generatepress/commit/3751a0ffdd0b2e2d566527e4e30bdd63b8415125#comments 🙂

    1. Tom

      We wanted to make sure we get it 100% right, so we’ve pushed it back to 2.3. I’ve been in contact with a schema expert who we’ll be working with to make sure we do it 100% correctly. Measure twice, cut once.

      We introduced a new filter which makes it so you can turn off the microdata in the HTML and use your own JSON-LD solution for now.

  8. Drew McManus

    I am crazy happy to see the Navigation Drop Point, Logo Width, and Sub Menu Direction settings. Those will all save so much time on the custom CSS work we put into nearly every site.

    Question: if we plan on running WP with Gutenberg disabled following the gutenberg update, will that cause any issues to consider inside GP?

    1. Tom

      Definitely not! GP will continue to work just fine without Gutenberg, and we’ve only added a handful of lines of CSS for Gutenberg compatibility, so there’s minimal excess bloat.

      1. drew

        Fantastic 🙂

  9. PingSunday

    wonderful Tom. Thank you for your great jobs.

    – I don’t like Gutenberg. so I disabled it. And you have done the great way to reduce the codes.

    – I run Lighthouse to check the speed on my site, and there is one small problem. That’s the “generatepress.woff2”. I know that this is a very small file for the menu. But can we have any way to “not to load” this font?

    Thank you very much.

    1. Tom

      That font handles all of the default theme icons like the mobile menu toggle etc.. I wouldn’t suggest removing it. It’s a tiny file, anyways 🙂

  10. Rob

    Thanks for the update. The navigation drop point is very handy. I had literally just added the css for this after noticing how it was working on the GP site. I can now remove that 🙂

    A small request would be to add the ability to change the navigation height for the drop point in the customizer.

    I currently use this which works fine, but could be an idea to add this functionality in the customizer. Thanks.

    @media(max-width:1000px) and (min-width:769px){
    .main-navigation .main-nav ul li a{
    line-height:35px;
    }
    }

    1. Tom

      Glad you like it! Appreciate the suggestion – we’ll take a look 🙂

  11. twer

    Love the Realistic Content Width

  12. kosmo

    is the newest version friendly with Mobile First Indexing? thanks

    1. Tom

      Absolutely 🙂

  13. Meredith Karter

    Thanks for the update. The navigation drop point is very handy. I had literally just added the css for this after noticing how it was working on the GP site. I can now remove that 🙂

    1. Tom

      Awesome! Glad you like it 🙂

  14. Michael

    A lot of other themes have problem with setting logo width on different resolutions. Generatepress is great alternative for creating own themes. Has more features than native wordpress theme and really small css and js file sizes..

Leave a comment

Your email won’t be published. Fields marked * are required.