blueprint.json

{
	"$schema": "https://playground.wordpress.net/blueprint-schema.json",
	"landingPage": "/blockparty-modal-demo/",
	"preferredVersions": {
		"php": "8.1",
		"wp": "latest"
	},
	"steps": [
		{
			"step": "installPlugin",
			"pluginData": {
				"resource": "git:directory",
				"url": "https://github.com/BeAPI/blockparty-modal",
				"ref": "1.0.6",
				"refType": "tag"
			},
			"options": {
				"activate": true,
				"targetFolderName": "blockparty-modal"
			}
		},
		{
			"step": "login",
			"username": "admin",
			"password": "password"
		},
		{
			"step": "runPHP",
			"code": "<?php\nrequire_once 'wordpress/wp-load.php';\n$dir = WP_CONTENT_DIR . '/mu-plugins';\nif ( ! is_dir( $dir ) ) {\n\twp_mkdir_p( $dir );\n}\n$file = $dir . '/blockparty-modal-playground-svg-kses.php';\n$lines = array(\n\t'<?php',\n\t'add_filter( \\'wp_kses_allowed_html\\', function( $tags, $context ) {',\n\t'\tif ( \\'post\\' !== $context ) {',\n\t'\t\treturn $tags;',\n\t'\t}',\n\t'\t$tags[\\'dialog\\'] = array(',\n\t'\t\t\\'aria-modal\\' => true,',\n\t'\t\t\\'class\\' => true,',\n\t'\t\t\\'style\\' => true,',\n\t'\t\t\\'id\\' => true,',\n\t'\t\t\\'closedby\\' => true,',\n\t'\t);',\n\t'\t$tags[\\'svg\\'] = array(',\n\t'\t\t\\'xmlns\\' => true,',\n\t'\t\t\\'viewbox\\' => true,',\n\t'\t\t\\'width\\' => true,',\n\t'\t\t\\'height\\' => true,',\n\t'\t\t\\'fill\\' => true,',\n\t'\t\t\\'class\\' => true,',\n\t'\t\t\\'aria-hidden\\' => true,',\n\t'\t\t\\'role\\' => true,',\n\t'\t\t\\'focusable\\' => true,',\n\t'\t);',\n\t'\t$tags[\\'path\\'] = array(',\n\t'\t\t\\'d\\' => true,',\n\t'\t\t\\'fill\\' => true,',\n\t'\t\t\\'class\\' => true,',\n\t'\t);',\n\t'\treturn $tags;',\n\t'}, 10, 2 );',\n);\nfile_put_contents( $file, implode( \"\\n\", $lines ) . \"\\n\" );\necho file_exists( $file ) ? 'mu-plugin installed' : 'mu-plugin failed';\n?>"
		},
		{
			"step": "runPHP",
			"code": "<?php require_once 'wordpress/wp-load.php'; $page_content = '<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"linkedModalId\":\"m-e16de3fe79f9\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">Open my modal window</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:blockparty/modal {\"title\":\"My Modal\",\"modalId\":\"m-e16de3fe79f9\",\"displayIconOnly\":true,\"style\":{\"spacing\":{\"padding\":{\"top\":\"var:preset|spacing|40\",\"bottom\":\"var:preset|spacing|40\",\"left\":\"var:preset|spacing|40\",\"right\":\"var:preset|spacing|40\"}}}} -->\n<dialog class=\"wp-block-blockparty-modal\" style=\"padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\" id=\"modal-m-e16de3fe79f9\" aria-modal=\"true\" closedby=\"any\"><div class=\"wp-block-blockparty-modal__header\"><h2 class=\"wp-block-blockparty-modal__title\">My Modal</h2></div><div class=\"wp-block-blockparty-modal__content\"><!-- wp:paragraph -->\n<p>Blockparty Modal is a WordPress plugin that lets you add accessible modal dialogs to your content via the Gutenberg block editor. You define the modal content and behaviour in the editor; on the frontend, the modal is shown when the user activates a linked trigger (such as a button block).</p>\n<!-- /wp:paragraph --></div><button type=\"button\" class=\"wp-block-blockparty-modal__close-button\"><span class=\"sr-only\">Close this dialog window</span><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\"><path d=\"m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z\"></path></svg></button></dialog>\n<!-- /wp:blockparty/modal -->'; $page_id = wp_insert_post( array( 'post_title' => 'Blockparty Modal', 'post_name' => 'blockparty-modal-demo', 'post_content' => $page_content, 'post_status' => 'publish', 'post_type' => 'page' ) ); echo 'Page created with ID: ' . $page_id; ?>"
		}
	]
}