Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use webpack-config with wp-scritps #6

Merged
merged 13 commits into from
Feb 21, 2019
Merged
1 change: 1 addition & 0 deletions webpack-config/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
package-lock=false
3 changes: 3 additions & 0 deletions webpack-config/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## webpack config example plugin

WordPress plugin to showcase how to work with webpack-config package.
126 changes: 126 additions & 0 deletions webpack-config/build/index.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions webpack-config/build/index.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

22 changes: 22 additions & 0 deletions webpack-config/index.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<?php

/**
* Plugin Name: Understanding Gutenberg: webpack-config
* Plugin URI: https://github.com/nosolosw/understanding-gutenberg
* Description: Plugin to showcase how to work with webpack-config.
* Version: 0.0.1
*/

function webpack_config_plugin_script_register() {
wp_register_script(
'webpack-config-plugin-block',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-blocks', 'wp-element' )
);
}
add_action( 'init', 'webpack_config_plugin_script_register' );

function webpack_config_plugin_script_enqueue() {
wp_enqueue_script( 'webpack-config-plugin-block' );
}
add_action( 'enqueue_block_editor_assets', 'webpack_config_plugin_script_enqueue' );
29 changes: 29 additions & 0 deletions webpack-config/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"name": "webpack-config",
"version": "1.0.0",
"description": "Plugin to showcase how to work with webpack-config.",
"author": "WordPress contributors",
"license": "GPL-2.0-or-later",
"keywords": [
"wordpress",
"webpack-config"
],
"homepage": "https://github.com/nosolosw/understanding-gutenberg#readme",
"repository": {
"type": "git",
"url": "git+https://github.com/nosolosw/understanding-gutenberg.git"
},
"bugs": {
"url": "https://github.com/nosolosw/understanding-gutenberg/issues"
},
"main": "index.js",
"devDependencies": {
"@wordpress/scripts": "file:../../gutenberg/packages/scripts"
},
"scripts": {
"analyze": "GUTENBERG_BUNDLE_ANALYZER=true wp-scripts build",
"start": "wp-scripts start",
"build": "wp-scripts build"
},
"dependencies": {}
}
22 changes: 22 additions & 0 deletions webpack-config/src/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { createElement } from '@wordpress/element';
import { registerBlockType } from '@wordpress/blocks';

registerBlockType( 'blockexample-plugin/block', {
title: 'Love',
icon: 'heart',
category: 'common',
edit: function() {
return ( createElement(
Copy link

@gziolo gziolo Feb 21, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Step 2, start using JSX in here without having to import createElement explicitly :)

'p',
{},
'I ♥ Gutenberg.'
) );
},
save: function() {
return ( createElement(
'p',
{},
'I ♥ .'
) );
},
} );
3 changes: 3 additions & 0 deletions webpack-config/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
const config = require( '@wordpress/scripts/config/webpack.config.js' );
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Next step, get rid of this file altogether :)

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


module.exports = Object.assign( {}, config );