Support

Account

Home Forums ACF PRO ACF Blocks with block.json generates wrong CSS file URL in editor Reply To: ACF Blocks with block.json generates wrong CSS file URL in editor

  • Just for posterity’s sake, I’m using the same CSS background images in two different blocks. Both blocks are registered the same way:

    register_block_type(__DIR__ . '/blocks/rotator-inventors-notebook');
    register_block_type(__DIR__ . '/blocks/rotator-news');

    The enclosing DIV for the notebook hsa the following CSS:

    background-image: url(/wp-content/uploads/upper-black-band.png), url(/wp-content/uploads/lower-black-band.png),url(/wp-content/uploads/tlf_medium-spotlight_background.jpg);

    That works just fine and looks like this in the Inspector:

    background-image: url(/wp-content/uploads/upper-black-band.png), url(/wp-content/uploads/lower-black-band.png),url(/wp-content/uploads/tlf_medium-spotlight_background.jpg);

    The identical CSS in the outer DIV of the News rotator though generates this in the background-image:

    background-image: url('/wp-content/themes/theme_v5/blocks/rotator-news//wp-content/uploads/upper-black-band.png'), url('/wp-content/themes/theme_v5/blocks/rotator-news//wp-content/uploads/lower-black-band.png'),url('/wp-content/themes/theme_v5/blocks/rotator-news//wp-content/uploads/tlf_medium-spotlight_background.jpg');

    making all of the image URLs relative to the block definition rather than the root of the server. Not sure why it works on one block rather than the other, they’re practically identical.