[GENESIS] Gutenberg Examples Basic (ok)

C:\xampp\htdocs\reset\wp-content\plugins\lionel\lionel.php

<?php
/**
 * Plugin Name: Lionel
 * 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;
/**
 * Load all translations for our plugin from the MO file.
 */
add_action('init', 'gutenberg_examples_01_load_textdomain');
function gutenberg_examples_01_load_textdomain() {
  load_plugin_textdomain('gutenberg-examples', false, basename(__DIR__) . '/languages');
}
/**
 * Registers all block assets so that they can be enqueued through Gutenberg in
 * the corresponding context.
 *
 * Passes translations to JavaScript.
 */
function gutenberg_examples_01_register_block() {
  if (!function_exists('register_block_type')) {
    // Gutenberg is not active.
    return;
  }
  wp_register_script(
    'gutenberg-examples-01', plugins_url('block.js', __FILE__), array('wp-blocks', 'wp-i18n', 'wp-element'), filemtime(plugin_dir_path(__FILE__) . 'block.js')
  );
  register_block_type('gutenberg-examples/example-01-basic', array('editor_script' => 'gutenberg-examples-01'));
  if (function_exists('wp_set_script_translations')) {
    /**
     * May be extended to wp_set_script_translations( 'my-handle', 'my-domain',
     * plugin_dir_path( MY_PLUGIN ) . 'languages' ) ). For details see
     * https://make.wordpress.org/core/2018/11/09/new-javascript-i18n-support-in-wordpress/
     */
    wp_set_script_translations('gutenberg-examples-01', 'gutenberg-examples');
  }
}
add_action('init', 'gutenberg_examples_01_register_block');

C:\xampp\htdocs\reset\wp-content\plugins\lionel\block.js

/**
 * Hello World: Step 1
 *
 * Simple block, renders and saves the same content without interactivity.
 *
 * Using inline styles - no external stylesheet needed.  Not recommended
 * because all of these styles will appear in `post_content`.
 */
( function( blocks, i18n, element ) {
	var el = element.createElement;
	var __ = i18n.__;
	var blockStyle = {
		backgroundColor: '#900',
		color: '#fff',
		padding: '20px',
	};
	blocks.registerBlockType( 'gutenberg-examples/example-01-basic', {
		title: __( 'Example: Basic', 'gutenberg-examples' ),
		icon: 'universal-access-alt',
		category: 'layout',
		example: {},
		edit: function() {
			return el('p',{ style: blockStyle },'Hello World, step 1 (from the editor).');
		},
		save: function() {
			return el('p',{ style: blockStyle },'Hello World, step 1 (from the frontend).');
		},
	} );
} )( window.wp.blocks, window.wp.i18n, window.wp.element );

Last updated