GithubHelp home page GithubHelp logo

zgordon / how-to-gutenberg-plugin Goto Github PK

View Code? Open in Web Editor NEW
74.0 74.0 31.0 13.87 MB

A demo WordPress plugin that teaches you how to build blocks with JavaScript

Home Page: https://gutenberg.courses/development

CSS 17.73% JavaScript 71.81% PHP 10.46%

how-to-gutenberg-plugin's People

Contributors

zgordon avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

how-to-gutenberg-plugin's Issues

Check for Gutenberg to be active before calling register_block_type()

Just spinning up a new site and didn't have Gutenberg activated yet. Got a fatal error:

( ! ) Fatal error: Uncaught Error: Call to undefined function register_block_type() in /app/public/wp-content/plugins/jsforwp-how-to-gutenberg/jsforwp-how-to-gutenberg.php on line 130

Maybe an admin notice would be a helpful reminder.

Several build errors

In a fresh installation of the plugin i get several build errors:

[email protected] dev C:\xxx\wp-content\plugins\how-to-gutenberg-plugin-master
cross-env BABEL_ENV=default webpack --watch
Webpack is watching the files…
Hash: 92ab71e04b3c917dae58
Version: webpack 3.11.0
Time: 463ms
                       Asset     Size  Chunks             Chunk Names
./assets/js/editor.blocks.js  7.73 kB       0  [emitted]  ./assets/js/editor.blocks
   [0] ./blocks/index.js 153 bytes {0} [built]
   [1] ./blocks/i18n.js 50 bytes {0} [built]
   [2] ./blocks/register-block-type/index.js 960 bytes {0} [built] [failed] [1 error]
   [3] ./blocks/demo/index.js 1.24 kB {0} [built] [failed] [1 error]

ERROR in ./blocks/demo/index.js
Module build failed: SyntaxError: C:/xxx/wp-content/plugins/how-to-gutenberg-plugin-master/blocks/demo/index.js: Unexpected token (46:16)

  44 |             const onChangeMessage = message => { setAttributes( { message } ) };
  45 |             return (
> 46 |                 <div className={ className }>
     |                 ^
  47 |                     <h2>{ __( 'Call to Action', 'jsforwphowto' ) }</h2>
  48 |                     <RichText
  49 |                         tagName="div"

 @ ./blocks/index.js 10:0-17

ERROR in ./blocks/register-block-type/index.js
Module build failed: SyntaxError: C:/xxx/wp-content/plugins/how-to-gutenberg-plugin-master/blocks/register-block-type/index.js: Unexpected token (34:20)

  32 |
  33 | // Create variable for block header since using it twice
> 34 | const blockHeader = <h2>{ __( 'registerBlockType Explained', 'jsforwphowto' ) }</h2>;
     |                      ^
  35 |
  36 |
  37 | /**

 @ ./blocks/index.js 9:0-32

NPM runs on 5.6.0 and Node on 8.11.3.
Any idea?

Edit: Sorry for the terrible code display.

React error in console on block remove

WP version: 5.4
Theme: Twenty Twenty 1.2

Wordpress is using built-in Gutenberg, when I create post and adding new demo custom block then remove it, there is a react warning in console (from react_devtools_backend.js file):
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

Installation issues

Trying to follow your course, having a few setup issues when I run npm i

Wondering what version of node you're running?

      throw er; // Unhandled 'error' event
      ^

Error: sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0= integrity checksum failed when using sha1: wanted sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0= but got sha1-ljRQKqEsRF3Vp8VzS1cruHOKrLs=. (8882 bytes)
    at Transform.on (~/.nvm/versions/node/v8.11.4/lib/node_modules/npm/node_modules/ssri/index.js:275:19)
    at emitNone (events.js:111:20)
    at Transform.emit (events.js:208:7)
    at endReadableNT (_stream_readable.js:1064:12)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)
events.js:183░░░░░░⸩ ⠹ extract:electron-releases: sill extract [email protected]
      throw er; // Unhandled 'error' event
      ^

Error: sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0= integrity checksum failed when using sha1: wanted sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0= but got sha1-ljRQKqEsRF3Vp8VzS1cruHOKrLs=. (8882 bytes)
    at Transform.on (~/.nvm/versions/node/v8.11.4/lib/node_modules/npm/node_modules/ssri/index.js:275:19)
    at emitNone (events.js:111:20)
    at Transform.emit (events.js:208:7)
    at endReadableNT (_stream_readable.js:1064:12)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN enoent SKIPPING OPTIONAL DEPENDENCY: ENOENT: no such file or directory, rename '/Users/Vishnu/Downloads/Practice/IL/industriallogic.dev.cc/wp-content/plugins/how-to-gutenberg-plugin/node_modules/.staging/fsevents-78d8192f/node_modules/strip-json-comments' -> '/Users/Vishnu/Downloads/Practice/IL/industriallogic.dev.cc/wp-content/plugins/how-to-gutenberg-plugin/node_modules/.staging/strip-json-comments-f9c83c18'

npm ERR! cancel after 1 retries!

npm ERR! A complete log of this run can be found in:
npm ERR!     ~/.npm/_logs/2018-09-06T17_46_01_577Z-debug.log```

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.