Gutenberg layout not working on custom theme

  • Hi Guys,
    I’m kinda new to developing WordPress themes, so I was really excited when Gutenberg was announced because it would solve a lot of issues I had when developing. Or so I thought. Although I am using a very simple Theme right now (it only consists out of a style sheet, header.php, footer.php, index.php, some javascript files, and a functions.php file) Gutenburg refuses to implement the styling that I assign to it in the editor (the editor has no problems whatsoever). On other themes it does work. For example: when I create a block consisting of 3 columns the end result will just be 1 column of content, the full width of the page. What am I doing wrong? Should I update my functions.php or am I missing some other files?

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Daniel Richards

    (@talldanwp)

    Hi @nelisvl,

    There are a few steps you might have to take to get your theme working correctly with the editor. Have you had a look through the Gutenberg handbook’s theme section? I’d recommend a read through it if you haven’t:
    https://www.ads-software.com/gutenberg/handbook/designers-developers/developers/themes/theme-support/

    It sounds from your description like you might need to enable the default block styles for your theme:
    https://www.ads-software.com/gutenberg/handbook/designers-developers/developers/themes/theme-support/#default-block-styles

    Thread Starter nelisvl

    (@nelisvl)

    Thanks for reacting. I have actually done that, but maybe I have written it wrong. Right now I copied the function that is shown in the handbook, with some added theme_supports. It looks like this now:

    function gutenberg_setup() {
    // Support Featured Images
    add_theme_support( ‘post-thumbnails’ );

    //Gutenberg
    add_theme_support( ‘align-wide’ );
    add_theme_support(‘editor-styles’);
    add_theme_support(‘wp-block-styles’);
    add_theme_support( ‘dark-editor-style’ );
    add_theme_support( ‘responsive-embeds’ );
    }
    add_action( ‘after_setup_theme’, ‘gutenberg_setup’ );

    Am I missing something or making a mistake in the code?

    Plugin Author Daniel Richards

    (@talldanwp)

    That looks about right. I’ve compared it to twentynineteen:
    https://github.com/WordPress/twentynineteen/blob/master/functions.php

    I’d recommend calling the setup function something other than gutenberg_setup, it might not be the cause of your issues, but the name of the function should be unique in the WordPress codebase and this one has a high chance of clashing.

    Another thing I’d like to double-check, are the quotation marks in your code correct? In your post they look like ‘, but they should be '. That might just be how the forum formats things, though.

    Finally, have you checked for PHP errors? That would be a good place to start if you still can’t see any of the block styles in your posts:
    https://codex.www.ads-software.com/Debugging_in_WordPress

    Thread Starter nelisvl

    (@nelisvl)

    Thank you, I’ll look into the debugging function

    Thread Starter nelisvl

    (@nelisvl)

    The weird thing is that it does give a html output with gutenberg functions: so it is working. Only the styling is not getting used or something?

    Indeed, I checked and there is a bug in WordPress core that is not belong to the theme you use. I found that WordPress can’t loud the styles files of RTL version because they are not exist in current version, at least not in the path they should be. It must be fixed in the next version as I guess others will report this problem too. In meantime. you can change the path of styles in core manually to the correct path, as I did.

    Thread Starter nelisvl

    (@nelisvl)

    Thank u Yoshi! I indeed saw that there was a problem in the core but wasn’t sure if it was the source of the problem and how I had to fix it. I’ll try later this week and otherwise I’ll wait for the update. Thanks for confirming it anyways!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Gutenberg layout not working on custom theme’ is closed to new replies.