Created
June 6, 2025 08:31
-
-
Save philipjohn/6a18b582d58c2214535ec368d77cea39 to your computer and use it in GitHub Desktop.
RawHTML adds a wrapper div when it shouldn't
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"plugins": [ "." ], | |
"themes": [ "WordPress/twentytwentyfive" ] | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Plugin Name: Example Static | |
* Description: Example block scaffolded with Create Block tool. | |
* Version: 0.1.0 | |
* Requires at least: 6.7 | |
* Requires PHP: 7.4 | |
* Author: The WordPress Contributors | |
* License: GPL-2.0-or-later | |
* License URI: https://www.gnu.org/licenses/gpl-2.0.html | |
* Text Domain: example-static | |
* | |
* @package CreateBlock | |
*/ | |
if ( ! defined( 'ABSPATH' ) ) { | |
exit; // Exit if accessed directly. | |
} | |
/** | |
* Registers the block using a `blocks-manifest.php` file, which improves the performance of block type registration. | |
* Behind the scenes, it also registers all assets so they can be enqueued | |
* through the block editor in the corresponding context. | |
* | |
* @see https://make.wordpress.org/core/2025/03/13/more-efficient-block-type-registration-in-6-8/ | |
* @see https://make.wordpress.org/core/2024/10/17/new-block-type-registration-apis-to-improve-performance-in-wordpress-6-7/ | |
*/ | |
function create_block_example_static_block_init() { | |
/** | |
* Registers the block(s) metadata from the `blocks-manifest.php` and registers the block type(s) | |
* based on the registered block metadata. | |
* Added in WordPress 6.8 to simplify the block metadata registration process added in WordPress 6.7. | |
* | |
* @see https://make.wordpress.org/core/2025/03/13/more-efficient-block-type-registration-in-6-8/ | |
*/ | |
if ( function_exists( 'wp_register_block_types_from_metadata_collection' ) ) { | |
wp_register_block_types_from_metadata_collection( __DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php' ); | |
return; | |
} | |
/** | |
* Registers the block(s) metadata from the `blocks-manifest.php` file. | |
* Added to WordPress 6.7 to improve the performance of block type registration. | |
* | |
* @see https://make.wordpress.org/core/2024/10/17/new-block-type-registration-apis-to-improve-performance-in-wordpress-6-7/ | |
*/ | |
if ( function_exists( 'wp_register_block_metadata_collection' ) ) { | |
wp_register_block_metadata_collection( __DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php' ); | |
} | |
/** | |
* Registers the block type(s) in the `blocks-manifest.php` file. | |
* | |
* @see https://developer.wordpress.org/reference/functions/register_block_type/ | |
*/ | |
$manifest_data = require __DIR__ . '/build/blocks-manifest.php'; | |
foreach ( array_keys( $manifest_data ) as $block_type ) { | |
register_block_type( __DIR__ . "/build/{$block_type}" ); | |
} | |
} | |
add_action( 'init', 'create_block_example_static_block_init' ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "example-static", | |
"version": "0.1.0", | |
"description": "Example block scaffolded with Create Block tool.", | |
"author": "The WordPress Contributors", | |
"license": "GPL-2.0-or-later", | |
"main": "build/index.js", | |
"scripts": { | |
"build": "wp-scripts build --blocks-manifest", | |
"format": "wp-scripts format", | |
"lint:css": "wp-scripts lint-style", | |
"lint:js": "wp-scripts lint-js", | |
"packages-update": "wp-scripts packages-update", | |
"plugin-zip": "wp-scripts plugin-zip", | |
"start": "wp-scripts start --blocks-manifest" | |
}, | |
"devDependencies": { | |
"@wordpress/scripts": "^30.18.0" | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"$schema": "https://schemas.wp.org/trunk/block.json", | |
"apiVersion": 3, | |
"name": "create-block/example-static", | |
"version": "0.1.0", | |
"title": "Example Static", | |
"category": "widgets", | |
"icon": "smiley", | |
"description": "Example block scaffolded with Create Block tool.", | |
"example": {}, | |
"supports": { | |
"html": false | |
}, | |
"textdomain": "example-static", | |
"editorScript": "file:./index.js", | |
"editorStyle": "file:./index.css", | |
"style": "file:./style-index.css", | |
"viewScript": "file:./view.js" | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Retrieves the translation of text. | |
* | |
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/ | |
*/ | |
import { __ } from '@wordpress/i18n'; | |
/** | |
* React hook that is used to mark the block wrapper element. | |
* It provides all the necessary props like the class name. | |
* | |
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops | |
*/ | |
import { useBlockProps } from '@wordpress/block-editor'; | |
import { RawHTML } from '@wordpress/element'; | |
/** | |
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. | |
* Those files can contain any CSS code that gets applied to the editor. | |
* | |
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css | |
*/ | |
import './editor.scss'; | |
/** | |
* The edit function describes the structure of your block in the context of the | |
* editor. This represents what the editor will render when the block is used. | |
* | |
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit | |
* | |
* @return {Element} Element to render. | |
*/ | |
export default function Edit() { | |
const someHtmlContent = '<p>This is some <strong>HTML</strong> content that will be rendered in the editor.</p><p>There should be no wrapping <code>div</code>.</p>'; | |
return ( | |
<RawHTML children={ someHtmlContent } /> | |
); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* The following styles get applied inside the editor only. | |
* | |
* Replace them with your own styles or remove the file completely. | |
*/ | |
.wp-block-create-block-example-static { | |
border: 1px dotted #f00; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Registers a new block provided a unique name and an object defining its behavior. | |
* | |
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ | |
*/ | |
import { registerBlockType } from '@wordpress/blocks'; | |
/** | |
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. | |
* All files containing `style` keyword are bundled together. The code used | |
* gets applied both to the front of your site and to the editor. | |
* | |
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css | |
*/ | |
import './style.scss'; | |
/** | |
* Internal dependencies | |
*/ | |
import Edit from './edit'; | |
import save from './save'; | |
import metadata from './block.json'; | |
/** | |
* Every block starts by registering a new block type definition. | |
* | |
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ | |
*/ | |
registerBlockType( metadata.name, { | |
/** | |
* @see ./edit.js | |
*/ | |
edit: Edit, | |
/** | |
* @see ./save.js | |
*/ | |
save, | |
} ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* React hook that is used to mark the block wrapper element. | |
* It provides all the necessary props like the class name. | |
* | |
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops | |
*/ | |
import { useBlockProps } from '@wordpress/block-editor'; | |
/** | |
* The save function defines the way in which the different attributes should | |
* be combined into the final markup, which is then serialized by the block | |
* editor into `post_content`. | |
* | |
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save | |
* | |
* @return {Element} Element to render. | |
*/ | |
export default function save() { | |
return ( | |
<p { ...useBlockProps.save() }> | |
{ 'Example Static – hello from the saved content!' } | |
</p> | |
); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* The following styles get applied both on the front of your site | |
* and in the editor. | |
* | |
* Replace them with your own styles or remove the file completely. | |
*/ | |
.wp-block-create-block-example-static { | |
background-color: #21759b; | |
color: #fff; | |
padding: 2px; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Use this file for JavaScript code that you want to run in the front-end | |
* on posts/pages that contain this block. | |
* | |
* When this file is defined as the value of the `viewScript` property | |
* in `block.json` it will be enqueued on the front end of the site. | |
* | |
* Example: | |
* | |
* ```js | |
* { | |
* "viewScript": "file:./view.js" | |
* } | |
* ``` | |
* | |
* If you're not making any changes to this file because your project doesn't need any | |
* JavaScript running in the front-end, then you should delete this file and remove | |
* the `viewScript` property from `block.json`. | |
* | |
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script | |
*/ | |
/* eslint-disable no-console */ | |
console.log( 'Hello World! (from create-block-example-static block)' ); | |
/* eslint-enable no-console */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment