Question: how to pass through assets from bud to block preview

[responsemktg]

I'm sure I'm missing something but I looked through all the src and couldn't figure it out.

Each of my blocks has its own entry point in Bud:

        test: [
          "@scripts/test", 
          "@styles/test",
        ]

And then within my Test Block, I'm trying to get these to show when you add a block > browse all > mouse over the block for a preview.

My first thought was just to add the following inside the block file:

public function enqueue()
{
        bundle('test')->enqueue() );
}

That didn't work, so I tried just adding the enqueue in here:

public function enqueue()
{
        wp_enqueue_style( 'block-test', asset('test.css')->uri() );
        wp_enqueue_script( 'block-test', asset('test.js')->uri(), array(), '', true );
}

Each time, the preview loads the view with the example data - but none of the styles or scripts in the preview frame. Looking forward to hearing what silly thing I'm missing to make this work

[Log1x]

I don't personally use the enqueue() method but it looks like this was ultimately broken for previews in WordPress 5.9.

https://www.advancedcustomfields.com/resources/whats-new-with-acf-blocks-in-acf-6/#asset-loading

[responsemktg]

If you don't use enqueue(), how are you seeing the styles in the block preview when setting example content? Or should I assume you do not use the preview functionality

[Log1x]

I enqueue everything with https://github.com/roots/sage/blob/main/app/setup.php#L25-L27 which is working fine for previews on WordPress 6.0.3.

@import 'app';

.editor-styles-wrapper {
  @import 'common/typography';
}

.wp-admin {
  img {
    display: unset #{!important};
    border: unset #{!important};
  }
}

Hopefully that never changes. 😨

EDIT: FYI if you're using Tailwind, I also set important in the tailwind config to .editor-styles-wrapper and then just add it to the html class in index.php on my site. This has worked nicely for quite awhile and was an easy fix to take a lot of the headache out of specificity in the editor. I'm sure you could also do this with PostCSS (I'm personally using @roots/bud-sass).

[responsemktg]

I went ahead and double checked everything:

• fresh install of sage
• Wordpress 6.0.3
• Editor styles being enqueued as above
• basic styles set in the editor.css file:

  .example {
  background-color: purple;
  color: white;
  padding: 5px;
  margin: 5px;
  }

• Add the class example to each of the list elements within the block:

  
  <div class="{{ $block->classes }}">
  @if ($items)
  <ul>
    @foreach ($items as $item)
      <li class="example">{{ $item['item'] }}</li>
    @endforeach
  </ul>
  @else
  <p>{{ $block->preview ? 'Add an item...' : 'No items found!' }}</p>
  @endif
  
  <div>
  <InnerBlocks />
  </div>
  </div>

- Add the block to the page - styles work
- Rollover the block for the preview - styles do not work.
<img width="1309" alt="Screen Shot 2022-10-21 at 3 03 05 PM" src="https://user-images.githubusercontent.com/15894740/197270879-2376f040-ecf0-4794-876b-e1f62cc021cc.png">

I feel like I'm missing something really, really simple.

[Log1x]

Just tested this for you.

You need to scope the style with .editor-styles-wrapper

.editor-styles-wrapper .example {
    background-color: purple;
    color: white;
    padding: 5px;
    margin: 5px;
}

EDIT: Haven't tested yet, but might be worth checking if enqueue() might actually work as well if styles are scoped, I'm not sure.

[responsemktg]

@Log1x Im guessing that you ran this using bud buildinstead of bud dev? Using bud build will show styles, but as soon as you run bud dev and check again - nothing is applied

Ultimately - that's not a huge deal breaker as bud build is run before deployment - just a slight pain to deal with while running in dev move.

I really appreciate the help on this, FWIW!

[Log1x]

yeah bud build – I'm rarely in the editor with bud dev so I'm not sure about that.