Categories
Uncategorized

WordPress React Gutenberg

How this code will be looked when i call wp.element?

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

wp.element is basically a React wrapper. Your code can look like this if you use wp.element

const { Component, render } = wp.element;

class Clock extends Component {
...rest of the code
}

render(
  <Clock />,
  document.getElementById('root')
);

Or you can keep using React too as it already ships with WordPress, in which case set it as an external in webpack so it isn’t bundled with your build and instead takes it from the WP Core.

Hope this helps!

Ref: https://wordpress.org/support/topic/reactjs-in-wpwp-elemet/

Categories
Uncategorized

PHP Formatter in VS Code

PHP CS Fixer Installation

Go to extension menu, searching for PHP CS Fixer and install it.

PHP CS Fixer for Visual Studio Code

PHP CS Fixer Configuration

After installed, go to setting and place following snippet below php-cs-fixer.executablePath

"php-cs-fixer.executablePath": "${extensionPath}/php-cs-fixer.phar",
"": {
    "editor.defaultFormatter": "junstyle.php-cs-fixer",
    "editor.formatOnSave": true
},
"php-cs-fixer.rules": "@PSR2",
"php-cs-fixer.formatHtml": true,
PHP CS Fixer Configuation in Setting
Right click to format PHP code

And happy coding!