[GENESIS] Gutenberg Examples Basic (ok)
Previous[GENESIS] Custom Genesis Frameowrk Child Theme (ok)Next[GENESIS] Gutenberg Examples Stylesheets (ok)
Last updated
Last updated
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 );