My first delve into Gutenberg and React, a dummys guide!

Learning React, a dummies guide with Gutenberg

One thing, reading between the lines about a lot of development and developers is peoples hatred of Gutenberg. With the likes of Beaver, Divi and Elementor out there, how the hell is WordPress’ own inside “job” out to match the likes of these amazing themes already out there? As a keen learner, delving into the depths of this new language and area is one that isn’t for the faint hearted.

The material and support is rather sparse

The codex is rather lacking…..

It’s a struggle….

Where to start your Gutenberg and React journey?

I must admit, I am loving Alecaddd on Youtube. His easy to follow, dumbed down tutorials are a perfect example of how to explain to complete “idiots” how to do something simply, and epically on the WordPress platform. Kudos young man, kudos….

As well as seriously get wp-builds installed locally via NPM / NPX. It makes your life so much easier in terms of building a block from scratch without the need to use a difficult compiler to render your production JS file, all pretty, and all formatted from your JSX writing.

One thing I have learnt, is play…. by doing I have certainly been able to delve deeper into understanding just how Gutenberg spits out blocks. I must admit mind. Coming from a non React background? I suggest you go back to basics (which I have done), to better understand just how it works. It does give you a great base to build on.

So where have i been starting in terms of Gutenberg?

One thing I was taught, was to play! Nothing is better than messing around and testing, seeing how things work. The quickest little thing I made today was a colour background changing, that takes an hexagonal input, and change the background based on the input, or defaults to black.

Not the most exciting React based play I have done, however i plan to put this into Gutenberg very soon.

const black = "#000";

class ColorChanger extends React.Component {


  constructor(props) {
    super(props);
    this.state = {color: black, bgColor: black}
    this.colorChange = this.colorChange.bind(this);
  }

  onChange(e){
    if(e.target.value) {
      this.setState({[e.target.name]: '#' + e.target.value})
    } else {
      this.setState({[e.target.name]: ''})
    }
    console.log(this.state);
  }

  colorChange() {
    const color = this.state.bgColor;
    const newColor = color !== '' ? color : black;
    this.setState({ color: newColor });
    console.log(this.state);

  }



  render() {
    return   (
      <div>
      <input value={this.state.value} id="color" onChange={(value) => this.onChange(value)} name="bgColor" />
      <div style={{background: this.state.color}}><button onClick={this.colorChange}>Click me to change the colour</button></div>
      </div>
    )
  }

}

As a newbie to React in general, I would welcome any feedback as to how and if this can be written better. Also please note, this isn’t “Gutenberg friendly” however I will update this post once rendered 😉

As for Gutenberg, bring it on!

To be continued!

Happy Coding Campers!

Kirsty

Leave a comment

Your email address will not be published.