Skip to content

Commit

Permalink
ADD: 02-Basic-Block-ESNext 💯
Browse files Browse the repository at this point in the history
  • Loading branch information
Ahmad Awais committed Jul 13, 2017
1 parent 83dae26 commit 5cff38a
Show file tree
Hide file tree
Showing 12 changed files with 4,390 additions and 4 deletions.
9 changes: 5 additions & 4 deletions block/01-basic/block.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@
* Registering a basic block with Gutenberg.
* Simple block, renders and saves the same content without any interactivity.
*
* Using inline styles - no external stylesheet needed. Not recommended!
* because all of these styles will appear in `post_content`.
* Styles:
* editor.css — Editor styles for the block.
* style.css — Frontend styles for the block.
*/
( function() {
var __ = wp.i18n.__;
Expand Down Expand Up @@ -35,7 +36,7 @@
return el(
'p', // Tag type.
{ 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 -.
'Hello World! — from the editor.' // Content inside the tag.
'Hello World! — from the editor (01 Basic Block).' // Content inside the tag.
);
},

Expand All @@ -44,7 +45,7 @@
return el(
'p', // Tag type.
{ 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 -.
'Hello World! — from the frontend.' // Content inside the tag.
'Hello World! — from the frontend (01 Basic Block).' // Content inside the tag.
);
},
} );
Expand Down
23 changes: 23 additions & 0 deletions block/02-basic-esnext/.babelrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"presets": [
[ "env", {
"modules": false,
"targets": {
"browsers": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Safari versions",
"last 2 iOS versions",
"last 1 Android version",
"last 1 ChromeAndroid version",
"ie 11"
]
}
} ]
],
"plugins": [
[ "transform-react-jsx", {
"pragma": "wp.element.createElement"
} ]
]
}
71 changes: 71 additions & 0 deletions block/02-basic-esnext/.gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
# Packages #
############
*.7z
*.dmg
*.gz
*.bz2
*.iso
*.jar
*.rar
*.tar
*.zip
*.tgz
*.map

# Logs and databases #
######################
*.log
*.sql

# OS generated files #
######################
**.DS_Store*
ehthumbs.db
Icon?
Thumbs.db
._*

# Vim generated files #
######################
*.un~

# SASS #
##########
**/.sass-cache
**/.sass-cache/*
**/.map

# Composer #
##########
vendors/composer/
!assets/js/vendor/
wpcs/
composer.lock

# Bower #
##########
assets/bower_components/*

# Codekit #
##########
/codekit-config.json
*.codekit
**.codekit-cache/*

# NPM #
##########
node_modules

# Compiled Files and Build Dirs #
##########
/README.html
/build/

# PhpStrom Project Files #
.idea/
library/vendors/composer
assets/img/.DS_Store
assets/sass/HTML
assets/sass/Rails
HTML
Rails
122 changes: 122 additions & 0 deletions block/02-basic-esnext/block.build.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {

/**
* BLOCK: Basic with ESNext
*
* Registering a basic block with Gutenberg.
* Simple block, renders and saves the same content without any interactivity.
*
* Using inline styles - no external stylesheet needed. Not recommended!
* because all of these styles will appear in `post_content`.
*/

var __ = wp.i18n.__;
var registerBlockType = wp.blocks.registerBlockType;

/**
* Register Basic Block.
*
* Registers a new block provided a unique name and an object defining its
* behavior. Once registered, the block is made available as an option to any
* editor interface where blocks are implemented.
*
* @param {string} name Block name.
* @param {Object} settings Block settings.
* @return {?WPBlock} The block, if it has been successfully
* registered; otherwise `undefined`.
*/

registerBlockType('gb/02-basic-esnext', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
title: __('Basic ESNext', 'GB'), // Block title.
icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.

// The "edit" property must be a valid function.
edit: function edit(props) {
// Creates a <p class='wp-block-gb-01-basic'></p>.
return wp.element.createElement(
'p',
{ className: props.className },
'Hello World! \u2014 from the editor (02 Basic Block ESNext).'
);
},

// The "save" property must be specified and must be a valid function.
save: function save(props) {
return wp.element.createElement(
'p',
{ className: props.className },
'Hello World! \u2014 from the frontend (02 Basic Block ESNext).'
);
}
});

/***/ })
/******/ ]);
45 changes: 45 additions & 0 deletions block/02-basic-esnext/block.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
/**
* BLOCK: Basic with ESNext
*
* Registering a basic block with Gutenberg.
* Simple block, renders and saves the same content without any interactivity.
*
* Using inline styles - no external stylesheet needed. Not recommended!
* because all of these styles will appear in `post_content`.
*/

const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks

/**
* Register Basic Block.
*
* Registers a new block provided a unique name and an object defining its
* behavior. Once registered, the block is made available as an option to any
* editor interface where blocks are implemented.
*
* @param {string} name Block name.
* @param {Object} settings Block settings.
* @return {?WPBlock} The block, if it has been successfully
* registered; otherwise `undefined`.
*/
registerBlockType( 'gb/02-basic-esnext', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
title: __( 'Basic ESNext', 'GB' ), // Block title.
icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.

// The "edit" property must be a valid function.
edit: function( props ) {
// Creates a <p class='wp-block-gb-01-basic'></p>.
return (
<p className={ props.className }>Hello World! — from the editor (02 Basic Block ESNext).</p>
);
},

// The "save" property must be specified and must be a valid function.
save: function( props ) {
return (
<p className={ props.className }>Hello World! — from the frontend (02 Basic Block ESNext).</p>
);
},
} );
14 changes: 14 additions & 0 deletions block/02-basic-esnext/editor.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* ----------------------------------------------------------------------------
* #.# Editor CSS
*
* BLOCK: 02-basic-esnext block CSS for the editor.
* ----------------------------------------------------------------------------
*/

.wp-block-gb-02-basic-esnext {
color: #000000;
background: #BADA55;
border: 0.2rem solid green;
padding: 2rem;
}
67 changes: 67 additions & 0 deletions block/02-basic-esnext/index.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<?php
/**
* BLOCK: Basic
*
* A basic custom block definition for Gutenber.
*
* @since 1.0.0
* @package GB
*/

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
exit;
}

// Hook: Editor assets.
add_action( 'enqueue_block_editor_assets', 'gb_block_02_basic_esnext_editor_assets' );

/**
* Enqueue the block's assets for the editor.
*
* `wp-blocks`: includes block type registration and related functions.
* `wp-element`: includes the WordPress Element abstraction for describing the structure of your blocks.
* `wp-i18n`: To internationalize the block's. text.
*
* @since 1.0.0
*/
function gb_block_02_basic_esnext_editor_assets() {
// Scripts.
wp_enqueue_script(
'gb-block-02-basic-esnext', // Handle.
plugins_url( 'block.build.js', __FILE__ ), // Block.build.js: We register the block here. Built with Webpack.
array( 'wp-blocks', 'wp-i18n', 'wp-element' ), // Dependencies, defined above.
filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ) // filemtime — Gets file modification time.
);

// Styles.
wp_enqueue_style(
'gb-block-02-basic-esnext-editor', // Handle.
plugins_url( 'editor.css', __FILE__ ), // Block editor CSS.
array( 'wp-edit-blocks' ), // Dependency to include the CSS after it.
filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ) // filemtime — Gets file modification time.
);
} // End fucntion gb_block_02_basic_esnext_editor_assets().


// Hook: Frontend assets.
add_action( 'enqueue_block_assets', 'gb_block_02_basic_esnext_block_assets' );

/**
* Enqueue the block's assets for the front end.
*
* `wp-blocks`: includes block type registration and related functions.
* `wp-element`: includes the WordPress Element abstraction for describing the structure of your blocks.
* `wp-i18n`: To internationalize the block's. text.
*
* @since 1.0.0
*/
function gb_block_02_basic_esnext_block_assets() {
// Styles.
wp_enqueue_style(
'gb-block-02-basic-esnext-frontend', // Handle.
plugins_url( 'style.css', __FILE__ ), // Block frontend CSS.
array( 'wp-blocks' ), // Dependency to include the CSS after it.
filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ) // filemtime — Gets file modification time.
);
} // End fucntion gb_block_02_basic_esnext_block_assets().
Loading

0 comments on commit 5cff38a

Please sign in to comment.