Hướng dẫn để tạo một trường số và lưu giá trị block Gutenberg (ok)

C:\xampp\htdocs\wordpress1\wp-content\plugins\basic\src\index.js

import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { useState } from '@wordpress/element';
import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
import { RichText } from '@wordpress/block-editor';
registerBlockType('basic/example-basic-esnext', {
  title: __('Basic (ESNext)', 'gutenberg-examples'),
  icon: 'universal-access-alt',
  category: 'layout',
  edit: ( props ) => {
    const { attributes: { content }, setAttributes, className } = props;
    const onChangeContent = ( newContent ) => {
      setAttributes( { content: newContent } );
    };
    return (
      <NumberControl className={ className } max={15} onChange={ onChangeContent } value={ content } />
    );
  },
  save: ( props ) => {
    return (
      <RichText.Content tagName="p" value={ props.attributes.content } />
    );
  },
});

C:\xampp\htdocs\wordpress1\wp-content\plugins\basic\package.json

{
	"name": "basic",
	"version": "1.1.0",
	"private": true,
	"description": "Example: Basic (ESNext).",
	"author": "The WordPress Contributors",
	"license": "GPL-2.0-or-later",
	"keywords": [
		"WordPress",
		"block"
	],
	"homepage": "https://github.com/WordPress/gutenberg-examples/",
	"repository": "git+https://github.com/WordPress/gutenberg-examples.git",
	"bugs": {
		"url": "https://github.com/WordPress/gutenberg-examples/issues"
	},
	"main": "build/index.js",
	"devDependencies": {
		"@wordpress/scripts": "^9.0.0"
	},
	"scripts": {
		"build": "wp-scripts build",
		"format:js": "wp-scripts format-js",
		"lint:js": "wp-scripts lint-js",
		"packages-update": "wp-scripts packages-update",
		"start": "wp-scripts start"
	}
}

C:\xampp\htdocs\wordpress1\wp-content\plugins\basic\index.php

<?php
/**
 * Plugin Name: Basic EsNext
 * Plugin URI: https://github.com/WordPress/gutenberg-examples
 * Description: This is a plugin demonstrating how to register new blocks for the Gutenberg editor.
 * Version: 1.1.0
 * Author: the Gutenberg Team
 *
 * @package gutenberg-examples
 */
defined( 'ABSPATH' ) || exit;
add_action( 'init', 'gutenberg_examples_01_esnext_register_block' );
function gutenberg_examples_01_esnext_register_block() {
	if ( ! function_exists( 'register_block_type' ) ) {
		return;
	}
	$asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');
	wp_register_script('gutenberg-examples-01-esnext',plugins_url( 'build/index.js', __FILE__ ),$asset_file['dependencies'],$asset_file['version']);
	wp_register_style('gutenberg-examples-01-back-end', plugins_url( 'editor.css', __FILE__ ), array( 'wp-edit-blocks' ), filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ));
	wp_register_style('gutenberg-examples-01-front-end',plugins_url( 'style.css', __FILE__ ), array( ), filemtime( plugin_dir_path( __FILE__ ) . 'style.css' ));
	register_block_type( 'basic/example-basic-esnext', array(
		'style' => 'gutenberg-examples-01-front-end',
		'editor_script' => 'gutenberg-examples-01-esnext',
		'editor_style' => 'gutenberg-examples-01-back-end'
	));
}

C:\xampp\htdocs\wordpress1\wp-content\plugins\basic\style.css

/**
 * Note that these styles are loaded *before* editor styles, so that
 * editor-specific styles using the same selectors will take precedence.
 */
.wp-block-basic-example-basic-esnext {
	color: darkred;
	background: #fcc;
	border: 2px solid #c99;
	padding: 20px;
}

C:\xampp\htdocs\wordpress1\wp-content\plugins\basic\editor.css

/**
 * Note that these styles are loaded *after* common styles, so that
 * editor-specific styles using the same selectors will take precedence.
 */
.wp-block-basic-example-basic-esnext {
	color: green;
	background: #cfc;
	border: 2px solid #9c9;
	padding: 20px;
}