├── README.md
├── my-block.js
└── plugin.php


/README.md:
--------------------------------------------------------------------------------
 1 | This repo contains the code from my video lesson about creating your first new custom block type in WordPress. Click above on the "plugin.php" or "my-block.js" files to view their source code that you can copy and paste from.
 2 | 
 3 | Below are links that I reference in the video:
 4 | 
 5 | * [Babel in-browser converter tool](https://babeljs.io/repl)
 6 | * [Create Guten Block automated workflow package](https://github.com/ahmadawais/create-guten-block)
 7 | 
 8 | ## Official WordPress Documentation Links
 9 | * [Creating Dynamic Blocks](https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/creating-dynamic-blocks/)
10 | * [Attributes / Working with Meta](https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-attributes/)
11 | * [Block Templates](https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-templates/)
12 | 


--------------------------------------------------------------------------------
/my-block.js:
--------------------------------------------------------------------------------
 1 | wp.blocks.registerBlockType('brad/border-box', {
 2 |   title: 'My Cool Border Box',
 3 |   icon: 'smiley',
 4 |   category: 'common',
 5 |   attributes: {
 6 |     content: {type: 'string'},
 7 |     color: {type: 'string'}
 8 |   },
 9 |   edit: function(props) {
10 |     function updateContent(event) {
11 |       props.setAttributes({content: event.target.value})
12 |     }
13 | 
14 |     function updateColor(value) {
15 |       props.setAttributes({color: value.hex})
16 |     }
17 | 
18 |     return wp.element.createElement(
19 |       "div",
20 |       null,
21 |       wp.element.createElement(
22 |         "h3",
23 |         null,
24 |         "Your Cool Border Box"
25 |       ),
26 |       wp.element.createElement("input", { type: "text", value: props.attributes.content, onChange: updateContent }),
27 |       wp.element.createElement(wp.components.ColorPicker, { color: props.attributes.color, onChangeComplete: updateColor })
28 |     );
29 |   },
30 |   save: function(props) {
31 |     return wp.element.createElement(
32 |       "h3",
33 |       { style: { border: "5px solid " + props.attributes.color } },
34 |       props.attributes.content
35 |     );
36 |   }
37 | })
38 | 


--------------------------------------------------------------------------------
/plugin.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /**
 4 |  * Plugin Name: My Cool Border Box
 5 |  * Author: Brad
 6 |  * Version: 1.0.0
 7 |  */
 8 | 
 9 | function loadMyBlockFiles() {
10 |   wp_enqueue_script(
11 |     'my-super-unique-handle',
12 |     plugin_dir_url(__FILE__) . 'my-block.js',
13 |     array('wp-blocks', 'wp-i18n', 'wp-editor'),
14 |     true
15 |   );
16 | }
17 |  
18 | add_action('enqueue_block_editor_assets', 'loadMyBlockFiles');
19 | 
20 | /* To make your block "dynamic" uncomment
21 |   the code below and in your JS have your "save"
22 |   method return null
23 | */
24 | 
25 | /*
26 | function borderBoxOutput($props) {
27 |   return '<h3 style="border: 5px solid' . $props['color'] . '">' . $props['content'] . '</h3>';
28 | }
29 | 
30 | register_block_type( 'brad/border-box', array(
31 |   'render_callback' => 'borderBoxOutput',
32 | ) );
33 | */
34 | 
35 | /* To Save Post Meta from your block uncomment
36 |   the code below and adjust the post type and
37 |   meta name values accordingly. If you want to
38 |   allow multiple values (array) per meta remove
39 |   the 'single' property.
40 | */
41 | 
42 | /*
43 | function myBlockMeta() {
44 |   register_meta('post', 'color', array('show_in_rest' => true, 'type' => 'string', 'single' => true));
45 | }
46 | 
47 | add_action('init', 'myBlockMeta');
48 | */


--------------------------------------------------------------------------------