31 Comments

  1. Timothy Jacobs

    The custom padding controls coming to WordPress 5.7 are a good start, but Gutenberg desperately needs margin controls to go alongside it.

    I really love posts like these, I hope to see more of them!

    Report

  2. Carolina

    Great post! I wish theme authors would start exploring this so that they could see the benefits and how it will allow them to create themes faster and with predictable markup.

    The number of themes with block styles and pattern are still low.

    Report

  3. Sally G

    Overall, it looks good—a bit longer than the original, but more even heights.
    What bugs me is having to use separate blocks for header and paragraph—why not simple text styles in a single block?

    I agree with the comment about custom padding and margin controls. I would probably use a plug-in calendar, so not sure how that would work with the calendar block, but yes, the white calendar on the black background is jarring.

    Report

    • Justin Tadlock

      Structurally, the header and paragraph are two different things. I could see some use cases for what you’re saying too. The block editor needs a line break (<br /> ) inserter.

      I’m sure the biggest calendar-related use case for a musician site would be an events plugin. There are probably some good options out there for better handling the style. The core Calendar block is so limited.

      Report

      • Andrew

        “The block editor needs a line break ( ) inserter.”

        Shift + Enter is your friend here.

        Report

      • Sally G

        YES! Please, a paragraph break inside the block! Given that it is all text, all the same story, it seems odd for me as a user to break it up.

        I use Events Manager and create a calendar page with WPFullCalendar; I have not tried to put a smaller calendar on the home page, but have thought about it. One of those “when-I-get-to-it” items.

        Report

      • Timothy Jacobs

        You can hold Shift+Enter to create a line break, but having that be a keyboard shortcut isn’t very discoverable.

        Report

        • Sally G

          Thanks! That is a standard line break when typing on a computer, but it keeps the paragraph style the same, so would not serve the purpose for a header—hmm, realizing that screen readers pick up headers differently, but shouldn’t they be able to do that whether alone in a block or with a lower-level header or paragraph of text in the same block? We want features to make things easy for those who post, not for machines! (though of course we want the best possible results for those actually using the device to read, but the machine should adapt to us, not the other way around—just my 2¢ as an amateur)

          Report

  4. Andre

    Hey! Thank you for testing out the Ariele Lite theme of ours. I took me a few moments to realize after reading…

    “Because I already knew Ariele Lite worked with the block editor, it made sense to see if I could build with it. It proved to be a solid foundation.”

    I just had to read the rest of the article while making some notes for upcoming theme adjustments :)

    Overall, it was interesting to see the recreation and what simplicities and challenges you faced.

    Report

    • Justin Tadlock

      To be able to recreate an entirely custom homepage like this is a testament to how solid the theme is. Right now, I know of only a handful of themes that I could do this with.

      Report

  5. Lax Mariappan

    Hi Justin and Carolina,

    Editor Plus injects inline styles, is that okay to use?

    Report

  6. Nik Tsekouras

    Great post!

    Personally when I have to create some designs with Columns block like `Discography or Video section (with same width columns), I find it faster to create the blocks and then transform them to Columns block.

    For example in Videos section just pasting the links, select them and then transform. This is really small but I enjoy it a lot :)

    Report

  7. Andrew

    “Dropping old-school theme options means a lot less code work for developers, allowing them to focus more on styling.”

    This.

    I wonder if one of the main reasons for theme authors not being so quick to adopt the blocks system is a perceived slow user takeup?
    When users expect blocks and patterns, developers will provide them, but we need developers to provide block based themes for users to use them.

    It will reach a tipping point where theme options as we know them will be the old way. Articles like this are helping to nudge it in the right direction.

    Report

    • Sally G

      You’re probably right. I am a user, not a developer, and I hate blocks. I am not an expert, work sporadically on 2 sites and transferring another group’s site from inherited Joomla to WordPress, with which I am more familiar. The classic editor with the ability to switch between HTML and WYSIWYG is where I started and where I am most comfortable.. I am not creating a lot from scratch, more duplicate and edit.

      Report

    • Justin Tadlock

      I really think block patterns are that stepping stone that theme authors need to offer for users. When users can insert pretty much any layout they need at the click of a button, it makes it so much easier.

      Imagine, as a user, being able to insert this entire homepage design by simply selecting it from the patterns inserter. Then, just customizing the content bits. The user experience time goes from a couple hours down to minutes.

      Without more theme authors leading the way with patterns, it’s a hard sell to get more users to take that next step.

      Report

      • Sally G

        I don’t want to be pushed into patterns that a theme designer sets. Maybe I am an anomaly (I often am), but if I want to use blocks at all, it is to put a specific item where I want it, not where someone else thought it should go.
        Yes, I appreciate being able to click on a button block and customize it, but I have had issues with getting the button where I want it in Elementor and simply referred the issue to my colleague who has a lot more experience than I. That is fine for that site, but I don’t have someone like that on whom to rely in the site that I am migrating from Joomla (when I have time to sit down with the support team at my host and make the plug-in work!).

        Report

  8. Grant

    Really Great Post. Gutenberg is approaching what many envisioned it might and with the speed that websites and applications demand. Also the more “tests” that are done like this, the community will see some of the blind spots that end users might be looking for.

    Report

  9. Michael

    Great post showcasing the capabilities of Gutenberg. But, if you take a closer look at how the layout is build, its just sections with inner squares and texts. In short, the layout is very basic. However, the real world usage is far from the example.

    Please take a look at the examples below (they are all built in Elementor). I literally have to wrangle with CSS and Editor to achieve something like the following:

    https://library.elementor.com/travel-testimonials/
    https://library.elementor.com/barbershop-home/
    https://library.elementor.com/travel-blog-home/
    https://library.elementor.com/flooring-company/

    IMHO, adding margin and padding to individual columns/rows fundamentally required to any page builders.

    Report

    • Justin Tadlock

      The example is not at all far from real-world usage. The layout elements are modern and in use across the web.

      I agree that WordPress needs margin and padding controls (they are coming). From the Elementor examples provided, the only two things that stand out to me as not being possible from the end-user is the overlapping and some custom background stuff. The overlapped element design needs custom block styles at the moment as we have seen in themes like Twenty Twenty-One. Some of the custom background things would need a plugin or a theme style.

      The animation on a few items will probably always fall into plugin territory.

      Report

    • Justin Tadlock

      I also want to add a reminder that this post is not about comparing the block editor to third-party page builders (those are good to look at as the project continues to move forward). It’s about showing how layouts from the theme directory could be handled by the block editor right now.

      Report

      • Michael

        Thanks for the insight, Justin.

        However, in my comment, I didn’t really compare Gutenberg to Elementor. What I was comparing is the user experience for the end-user on how to achieve similar layouts (e.g. overlapping), in other page builders this can be done by offsetting a negative margin.

        It just so happened that the examples that are given are from the Elementor, but you can find the same layouts all over the web.

        I agree animations can be declared inside the theme or a plugin via additional class or custom block settings.

        But to be honest, as a regular user. I find it hard to use Gutenberg or create sections using Gutenberg, its just so weird and frustrating. For example, when I add a background color, it automatically adds padding (I don’t know who made this decision) but it should be the end-user who’ll want to decide whether to add padding or not. Maybe it’s for developers, and not for end-users like me who don’t know how to write CSS when something needs to be overwritten.

        Thanks

        Report

    • Sally G

      I have not used Gutenberg yet; I am not sure what third-party page builder we are using on one site, using Elementor on another, and will use the a child of the twenty-twenty theme as my starting point on a site I am transferring. So far, not a fan of either third-party choice; I knew pretty much what I was doing on WordPress itself before blocks, it is a bit of a learning curve to adjust to working with blocks.

      Report

  10. Lukasz

    First, that is a nice “Music Artist” theme! -nice recreation as well using block editor.

    Second, good point mentioned previously about real world examples, sometimes the layout can get pretty advanced. I was looking how I can re-create this homepage with just blocks https://creativedigital.tech/anada/

    Some items like the hero image look simple enough, but other items look like they would not be so simple…block patterns can be useful to create sections with custom classes to handle the advanced stuff..maybe some custom blocks would need to be created.

    Report

    • Justin Tadlock

      Yeah, you wouldn’t be able to create that particular layout with just core blocks alone. Of course, recreating everything from core is not the goal. It’s possible for a theme to handle most of it with custom block styles and patterns, but you’d need a block plugin or two that handled some things like tabs, sliders, and animation.

      All of it is definitely within the realm of what the block editor can do though.

      Even a traditional theme wouldn’t be able to handle all of those elements without a boatload of theme options either. And, generally, that would be far less flexible for the end-user if they wanted to make any changes, such as moving sections around or adding in new ones.

      Report

Comments are closed.

%d bloggers like this: