Closed responsemktg closed 1 year ago
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
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
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
).
I went ahead and double checked everything:
.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.
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.
@Log1x Im guessing that you ran this using bud build
instead 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!
yeah bud build
– I'm rarely in the editor with bud dev
so I'm not sure about that.
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:
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:
That didn't work, so I tried just adding the enqueue in here:
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