[GENESIS] Gutenberg Examples Recipe Card (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_05_load_textdomain' );
function gutenberg_examples_05_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_05_register_block() {
	if ( ! function_exists( 'register_block_type' ) ) {
		// Gutenberg is not active.
		return;
	}
	wp_register_script(
		'gutenberg-examples-05',
		plugins_url( 'block.js', __FILE__ ),
		array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor', 'underscore' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
	);
	wp_register_style(
		'gutenberg-examples-05',
		plugins_url( 'style.css', __FILE__ ),
		array( ),
		filemtime( plugin_dir_path( __FILE__ ) . 'style.css' )
	);
	register_block_type( 'gutenberg-examples/example-05-recipe-card', array(
		'style' => 'gutenberg-examples-05',
		'editor_script' => 'gutenberg-examples-05',
	) );
  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-05', 'gutenberg-examples' );
  }
}
add_action( 'init', 'gutenberg_examples_05_register_block' );

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-05-recipe-card .recipe-image {
	background: #f1f1f1;
	float: right;
	width: 50%;
	min-height: 100px;
	text-align: center;
}

.wp-block-gutenberg-examples-example-05-recipe-card .recipe-image button {
	margin-top: 30px;
}

.wp-block-gutenberg-examples-example-05-recipe-card .recipe-image button.image-button {
	margin: 0;
	padding: 0;
	display: block;
}

.wp-block-gutenberg-examples-example-05-recipe-card .recipe-image img {
	display: block;
	z-index: 1;
	position: relative;
}

.wp-block-gutenberg-examples-example-05-recipe-card h2 {
	font-size: 1.5em;
}

.wp-block-gutenberg-examples-example-05-recipe-card ul {
	padding-left: 2.5em !important; /* Needs fix in Gutenberg. */
}

.wp-block-gutenberg-examples-example-05-recipe-card:after { 
	content:""; 
	clear:both; 
	display: table; 
}

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

(function(blocks, editor, i18n, element, components, _) {
  var __ = i18n.__;
  var el = element.createElement;
  var RichText = editor.RichText;
  var MediaUpload = editor.MediaUpload;
  blocks.registerBlockType('gutenberg-examples/example-05-recipe-card', {
    title: __('Example: Recipe Card', 'gutenberg-examples'),
    icon: 'index-card',
    category: 'layout',
    attributes: {
      title: {
        type: 'array',
        source: 'children',
        selector: 'h2',
      },
      mediaID: {
        type: 'number',
      },
      mediaURL: {
        type: 'string',
        source: 'attribute',
        selector: 'img',
        attribute: 'src',
      },
      ingredients: {
        type: 'array',
        source: 'children',
        selector: '.ingredients',
      },
      instructions: {
        type: 'array',
        source: 'children',
        selector: '.steps',
      },
    },
    example: {
      attributes: {
        title: __('Chocolate Chip Cookies', 'gutenberg-examples'),
        mediaURL: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/2ChocolateChipCookies.jpg/320px-2ChocolateChipCookies.jpg',
        ingredients: [
          __('flour', 'gutenberg-examples'),
          __('sugar', 'gutenberg-examples'),
          __('chocolate', 'gutenberg-examples'),
          '💖',
        ],
        instructions: [
          __('Mix', 'gutenberg-examples'),
          __('Bake', 'gutenberg-examples'),
          __('Enjoy', 'gutenberg-examples'),
        ],
      },
    },
    edit: function(props) {
      var attributes = props.attributes;
      var onSelectImage = function(media) {
        return props.setAttributes({
          mediaURL: media.url,
          mediaID: media.id,
        });
      };
      return el(
        'div', { className: props.className },
        el(RichText, {
          tagName: 'h2',
          inline: true,
          placeholder: __(
            'Write Recipe title…',
            'gutenberg-examples'
          ),
          value: attributes.title,
          onChange: function(value) {
            props.setAttributes({ title: value });
          },
        }),
        el(
          'div', { className: 'recipe-image' },
          el(MediaUpload, {
            onSelect: onSelectImage,
            allowedTypes: 'image',
            value: attributes.mediaID,
            render: function(obj) {
              return el(
                components.Button, {
                  className: attributes.mediaID ?
                    'image-button' :
                    'button button-large',
                  onClick: obj.open,
                },
                !attributes.mediaID ?
                __('Upload Image', 'gutenberg-examples') :
                el('img', { src: attributes.mediaURL })
              );
            },
          })
        ),
        el('h3', {}, i18n.__('Ingredients', 'gutenberg-examples')),
        el(RichText, {
          tagName: 'ul',
          multiline: 'li',
          placeholder: i18n.__(
            'Write a list of ingredients…',
            'gutenberg-examples'
          ),
          value: attributes.ingredients,
          onChange: function(value) {
            props.setAttributes({ ingredients: value });
          },
          className: 'ingredients',
        }),
        el('h3', {}, i18n.__('Instructions', 'gutenberg-examples')),
        el(RichText, {
          tagName: 'div',
          inline: false,
          placeholder: i18n.__(
            'Write instructions…',
            'gutenberg-examples'
          ),
          value: attributes.instructions,
          onChange: function(value) {
            props.setAttributes({ instructions: value });
          },
        })
      );
    },
    save: function(props) {
      var attributes = props.attributes;
      return el(
        'div', { className: props.className },
        el(RichText.Content, {
          tagName: 'h2',
          value: attributes.title,
        }),
        attributes.mediaURL &&
        el(
          'div', { className: 'recipe-image' },
          el('img', { src: attributes.mediaURL })
        ),
        el('h3', {}, i18n.__('Ingredients', 'gutenberg-examples')),
        el(RichText.Content, {
          tagName: 'ul',
          className: 'ingredients',
          value: attributes.ingredients,
        }),
        el('h3', {}, i18n.__('Instructions', 'gutenberg-examples')),
        el(RichText.Content, {
          tagName: 'div',
          className: 'steps',
          value: attributes.instructions,
        })
      );
    },
  });
})(
  window.wp.blocks,
  window.wp.editor,
  window.wp.i18n,
  window.wp.element,
  window.wp.components,
  window._
);