Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create a dynamic block to replace the [bw_css] shortcode #13

Open
bobbingwide opened this Issue Apr 4, 2018 · 5 comments

Comments

Projects
None yet
1 participant
@bobbingwide
Copy link
Owner

bobbingwide commented Apr 4, 2018

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 bobbingwide self-assigned this Apr 4, 2018

bobbingwide referenced this issue in bobbingwide/oik-block Apr 5, 2018

@bobbingwide

This comment has been minimized.

Copy link
Owner Author

bobbingwide commented Apr 5, 2018

I've developed a quick and dirty hack for WordPress/gutenberg#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.
image

Editor view
image

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

bobbingwide referenced this issue in bobbingwide/oik-block Apr 5, 2018

@bobbingwide

This comment has been minimized.

Copy link
Owner Author

bobbingwide commented Apr 5, 2018

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!

image

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

@bobbingwide

This comment has been minimized.

Copy link
Owner Author

bobbingwide commented Jan 16, 2019

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

This comment has been minimized.

Copy link
Owner Author

bobbingwide commented Feb 17, 2019

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.
image

@bobbingwide

This comment has been minimized.

Copy link
Owner Author

bobbingwide commented Feb 17, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.