Comments (5)
What's this gutenberg_apply_block_supports
thingy then?
The reason it worked in oik-plugins.co.uk was because Gutenberg 8.9.1 was not activated in that environment.
from oik-css.
With Gutenberg 8.8.0 the server side rendered output for the CSS block is:
<style type="text/css" media="screen,print" class="wp-block-oik-css-css">p { color: green; }
h2 { font-style: italic; }</style>
<div class="bw_css">Sets paragraphs foreground colour to green and headings to italic.<code>p <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #dc143c;">green</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span><br>
h2 <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">font-style</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">italic</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span></code></div>
With Gutenberg 8.9.1 it becomes:
<style type="text/css" media="screen,print" class="wp-block-oik-css-css">p { color: green; }
h2 { font-style: italic; }</style>
It seems that the logic in gutenberg_apply_block_supports
doesn't like what's been produced by my server code.
It's not obvious from the Gutenberg repository that this is a known problem.
There are some PR's implementing tests:
WordPress/gutenberg#25053
WordPress/gutenberg#25026
What's less obvious is what I need to do to make it work like it did with Gutenberg 8.8.0.
from oik-css.
Attempting to wrap the output generated by the shortcode in a simple div
helped a bit.
$html = '<div class="wp-block-oik-css-css">';
$html .= oik_css( $attributes, $content );
$html .= '</div>';
except autop or something kicked in and buggered it up in another way, converting my surrounding div
to a p
( paragraph ).
<p>div class=”wp-block-oik-css-css”></p>
<style type="text/css" media="screen,print" class="wp-block-oik-css-css">p { color: green; }
h2 { font-style: italic; }</style>
<div class="bw_css">Sets paragraphs foreground colour to green and headings to italic.<code>p <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #dc143c;">green</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span><br>
h2 <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">font-style</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">italic</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span></code></div>
from oik-css.
The reason that gutenberg_apply_block_supports
is changing the generated code is because the block supports css_classes.
C:\apache\htdocs\wordpress\wp-content\plugins\gutenberg\lib\block-supports\index.php(55:0) gutenberg_apply_block_supports(4) 232 0 2020-09-07T15:41:08+00:00 0.466282 0.000152 cf=genesis_loop,genesis_entry_content,the_content,pre_render_block,render_block 15704 27 35034 2097152/2097152 512M F=501 attributes Array
(
[css_classes] => Array
(
[0] => wp-block-oik-css-css
)
)
gutenberg_apply_generated_classname_support
assumes a value of true.
from oik-css.
This setting can be overidden by setting values for supports
.
register_block_type( 'oik-css/css',
[
'render_callback'=>'oik_css_dynamic_block_css',
'attributes' =>[
'css' =>[ 'type'=>'string' ],
'text'=>[ 'type'=>'string' ]
]
, 'editor_script' => 'oik-css-blocks-js'
, 'editor_style' => null
, 'script' => null
, 'style' => 'oik-css-blocks-css'
, 'supports' => [
'className' => false
]
] );
another way to make it work is to not include the class attribute on the surrounding div.
$html = '<div>';
$html .= oik_css( $attributes, $content );
$html .= '</div>';
The belt and braces solution is to implement both.
OR I could just test the unchanged code with Gutenberg 8.9.2.
from oik-css.
Related Issues (17)
- Add support for MySQL to [bw_geshi]
- Update PHPUnit tests to PHPUnit 8 and WordPress 5.3.2 HOT 1
- WordPress embed block working differently between editor and front end HOT 6
- PHPUnit tests don't run unless oik-bwtrace is activated HOT 1
- Improve CSS and GeSHi blocks to support loading `src` from a file HOT 2
- Update for WordPress 5.8 compatibility HOT 15
- Not all oik-css/css block styling gets applied in the block editor
- Remove redundant logic and files for `oik_css_activation()` HOT 1
- Support PHP 7.0 - change GeSHi() to __construct()
- Test bw_better_autop() with WordPress 4.7 HOT 2
- Add media= parameter to [bw_css] for easy @media queries
- Support PHP 7.2 HOT 1
- 100% translatable and localizable on wordpress.org HOT 1
- [bw_geshi] - Do not eliminate p and br tags when lang=html or html5 HOT 2
- Disable GeSHI's keyword linking
- Support for WordPress 5.0 and the new editor - Gutenberg HOT 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from oik-css.