Create a dynamic block to replace the [bw_css] shortcode

bobbingwide commented 6 years ago

The [bw_css] shortcode, from the oik-css plugin, is used to create inline CSS. It can also be used to document the CSS that it generates.

Gutenberg doesn't yet support this shortcode - see Gutenberg issues 5123 and 4456, already referenced by #22 - so we need to support it ourselves.

Requirements

Develop a new CSS block which enables the user to enter CSS which will be applied inline.
Support display of the "content" formatted using GeSHi, when required
Format the content as is.

Proposed solution

Create a new block called oik-css
Support attributes as if the block were the [bw_css] shortcode
Implement as a dynamic block, passing the block's content to the existing shortcode function oik-css.

Note: As previously noted I envisage there to be a problem with this - see #22 - and Gutenberg issues 5760 and 5968.

bobbingwide commented 6 years ago

I've developed a quick and dirty hack for https://github.com/wordpress/gutenberg/issues/5760 which enables a dynamic block to determine the content that it expects. This has enabled me to complete the first stage of implementing the "CSS" block.

Formatted output. See the source displayed in the sidebar.

Editor view

Now I have to add the text attribute, which will cause the CSS to be displayed, formatted using GeSHi.

bobbingwide commented 6 years ago

After a short discussion with @aduth I have changed the code so that what was intended to be the dynamic content is saved as an attribute of the block. The dynamic block rendering function simply extracts this attribute and passes it to the implementing shortcode function as the $content parameter.

function oik_block_dynamic_block_css( $attributes ) {
    //bw_backtrace();
    $content = bw_array_get( $attributes, "css" );
    bw_trace2( $content, "Content" );
    //$content = oik_block_fetch_dynamic_content( "wp:oik-block/css" );
    oik_require( "shortcodes/oik-css.php", "oik-css" );
    $html = oik_css( $attributes, $content );
    return $html;
}

So I no longer need the quick and dirty hack that I implemented in oik_block_fetch_dynamic_content.

In this early working version the attribute is still called css, reflecting the name of the block. In a more generic solution, which we'll try for the CSV block, I'll call the attribute content.

Here's an updated screen capture, showing that the new lines have been respected. Hurrah!

Note: I wouldn't normally use CSS to force [] to appear after each paragraph!

bobbingwide commented 5 years ago

I included the CSS block in the wp-pompey website. It caused an Updating failed message in the editor, but the block was saved. In the front end the page crashed. The error log contained the following message.

16-Jan-2019 10:33:21 UTC] PHP Fatal error:  require_once(): Failed opening required 
'wp-content/plugins/oik-css/shortcodes/oik-css.php' 
in wp-content/plugins/oik-bwtrace/libs/oik_boot.php on line 70

Explanation

oik-css was not installed!

bobbingwide commented 5 years ago

It would be nice if this block were server side rendered. When the text field is not empty then the rendered block will be displayed below the text area.

bobbingwide commented 5 years ago

It would also be nice if the entry field showed highlighting. See one of the plugins documented in blocks.wp-a2z.org for an example.

bobbingwide commented 4 years ago

The code has been copied to the oik-css plugin which has been converted to a standalone plugin. It’s no longer dependent upon oik for the two blocks it supports: oik-css/css and oik-css/geshi. Note that the block names are different. This will allow for switching from oik-blocks to oik-css. Then the `oik-block/css block can be deprecated.

bobbingwide commented 2 years ago

Delivered as part of the oik-css plugin. Closing therefore.

bobbingwide / oik-blocks