Skip to content

Instantly share code, notes, and snippets.

@philipjohn
Created June 6, 2025 08:31
Show Gist options
  • Save philipjohn/6a18b582d58c2214535ec368d77cea39 to your computer and use it in GitHub Desktop.
Save philipjohn/6a18b582d58c2214535ec368d77cea39 to your computer and use it in GitHub Desktop.
RawHTML adds a wrapper div when it shouldn't
{
"plugins": [ "." ],
"themes": [ "WordPress/twentytwentyfive" ]
}
<?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' );
{
"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"
}
}
{
"$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"
}
/**
* 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 } />
);
}
/**
* 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;
}
/**
* 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,
} );
/**
* 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>
);
}
/**
* 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;
}
/**
* 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