[GENESIS] Gutenberg Examples Controls (ok)

C:\xampp\htdocs\reset\wp-content\plugins\lionel\index.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_04_load_textdomain' );

function gutenberg_examples_04_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_04_register_block() {

	if ( ! function_exists( 'register_block_type' ) ) {
		// Gutenberg is not active.
		return;
	}

	wp_register_script(
		'gutenberg-examples-04',
		plugins_url( 'block.js', __FILE__ ),
		array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
	);

	wp_register_style(
		'gutenberg-examples-04-editor',
		plugins_url( 'editor.css', __FILE__ ),
		array( 'wp-edit-blocks' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' )
	);

	wp_register_style(
		'gutenberg-examples-04',
		plugins_url( 'style.css', __FILE__ ),
		array( ),
		filemtime( plugin_dir_path( __FILE__ ) . 'style.css' )
	);

	register_block_type( 'gutenberg-examples/example-04-controls', array(
		'style' => 'gutenberg-examples-04',
		'editor_style' => 'gutenberg-examples-04-editor',
		'editor_script' => 'gutenberg-examples-04',
	) );

  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-04', 'gutenberg-examples' );
  }

}
add_action( 'init', 'gutenberg_examples_04_register_block' );

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

/**
 * Hello World: Step 4
 *
 * Adding extra controls: built-in alignment toolbar.
 */
( function( blocks, editor, i18n, element ) {
	var el = element.createElement;
	var __ = i18n.__;
	var RichText = editor.RichText;
	var AlignmentToolbar = editor.AlignmentToolbar;
	var BlockControls = editor.BlockControls;
	blocks.registerBlockType( 'gutenberg-examples/example-04-controls', {
		title: __( 'Example: Controls', 'gutenberg-examples' ),
		icon: 'universal-access-alt',
		category: 'layout',
		attributes: {
			content: {
				type: 'array',
				source: 'children',
				selector: 'p',
			},
			alignment: {
				type: 'string',
				default: 'none',
			},
		},
		example: {
			attributes: {
				content: __( 'Hello world' ),
				alignment: 'right',
			},
		},
		edit: function( props ) {
			var content = props.attributes.content;
			var alignment = props.attributes.alignment;
			function onChangeContent( newContent ) {
				props.setAttributes( { content: newContent } );
			}
			function onChangeAlignment( newAlignment ) {
				props.setAttributes( {
					alignment:
						newAlignment === undefined ? 'none' : newAlignment,
				} );
			}
			return [
				el(
					BlockControls,
					{ key: 'controls' },
					el( AlignmentToolbar, {
						value: alignment,
						onChange: onChangeAlignment,
					} )
				),
				el( RichText, {
					key: 'richtext',
					tagName: 'p',
					style: { textAlign: alignment },
					className: props.className,
					onChange: onChangeContent,
					value: content,
				} ),
			];
		},
		save: function( props ) {
			return el( RichText.Content, {
				tagName: 'p',
				className:
					'gutenberg-examples-align-' + props.attributes.alignment,
				value: props.attributes.content,
			} );
		},
	} );
} )( window.wp.blocks, window.wp.editor, window.wp.i18n, window.wp.element );

C:\xampp\htdocs\reset\wp-content\plugins\lionel\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-gutenberg-examples-example-04-controls {
	color: #fff;
	background: #00a8db;
	border: 2px solid #0D72B2;
	padding: 20px;
	font-family: sans-serif;
}

C:\xampp\htdocs\reset\wp-content\plugins\lionel\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-gutenberg-examples-example-04-controls {
	color: darkred;
	background: #fcc;
	border: 2px solid #c99;
	padding: 20px;
}

.gutenberg-examples-align-left {
	text-align: left;
}

.gutenberg-examples-align-center {
	text-align: center;
}

.gutenberg-examples-align-right {
	text-align: right;
}