Support » Plugin: Block Lab » Block Lab – css files in plugin – Not working

  • Resolved g2lyon

    (@g2lyon)


    • WP 5.2.4
    • PHP 7.3.5
    • Block Lab 1.5

    I have a set of custom blocks with template files and css files in a child theme.
    It works smoothly.Thanks!

    Now I would like to move all the files from theme to a custom plugin.
    I pasted the complete “blocks” directory from theme to plugin and added block_lab_template_path( $template_path ) filter in my plugin functions file.
    Problem!
    The blocks are now displayed without styling.
    I tried to organise the blocks directory in different ways, as per Block Lab documentation. No success.
    The only way is to add a <style> tag in the template file. Not very elegant.
    Please, is it normal behaviour? did I miss something? or is there a bug some where?
    Thanks in advance for help.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Luke Carbis

    (@lukecarbis)

    @g2lyon Thanks for posting. I’m just trying this out, and can’t seem to replicate the problem myself (loading blocks from a plugin instead of a theme, by altering the template path with the block_lab_template_path filter).

    Could you post the code you’re using to filter the template path? Also, could you post a screenshot of your plugin’s directory structure with the block templates and stylesheets?

    g2lyon

    (@g2lyon)

    Hello Luke,
    Thanks for prompt answer,
    QUESTION 1:

    function url_templates_blocklab(){
    	return ABSPATH.'wp-content\plugins\myplugin';
    add_filter('block_lab_template_path','url_templates_blocklab' );

    I think the filter is good because the blocks are displayed, but without styling from css files.
    If I add some style in the block.php file it works

    QUESTION 2:
    Structure is as follows:
    mychildtheme
    blocks
    myblock
    block.css
    block.php
    preview.php
    myotherblock
    etc… IT WORKS!(block displayed with styling)
    Then I moved to:
    myplugin
    blocks
    myblock
    block.css
    block.css
    preview.php
    myotherblock
    etc… IT DOES NOT (block displayed, but without styling)

    Sorry, its quite late here, so dont expect some new post from my side before tomorow morning!
    Thanks in advance for your help

    g2lyon

    (@g2lyon)

    Sorry, new styling, easier to read

    mychildtheme
      blocks
        myblock
          block.css
          block.php
          preview.php
        myotherblock
    etc… IT WORKS!(block displayed with styling)
    
    Then I moved to:
    myplugin
      blocks
        myblock
          block.css
          block.php
          preview.php
      myotherblock
    etc… IT DOES NOT (block displayed, but without styling)
    g2lyon

    (@g2lyon)

    Some more tests:
    Instead of moving the complete blocks directory from mytheme to myplugin I moved only the block.php and preview.php files.
    The bolck.css files are remaining in mytheme
    Then I applied the filter.
    IT WORKS!!
    My conclusion is that, even if you add filter, Block Lab does not look for css files in plugin, but only in theme.
    I would prefer the complete set (templates+css) to stay together in the same place. For me block css belongs to the block design, not to site design. It works in this way for example in Drupal.
    May be one more filter should be added? add_filter(‘block_lab_css_path’,’url_css_blocklab’ );

    Plugin Author Luke Carbis

    (@lukecarbis)

    @g2lyon Thanks for this extra info. It helped me figure out that – you’re right – there is a bug happening here.

    There’s a fix in the works over here, which I’m hoping to look more closely at today or tomorrow. If you get a chance, could you test it out?

    https://github.com/getblocklab/block-lab/pull/470

    Plugin Author Luke Carbis

    (@lukecarbis)

    @g2lyon uh-huh! I figured it out!

    The slashes you’ve included in the filter URL are the wrong type.

    Try changing:
    return ABSPATH.'wp-content\plugins\myplugin';

    to:
    return ABSPATH.'wp-content/plugins/myplugin';

    Hello Luke,
    It works! Thanks,
    Anti slashes were coming from a copy/paste in the file property window.
    Unfortunately I have to work on W10. This wouldn’t happen in Linux!.
    Slashes vs anti slashes / Linux vs Windows
    I guess I will not be the only one doing this mistake.

    But something remains unexplained for me: Why was it working with block.php files and not with block.css files?

    Plugin Author Luke Carbis

    (@lukecarbis)

    Because the PHP files can be included from the server root path (i.e. /app/server/public_html/wp-content/plugins/myplugin/blocks/block.php), but the CSS needs to be enqueued from a URL (i.e. https://example.com/wp-content/plugins/myplugin/blocks/block.css).

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