Gutenberg Plugin Creation Structure and Files

Gutenberg Plugin Creation Structure and Files

By : user2185230
Date : November 21 2020, 04:01 AM
This might help you I've recently used that same boilerplate, and FYI, the package.json isn't well structured and has some old dependencies. I had to change some code in that file in order to get it to work. Here is my package.json:
code :
    "name": "gutenberg-boilerplate",
    "scripts": {
        "dev": "cross-env BABEL_ENV=default webpack --watch"
    "description": "This plugin add meta boxes in gutenberg's sidebar",
    "main": "src/index.js",
    "devDependencies": {
        "@babel/core": "^7.2.2",
        "@babel/preset-env": "^7.2.0",
        "babel-core": "^6.26.3",
        "babel-loader": "^8.0.4",
        "babel-plugin-add-module-exports": "^1.0.0",
        "babel-plugin-transform-react-jsx": "^6.24.1",
        "babel-preset-env": "^1.7.0",
        "browser-sync": "^2.18.13",
        "browser-sync-webpack-plugin": "^1.2.0",
        "classnames": "^2.2.5",
        "cross-env": "^5.1.1",
        "css-loader": "^0.28.7",
        "eslint": "^4.14.0",
        "eslint-config-prettier": "^2.9.0",
        "eslint-config-wordpress": "^2.0.0",
        "eslint-plugin-prettier": "^2.7.0",
        "extract-text-webpack-plugin": "^3.0.2",
        "node-sass": "^4.7.2",
        "postcss-loader": "^2.0.9",
        "prettier": "^1.15.3",
        "raw-loader": "^0.5.1",
        "sass-loader": "^6.0.6",
        "style-loader": "^0.19.1",
        "webpack": "^3.10.0"
    "version": "1.0.0",
    "license": "MIT"
  "presets": ["@babel/preset-env"],
  "plugins": [
    ["transform-react-jsx", {
      "pragma": "wp.element.createElement"
const path = require( 'path' );
const webpack = require( 'webpack' );
const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
// const BrowserSyncPlugin = require( 'browser-sync-webpack-plugin' );

// Set different CSS extraction for editor only and common block styles
const blockCSSPlugin = new ExtractTextPlugin( {
  filename: './dist/block.css',
} );

// Configuration for the ExtractTextPlugin.
const extractConfig = {
  use: [
    { loader: 'raw-loader' },
      loader: 'postcss-loader',
      options: {
        plugins: [ require( 'autoprefixer' ) ],
      loader: 'sass-loader',
      query: {
          'production' === process.env.NODE_ENV ? 'compressed' : 'nested',

module.exports = {
  entry: {
    './dist/block' : './src/index.js',
  output: {
    path: path.resolve( __dirname ),
    filename: '[name].js',
  watch: true,
  devtool: 'cheap-eval-source-map',
  module: {
    rules: [
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
        test: /style\.s?css$/,
        use: blockCSSPlugin.extract( extractConfig ),
  plugins: [
"scripts": {
        "dev": "cross-env BABEL_ENV=default webpack --watch"

Share : facebook icon twitter icon
How to implement the creation of folders structure for uploaded files on php

How to implement the creation of folders structure for uploaded files on php

By : Harold Terah
Date : March 29 2020, 07:55 AM
it helps some times One approach is to keep a running total of all uploads, (atomically) increasing it for each upload.
Then the directory can be created like so:
code :
$dir = sprintf('/uploads/%d/%d', floor($total / 1000), $total % 1000);
if (!file_exists($dir)) {
    mkdir($dir, 0755, true);
Unpack a tar without creation of new directories, only merge new files from tar into existing directory structure

Unpack a tar without creation of new directories, only merge new files from tar into existing directory structure

Date : March 29 2020, 07:55 AM
like below fixes the issue Situation:
code :
for d in $(ls -d /home/bob/*/); do tar -x -k -f /tmp/test.tar  ${d}/* ; done
Include Gutenberg scss Variables in Custom Gutenberg Block

Include Gutenberg scss Variables in Custom Gutenberg Block

By : madduriaravind
Date : March 29 2020, 07:55 AM
seems to work fine That is not possible unless you copied the exact file and referred to it like this inside your scss file
code :
@import "./variables";
import "~@wordpress/assets/styles/variables"
Is the creation of a zip file, out of the structure of folders and files, possible in WIX?

Is the creation of a zip file, out of the structure of folders and files, possible in WIX?

By : Yasunori Beppu
Date : March 29 2020, 07:55 AM
To fix the issue you can do Administrative Installation: Windows Installer / MSI features a built-in capability to extract all files and make a "network installation point" (a network location where installation can be kicked off from to install on all workstations on the network - ensures all source files are available for repair operations and patching). This is called an administrative installation - in plain terms a glorified file extraction mechanism.
Given the availability of the administrative installation, is a ZIP file really necessary? I suppose you could zip up the extracted admin image? Note that any files that need to go to system, shared or userprofile folders may cause issues and prevent successful launching of your application from the extraction folder (obvious, just mentioning).
code :
msiexec.exe /a MySetup.msi 
Include image assets in a WordPress Gutenberg Block Plugin

Include image assets in a WordPress Gutenberg Block Plugin

By : user3047313
Date : March 29 2020, 07:55 AM
it should still fix some issue I'm still looking into whether there's an official Gutenberg way to do this, but for now I've got this working in my plugin with wp_localize_script.
This works to pass data from PHP into enqueued Javascript so that data usually only accessible in PHP is accessible in Javascript as well.
code :
    plugins_url( 'assets/main.js', __FILE__ ),
    array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor', 'wp-components' ),
        'my_image_url' => plugins_url( 'blocks/block-example/image.png', __FILE__ )
<img src={js_data.my_image_url} />
Related Posts Related Posts :
  • ReactJS: Component not loaded even after URL changes
  • disable dates before current date and after 1 month of current date in antd date picker
  • Installing Pre-render Token in htaccess file
  • Conversion React-Redux from v1.x to v2.x
  • How not to open a new tab on clicking middle mouse button?
  • Is making use of JSX.Element a good practice?
  • SpinButton: public property 'value' is undefined and public method 'focus()' is not a function
  • React native Wix Navigation.push possible unhandled promise rejection: Error : Failed to execute stack command
  • How to make a React component look more readable and clean from my example?
  • Exception handling in Jest/Enzyme
  • Showing number of entries needed in antd table in react JS
  • how to securely use secretAccessKey on react JS
  • React: How to sort items according to date?
  • Declaring array in react typescript tsx file gives "error TS1109: Expression expected"
  • React v4 and Redux: Update URL after API call to show new route?
  • React Date picker question: How to display date in proper format in a table?
  • Load images using React/Webpack
  • PropTypes validation failed when executing the application
  • How to redirect to new page in React
  • DOM order matters for accessibility in web components with RTL/LTR options?
  • React route url and view changes but component function still active. Why?
  • SPA site served via react-router does not load unless you've visited the homepage
  • Event listener is not removed in useEffect call within function-based component
  • How to put a spy on clearInterval() in sinon?
  • Setting first char uppercase when setting state in react
  • How to fix typescript error with next.js?
  • Waiting for request to finish before performing operation ReactJS
  • check input data if it exist in firebase before adding it
  • react render message before loading new state
  • Express JS how to redirect all http traffic to https (Heroku)
  • How can I get height of a camera preview?
  • How to detach mock function from the react component's prototype so that will not affect other test?
  • Docker possibly causing my packages to bug out?
  • Problem setting state via props in componentDidMount
  • connected-react-router app updates url but not components
  • Splash Screen for iphone in PWA is not working correctly
  • Changing styles when scrolling React
  • During Fetch Method changed to Options with 200 status and succes fetch
  • unit testing using enzyme: Pass react props as event to wrapper
  • Minimum layout loading experience library in React
  • Trying to fix "Could not find a declaration file for module" from aws-appsync lib cause another error
  • React, access value stored in a td through a react ref
  • React Passing Boolean value to component
  • Cannot import local fonts with TypeScript
  • How can get Value from child component in react?
  • How to mock a react component's event when fat arrow function is used as event handler?
  • Can't access gatsby environment variables on the client side
  • How to conditionally render extra form options on checking dynamically generated check boxes in React?
  • Semantic-UI Table, persistent sort
  • Correct way of implementing article and it's comments in react env
  • react 'componentWillReceiveProps' use
  • SharePoint React pnpjs
  • preloadedState when injecting asyncReducers
  • Using calculation to set state asynchronizely
  • Correct way to specify a size of a React Component
  • When i click on button then data loaded below the previous page
  • How can I add custom props to TablePagination ActionComponent?
  • How to create an instance of React Browser Router in a Component?
  • To Add colors for column cell text based on conditions in react-virtualised table
  • Why do I need prevProps with prevState in componentDidUpdate()?
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org