Support » Developing with WordPress » custom theme : Front end Gutenberg core style

  • Resolved elboz

    (@elboz)


    Hi all,
    I am creating a custom theme from scratch and I get some rendering issues with Gutenberg I do not understand (I do not wants to custom or create new blocks for now, just using the core rendering).

    I am running the last wordpress release (Version 5.4)

    Gutenberg style was not loaded at all.

    First and like explained in many post I added the following code

    function register_gutenberg(){
        add_theme_support('wp-block-styles');
    }
    add_action ('after_setup_theme','register_gutenberg');
    

    But that did not work (I do not understand why, the debug show me it is going throw this code)

    So I added the code :

    wp_register_style( 'my-block-css', '/wp-includes/css/dist/block-library/style.css', array() , '', 'all' );
    wp_enqueue_style( 'my-block-css');

    I am not sure I should reference the core directory like this, but I did not found a better way.

    This looks to work for some blocks (like text, media with text or calendars,…)
    but some others like image are still not rendering correctly (specially with the width to make a circle, or the caption still on the left).

    I thought I miss some javascript so I enqueue the library javascript

    wp_register_script( 'enqueue_block_assets', '/wp-includes/js/dist/block-library.min.js', false, '1.0', true);
    wp_enqueue_script( 'enqueue_block_assets');

    But still not working.

    Does someone could help me on this?

    I also would like to include standard core Gutenberg front end style in my sass (using Zurb foundation site)
    Is there a way ? maybe I am wrong, I found the Gutenberg sass but looks to me this is more for the editor side (I did not really trained to Gutenberg yet, just want to include the standard in my project for now)

    Thanks

Viewing 11 replies - 1 through 11 (of 11 total)
  • Do you use wp_head() function in <head> in header.php?
    All this css and js files you needed are added through this hook.

    Hi Olga,
    Yes I included it in my header.php
    <?php wp_head();?>

    “add_theme_support(‘wp-block-styles’);” is for “/wp-includes/css/dist/block-library/theme$suffix.css”. You can see this small css file to find if you need this in a first place.
    And it looks like “/wp-includes/css/dist/block-library/style.min.css” has no need to add support or other dependencies from theme. It hooked through “wp_head” – “wp_enqueue_scripts” – “wp_common_block_scripts_and_styles”. Maybe you unregistered some action. You can try to turn off as much functionality as you can to find what causes the problem.
    And it looks like “/wp-includes/js/dist/block-library.min.js” is needed only in editor.

    Thanks a lot Olga,
    I will check all what you said.

    On my side and with tests, I also found that the rendering seems to be OK(at least for image) if I keep the core Gutenberg css loaded and remove the foundation style.

    So I will also have a look on this and keep you inform

    elboz

    (@elboz)

    Sorry, I got some issues with my laptop.
    It is now resovled, I will do more tests this week or next week-end and give you a feed back

    Great! )

    Hello,
    Just to give you a first feed back.

    I installed an standard WordPress and created a basic theme (child of twentysixteen).
    In function.php I included jquery, foundation (css and js).
    I created a post with img in it and everything is working fine.
    I added some foundation class I use in the other theme, and it is also working fine.

    Next step is to create a new theme (without been a child theme).I think this will be the beginning of issue 🙂

    I’ll keep you inform

    Hello!

    You can keep two installations for easy to compare… )

    Hello,
    So I created a new theme just displaying the standard post (using Gutehnberg & foundation) -> everything was OK.

    So I decided to :

    Download the foundation site full source files (using npm) and build my own javascript/css using Gulp

    cleaned up my function.php file in my theme that had the issue. I mostly rebuilded it from scratch (now that I have a better understanding of WordPress).

    And now it is working fine.
    So I removed my the

    wp_register_style( 'my-block-css', '/wp-includes/css/dist/block-library/style.css',array() , '', 'all' );
    and wp_register_style( 'my-block-css', '/wp-includes/css/dist/block-library/style.css', array() , '', 'all' );

    An it is still working fine….

    It still do not know where the issue was coming from, but I assume that either :
    – I missed up the css in the function.php adding action twice or in the wrong order.
    – Using the prebuild foundation css/javascript, is not good.

    My filling is more issue on the function.php. It need to be very clean and you have to review it in case of css issue

    Hi! Great!
    To make function.php easy to read, you can put all code in separate files according to its functions and use PHP function require_once() to get them with comments where and what )

    Hi Olga,
    I’am already using it.
    Like It was first theme from scratch and my first theme…., I learned at the same time, it was not very nice code… It is good to do some cleanup sometime :-))

Viewing 11 replies - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.