Om de waarde van de parameters te kunnen aanpassen in de WP block-editor, maakte ik een JSON object dat aan de block-editor kan worden doorgegeven. Hierin worden de parameters gespecificeerd en ook wordt hierin deze svg als een template doorgegeven zodat de block-editor van parameters en template samen een svg kan maken.

De templates waren vooralsnog zo eenvoudig dat een aparte template-engine eigenlijk niet nodig leek. Ik maakte een simpele renderfunctie die met een enkele regular expression parameter-waarden afkomstig van de block-editor in de template kon plaatsen. Niet uit sluiten valt dat in een later stadium gebruik van een wat geavanceerder template-engine de moeite waard zal blijken te zijn.

Om later nieuwe patronen toe te voegen, plaatste ik het JSON object in een bestand in een aparte map in de plugin directory: svg-tpl.

Het WP plugin bestand svg-bg.php leest alle bestanden in de template-map en geeft de JSON objecten in een array aan de block-editor door.

function get_svgs(){
	$svgs = array();
	$files = scandir( plugin_dir_path( __FILE__ ) . 'svg-tpl' );
	foreach( $files as $file ){
		if( $file == '.' || $file == '..' ) continue;
		$file_info = pathinfo($file);
    	if ($file_info['extension'] !== 'json') continue;
	
		$svg_json = json_decode( file_get_contents( plugin_dir_path( __FILE__ ) . 'svg-tpl/' . $file ) );
		
		if( $svg_json->template === "file") {
			$svg_json->template = file_get_contents( plugin_dir_path( __FILE__ ) . 'svg-tpl/' . $svg_json->name . '.svg' );
		} 
		$svgs[] = $svg_json;
	}
	return $svgs;
}

function wp_svg_bg_enqueue_block_editor_assets() {
	global $wp_scripts;
	$svgs = get_svgs();
    // Localize the script with the SVG objects
    wp_localize_script('create-block-svg-bg-editor-script', 'svgObjects', $svgs);
}

add_action('enqueue_block_editor_assets', 'wp_svg_bg_enqueue_block_editor_assets');

De Blockeditor beschikt nu over een specificatie van de parameters en een template voor de SVG. Maar om de SVG te kunnen maken, moeten behalve de parameters ook hier en daar waarden kunnen worden gebruikt die van die parameters worden afgeleid. Zoals gezegd is bijvoorbeeld de hoogte van Asanoha-svg gelijk aan √3 * dx ( de breedte parameter ).

Daarom wordt aan de block-editor ook een property met javascript functies doorgegeven. In het geval van de hoogte van het Asanoha basiselement wordt de functie view.fuctions.svg_height doorgegeven waarmee de hoogte op basis van dx kan worden bepaald. Bij het evalueren van de functie wordt het geheele json-object ook zelf doorgegeven als parameter ‘data’ zodat de functie toegang heeft tot alle parameters in het JSON object:

{ "view ": {
  "parameters" : {
    ...
  }, 
  "functions" : {
    "svg_height": { "return Math.round( data.dx.value * Math.sqrt(3));" }
    ...
  }
}

In het bestand svg-tpl/asanoha.json is het geheel te zien waarmee de blockeditor een op maat gemaakte svg moet kunnen genereren.

Nu het JSON object duidelijk kan maken welke Inspector controls kunnen worden ingesteld, kan de edit-block functie worden gemaakt.

Hierin wordt als eerste een selectbox gevuld met als opties de namen van alle json bestanden die er in de map svg-tpl zijn gevonden. Ik begon met alleen ‘Asanoha’ maar het is uitdrukkelijk de bedoeling dat er een aantal andere bijkomen. Op basis van het in deze selectbox geselecteerde json object worden vervolgens controls toegevoegd aan het panel in de Gutenberg Inspector controls. De parameter ‘dx’, zoals die in asanoha.json wordt gedefinieerd, heeft als type ‘range’. Dit betekent dat de edit-functie een RangeControl aan het panel toevoegt. Andere properties van ‘dx’ worden gebruikt om de RangeControl nader in te stellen, bijvoorbeeld minimum en maximum waarde.

Behalve het type ‘range’ herkent edit.js op dit moment de types ‘string’, ‘select’ en ‘colorpanel’. Daarmee kunnen overeenkomstige controls worden toegevoegd. Als het type niet herkend wordt, wordt het genegeerd.

Als de benodigde parameters zijn ingesteld kan met de functie renderTemplate de uiteindelijke svg worden gegenereerd. Aanvankelijk leek een template engine als Moustache voor de hand te liggen maar desgevraagd stelde Copilot een simpele regex voor die inderdaad vooralsnog voldoet. Omdat deze renderfunctie het niet kan herkennen als er een functie wordt opgegeven in plaats van een simpele variabele worden de functieresultaten in expliciet in een tussenvariabele geplaatst zodat bij het renderen alleen variabelen hoeven te worden vervangen en geen functies geëvalueerd.

Ik heb de JSON objecten van de patronen uitgebreid met een property ‘presets’, een array waarin met groepen voorinstellingen van de parameters. Het laat zien dat kleine veranderingen in de parameters tot ingrijpend ander aanzien van het patroon kan leiden. SVG’s die deze presets hebben krijgen een extra select-box in de Inspector Controls.

Ter onderscheiding gaf ik de groepen voorinstellingen een naam. Meestal net zo vergezocht als Asanoha.

Wat moet er na het renderen met de svg gebeuren? SVG’s kunnen op verschillende manieren in een webpagina worden opgenomen. In principe zou de svg als bestand kunnen worden opgeslagen ( in bijvoorbeeld wp-uploads/ ) en dat bestand kan dan als achtergrond-afbeelding worden geselecteerd. Dit is evenwel niet zonder problemen want WordPress staat zonder aanpassing de upload van Svg’s niet toe.

Maar een SVG kan ook in de lopende html worden opgenomen en zelfs als achtergrond-afbeelding door een inline css styleregel als hieronder. Dit scheelt overigens ook een extra request aan de server.

background-image: url(data:image/svg+xm, 'urlencoded svg data'). 

Door de svg om te zetten naar een inline-styleregel kan deze in de edit- en in de save-functie aan de blockProps van het Gutenberg block worden toegevoegd.

// get the resulting svg by rendering the template and parameters
const svgResult = renderTemplate( mytemplate, myview );

// URL encode the svg
const svgDataUri = `data:image/svg+xml,${ encodeURIComponent(
        svgResult
) }`;

// Add the encoded svg as an inline css background rule
blockProps = useBlockProps( {
        style: { backgroundImage: `url("${ svgDataUri }")` },
} );

Het aanpassen van parameters zal hierdoor onmiddellijk resulteren in een aangepaste CSS achtergrond stijl zodat de Block Editor gelijk de achtergrond aanpast. Zoals de bedoeling was.