Giter Club home page Giter Club logo

Comments (5)

bobbingwide avatar bobbingwide commented on June 20, 2024

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.

bobbingwide avatar bobbingwide commented on June 20, 2024

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.

bobbingwide avatar bobbingwide commented on June 20, 2024

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=&#8221;wp-block-oik-css-css&#8221;&gt;</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.

bobbingwide avatar bobbingwide commented on June 20, 2024

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.

bobbingwide avatar bobbingwide commented on June 20, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.