Skip to content

Commit aadd8d8

Browse files
author
Ahmad Awais
committed
ADD: A Basic Custom Block 💯
1 parent 7f54184 commit aadd8d8

File tree

6 files changed

+262
-0
lines changed

6 files changed

+262
-0
lines changed

‎.gitignore‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# Packages #
2+
############
3+
*.7z
4+
*.dmg
5+
*.gz
6+
*.bz2
7+
*.iso
8+
*.jar
9+
*.rar
10+
*.tar
11+
*.zip
12+
*.tgz
13+
*.map
14+
15+
# Logs and databases #
16+
######################
17+
*.log
18+
*.sql
19+
20+
# OS generated files #
21+
######################
22+
**.DS_Store*
23+
ehthumbs.db
24+
Icon?
25+
Thumbs.db
26+
._*
27+
28+
# Vim generated files #
29+
######################
30+
*.un~
31+
32+
# SASS #
33+
##########
34+
**/.sass-cache
35+
**/.sass-cache/*
36+
**/.map
37+
38+
# Composer #
39+
##########
40+
vendors/composer/
41+
!assets/js/vendor/
42+
wpcs/
43+
composer.lock
44+
45+
# Bower #
46+
##########
47+
assets/bower_components/*
48+
49+
# Codekit #
50+
##########
51+
/codekit-config.json
52+
*.codekit
53+
**.codekit-cache/*
54+
55+
# NPM #
56+
##########
57+
node_modules
58+
59+
# Compiled Files and Build Dirs #
60+
##########
61+
/README.html
62+
/build/
63+
64+
# PhpStrom Project Files #
65+
.idea/
66+
library/vendors/composer
67+
assets/img/.DS_Store
68+
assets/sass/HTML
69+
assets/sass/Rails
70+
HTML
71+
Rails

‎block/01-basic/block.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/**
2+
* BLOCK: Basic
3+
*
4+
* Registering a basic block with Gutenberg.
5+
* Simple block, renders and saves the same content without any interactivity.
6+
*
7+
* Using inline styles - no external stylesheet needed. Not recommended!
8+
* because all of these styles will appear in `post_content`.
9+
*/
10+
( function() {
11+
var __ = wp.i18n.__;
12+
var el = wp.element.createElement;
13+
var registerBlockType = wp.blocks.registerBlockType;
14+
15+
/**
16+
* Register Basic Block.
17+
*
18+
* Registers a new block provided a unique name and an object defining its
19+
* behavior. Once registered, the block is made available as an option to any
20+
* editor interface where blocks are implemented.
21+
*
22+
* @param {string} name Block name.
23+
* @param {Object} settings Block settings.
24+
* @return {?WPBlock} The block, if it has been successfully
25+
* registered; otherwise `undefined`.
26+
*/
27+
registerBlockType( 'gb/01-basic', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
28+
title: __( 'Basic', 'GB' ), // Block title.
29+
icon: 'shield-alt', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
30+
category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
31+
32+
// The "edit" property must be a valid function.
33+
edit: function( props ) {
34+
// Creates a <p class='wp-block-gb-01-basic'></p>.
35+
return el(
36+
'p', // Tag type.
37+
{ className: props.className }, // The class="wp-block-gb-01-basic" : The class name is generated using the block's name prefixed with wp-block-, replacing the / namespace separator with a single -.
38+
'Hello World! — from the editor.' // Content inside the tag.
39+
);
40+
},
41+
42+
// The "save" property must be specified and must be a valid function.
43+
save: function( props ) {
44+
return el(
45+
'p', // Tag type.
46+
{ className: props.className }, // The class="wp-block-gb-01-basic" : The class name is generated using the block's name prefixed with wp-block-, replacing the / namespace separator with a single -.
47+
'Hello World! — from the frontend.' // Content inside the tag.
48+
);
49+
},
50+
} );
51+
})();

‎block/01-basic/editor.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* ----------------------------------------------------------------------------
3+
* #.# Editor CSS
4+
*
5+
* BLOCK: 01-basic block CSS for the editor.
6+
* ----------------------------------------------------------------------------
7+
*/
8+
9+
.wp-block-gb-01-basic {
10+
color: #000000;
11+
background: mistyrose;
12+
border: 0.2rem solid red;
13+
padding: 2rem;
14+
}

‎block/01-basic/index.php‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<?php
2+
/**
3+
* BLOCK: Basic
4+
*
5+
* A basic custom block definition for Gutenber.
6+
*
7+
* @since 1.0.0
8+
* @package GB
9+
*/
10+
11+
// Exit if accessed directly.
12+
if ( ! defined( 'ABSPATH' ) ) {
13+
exit;
14+
}
15+
16+
// Hook: Editor assets.
17+
add_action( 'enqueue_block_editor_assets', 'gb_block_01_basic_editor_assets' );
18+
19+
/**
20+
* Enqueue the block's assets for the editor.
21+
*
22+
* `wp-blocks`: includes block type registration and related functions.
23+
* `wp-element`: includes the WordPress Element abstraction for describing the structure of your blocks.
24+
* `wp-i18n`: To internationalize the block's. text.
25+
*
26+
* @since 1.0.0
27+
*/
28+
function gb_block_01_basic_editor_assets() {
29+
// Scripts.
30+
wp_enqueue_script(
31+
'gb-block-01-basic', // Handle.
32+
plugins_url( 'block.js', __FILE__ ), // Block.js: We register the block here.
33+
array( 'wp-blocks', 'wp-i18n', 'wp-element' ), // Dependencies, defined above.
34+
filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ) // filemtime — Gets file modification time.
35+
);
36+
37+
// Styles.
38+
wp_enqueue_style(
39+
'gb-block-01-basic-editor', // Handle.
40+
plugins_url( 'editor.css', __FILE__ ), // Block editor CSS.
41+
array( 'wp-edit-blocks' ), // Dependency to include the CSS after it.
42+
filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ) // filemtime — Gets file modification time.
43+
);
44+
} // End fucntion gb_block_01_basic_editor_assets().
45+
46+
47+
// Hook: Frontend assets.
48+
add_action( 'enqueue_block_assets', 'gb_block_01_basic_block_assets' );
49+
50+
/**
51+
* Enqueue the block's assets for the front end.
52+
*
53+
* `wp-blocks`: includes block type registration and related functions.
54+
* `wp-element`: includes the WordPress Element abstraction for describing the structure of your blocks.
55+
* `wp-i18n`: To internationalize the block's. text.
56+
*
57+
* @since 1.0.0
58+
*/
59+
function gb_block_01_basic_block_assets() {
60+
// Styles.
61+
wp_enqueue_style(
62+
'gb-block-01-basic-frontend', // Handle.
63+
plugins_url( 'style.css', __FILE__ ), // Block frontend CSS.
64+
array( 'wp-blocks' ), // Dependency to include the CSS after it.
65+
filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ) // filemtime — Gets file modification time.
66+
);
67+
} // End fucntion gb_block_01_basic_block_assets().

‎block/01-basic/style.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* ----------------------------------------------------------------------------
3+
* #.# Frontend CSS
4+
*
5+
* BLOCK: 01-basic block CSS for the frontend.
6+
* ----------------------------------------------------------------------------
7+
*/
8+
9+
.wp-block-gb-01-basic {
10+
color: #000000;
11+
background: gold;
12+
border: 0.2rem solid goldenrod;
13+
padding: 2rem;
14+
}

‎gutenberg-boilerplate.php‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<?php
2+
/**
3+
* Plugin Name: Gutenberg Boilerplate
4+
* Plugin URI: https://AhmadAwais.com/
5+
* Description: An ever growing Gutenberg boilerplate to help developers with extending Gutenberg editor. It's open source and hosted on GitHub. Consider to <a href="https://github.com/ahmadawais/Gutenberg-Boilerplate">🌟 Star it on GitHub</a> | <a href="https://github.com/ahmadawais">🎩 Follow Ahmad's Open Source Projects</a>.
6+
* Author: mrahmadawais, maedahbatool, WPTie
7+
* Author URI: https://AhmadAwais.com/
8+
* Version: 1.0.0
9+
* License: GPL2+
10+
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
11+
*
12+
* @package GB
13+
*/
14+
15+
// Exit if accessed directly.
16+
if ( ! defined( 'ABSPATH' ) ) {
17+
exit;
18+
}
19+
20+
/**
21+
* Define global constants.
22+
*
23+
* @since 1.0.0
24+
*/
25+
// Plugin version.
26+
if ( ! defined( 'GB_VERSION' ) ) {
27+
define( 'GB_VERSION', '1.0.0' );
28+
}
29+
30+
if ( ! defined( 'GB_NAME' ) ) {
31+
define( 'GB_NAME', trim( dirname( plugin_basename( __FILE__ ) ), '/' ) );
32+
}
33+
34+
if ( ! defined( 'GB_DIR' ) ) {
35+
define( 'GB_DIR', WP_PLUGIN_DIR . '/' . GB_NAME );
36+
}
37+
38+
if ( ! defined( 'GB_URL' ) ) {
39+
define( 'GB_URL', WP_PLUGIN_URL . '/' . GB_NAME );
40+
}
41+
42+
/**
43+
* BLOCK: Basic Block.
44+
*/
45+
require_once( GB_DIR . '/block/01-basic/index.php' );

0 commit comments

Comments
 (0)