The key to creating a Gutenberg block is to understand its basic structure and correctly connect front and back end resources. 1. Prepare the development environment: install local WordPress, Node.js and @wordpress/scripts; 2. Use PHP to register blocks and define the editing and display logic of blocks in JavaScript; 3. Build JS files through npm to make changes take effect; 4. Check whether the path and icons are correct when encountering problems or use real-time listening to build to avoid repeated manual compilation. Following these steps, a simple Gutenberg block can be implemented step by step.
Creating a simple Gutenberg block is not really difficult, especially if you are already familiar with the basic development process of WordPress. Gutenberg is the new editor of WordPress, which organizes content through "blocks", each block is an independent content unit. If you want to customize your own block, you can start from the most basic one and implement it step by step.
Here are some practical steps and suggestions to help you get started quickly.
Preparation: Set up a development environment
Before you start writing code, make sure you have a WordPress environment suitable for development. You can use local development tools such as Local or XAMPP to build a test site.
- Install the latest version of WordPress
- Install Node.js and npm (for building JavaScript files)
- Install the
@wordpress/scriptspackage, which is the official recommended script tool set
You can install the necessary dependencies through the following command:
npm install --save-dev @wordpress/scripts
Then, create a directory in your theme or plugin to store block code, such as /blocks/my-first-block/ .
Create basic structure: register blocks and edit components
A Gutenberg block is usually composed of two parts: PHP is used to register blocks , and JavaScript is used to define the appearance and behavior of blocks .
PHP section (registration block)
Add the following code to your theme functions.php file, or load it in the plugin:
function register_my_first_block() {
wp_register_script(
'my-first-block',
get_template_directory_uri() . '/blocks/my-first-block/build/index.js',
array( 'wp-blocks', 'wp-element' )
);
register_block_type( 'my-plugin/first-block', array(
'editor_script' => 'my-first-block',
) );
}
add_action( 'init', 'register_my_first_block' );This code tells WordPress where the JS script for this block is and registers a new block type.
JavaScript section (definition block)
Write the following content in /blocks/my-first-block/src/index.js :
const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;
registerBlockType( 'my-plugin/first-block', {
title: 'My first block',
icon: 'smiley',
category: 'common',
edit: () => {
Return (
<RichText
tagName="p"
placeholder="Enter some text..."
/>
);
},
save: () => {
return <RichText.Content tagName="p" value="This is a static text" />;
},
} );This way you create a block that you can see in the editor.
Build and run: Compile JS files with npm
The Gutenberg block requires JavaScript to be compiled into a format that the browser can recognize. You can use the scripting tools provided by WordPress to automate this process.
Create a package.json file in the project root directory and add the following configuration:
{
"name": "my-first-block",
"version": "1.0.0",
"scripts": {
"build": "wp-scripts build ./blocks/my-first-block/src/index.js"
}
}Then run:
npm run build
After each time you modify the JS file, you must re-run the build command to make the changes take effect.
Tips and FAQs
The icon cannot be displayed? You can use the icon name in WordPress Dashicons .
Blocks are not displayed? Check whether JS compiles successfully and whether the PHP registration path is correct.
Don't want to compile manually every time? You can add
--watchparameter to listen to file changes in real time and automatically build:npx wp-scripts build ./blocks/my-first-block/src/index.js --watch
Basically that's it. The key to creating a Gutenberg block from scratch is to understand the basic structure of the block and how to connect front and back end resources. Although it seems a bit complicated, you can quickly grasp it by just taking it step by step.
The above is the detailed content of How to create a simple Gutenberg block. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
How to minify JavaScript files in WordPress
Jul 07, 2025 am 01:11 AM
Miniving JavaScript files can improve WordPress website loading speed by removing blanks, comments, and useless code. 1. Use cache plug-ins that support merge compression, such as W3TotalCache, enable and select compression mode in the "Minify" option; 2. Use a dedicated compression plug-in such as FastVelocityMinify to provide more granular control; 3. Manually compress JS files and upload them through FTP, suitable for users familiar with development tools. Note that some themes or plug-in scripts may conflict with the compression function, and you need to thoroughly test the website functions after activation.
How to prevent comment spam programmatically
Jul 08, 2025 am 12:04 AM
The most effective way to prevent comment spam is to automatically identify and intercept it through programmatic means. 1. Use verification code mechanisms (such as Googler CAPTCHA or hCaptcha) to effectively distinguish between humans and robots, especially suitable for public websites; 2. Set hidden fields (Honeypot technology), and use robots to automatically fill in features to identify spam comments without affecting user experience; 3. Check the blacklist of comment content keywords, filter spam information through sensitive word matching, and pay attention to avoid misjudgment; 4. Judge the frequency and source IP of comments, limit the number of submissions per unit time and establish a blacklist; 5. Use third-party anti-spam services (such as Akismet, Cloudflare) to improve identification accuracy. Can be based on the website
How to enqueue assets for a Gutenberg block
Jul 09, 2025 am 12:14 AM
When developing Gutenberg blocks, the correct method of enqueue assets includes: 1. Use register_block_type to specify the paths of editor_script, editor_style and style; 2. Register resources through wp_register_script and wp_register_style in functions.php or plug-in, and set the correct dependencies and versions; 3. Configure the build tool to output the appropriate module format and ensure that the path is consistent; 4. Control the loading logic of the front-end style through add_theme_support or enqueue_block_assets to ensure that the loading logic of the front-end style is ensured.
How to add custom rewrite rules
Jul 08, 2025 am 12:11 AM
The key to adding custom rewrite rules in WordPress is to use the add_rewrite_rule function and make sure the rules take effect correctly. 1. Use add_rewrite_rule to register the rule, the format is add_rewrite_rule($regex,$redirect,$after), where $regex is a regular expression matching URL, $redirect specifies the actual query, and $after controls the rule location; 2. Custom query variables need to be added through add_filter; 3. After modification, the fixed link settings must be refreshed; 4. It is recommended to place the rule in 'top' to avoid conflicts; 5. You can use the plug-in to view the current rule for convenience
How to optimize WordPress robots txt
Jul 13, 2025 am 12:37 AM
robots.txt is crucial to the SEO of WordPress websites, and can guide search engines to crawl behavior, avoid duplicate content and improve efficiency. 1. Block system paths such as /wp-admin/ and /wp-includes/, but avoid accidentally blocking the /uploads/ directory; 2. Add Sitemap paths such as Sitemap: https://yourdomain.com/sitemap.xml to help search engines quickly discover site maps; 3. Limit /page/ and URLs with parameters to reduce crawler waste, but be careful not to block important archive pages; 4. Avoid common mistakes such as accidentally blocking the entire site, cache plug-in affecting updates, and ignoring the matching of mobile terminals and subdomains.
How to profile WordPress performance
Jul 07, 2025 am 12:43 AM
1. Use performance analysis plug-in to quickly locate problems. For example, QueryMonitor can view the number of database queries and PHP errors, BlackboxProfiler generates function execution reports, and NewRelic provides server-level analysis; 2. Analyzing PHP execution performance requires checking time-consuming functions, debugging tools usage and memory allocation, such as Xdebug generates flame graphs to assist in optimization; 3. Monitor database query efficiency can be checked through slow query logs and index checks, QueryMonitor can list all SQL and sort by time; 4. Combining external tools such as GooglePageSpeedInsights, GTmetrix and WebPageTest to evaluate front-end plus
What is the minimum PHP version for WordPress
Jul 10, 2025 am 11:21 AM
WordPressrequiresatleastPHP7.4,thoughusing8.0orhigherisrecommendedforbetterperformanceandsecurity.Olderversionslike5.6areoutdated,unsupported,andposesecurityrisks.UsingupdatedPHPimprovessecurity,enhancesperformance,andensurescompatibilitywithmodernpl
How to use InspectorControls in Gutenberg
Jul 12, 2025 am 12:16 AM
InspectorControls is a component used in Gutenberg development to add custom controls in the right sidebar. 1. It belongs to the @wordpress/block-editor package. 2. It is often used with PanelBody, TextControl and other components. 3. When using it, you need to introduce and reasonably lay out control types such as text boxes, pull-down selections, switches, sliders and color selectors in edit.js. 4. Pay attention to grouping settings, keep them simple, support internationalization and optimize performance.
