JSFiddle - React, Tailwind, and code Playground

by mcsf

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.development.js"></script>
The following showcases a component enhancement built on top of WithAPIData that intercepts reads from and writes to a block's attributes, providing or locally setting site options depending on the attribute.

<div id="app">
</div>

Babel + JSX

const main = () => {
  ReactDOM.render( <VisualBlockEditor />,
  document.getElementById( 'app' ) );
};

// Fixture
const withAPIData = () => ( WrappedComponent ) =>
	( props ) => <WrappedComponent
    { ...props }
    settings={ {
    	data: { description: "This WordPress site is the bee's knees!" },
      saveWith: ( data ) => console.log( 'Saved:', data ),
    } } />;
    
// Fixture
const VisualBlockEditor = () => [
	<VisualBlock key={ 1 } uid={ 1 } />,
];
    
// Fixture
class VisualBlock extends React.Component {
	constructor() {
  	super( ...arguments );
    this.state = { attributes: {} };
    this.setAttributes = this.setAttributes.bind( this );
  }
  setAttributes( attributes ) {
  	this.setState( { attributes: {
    	...this.state.attributes,
      ...attributes,
    } } );
  }
  render() {
    return <EnhancedBlockEdit
      { ...this.props }
      attributes={ this.state.attributes }
      setAttributes={ this.setAttributes }
    />;
  }
}

const blockType1 = {
	attributes: {
  	myDescription: {
    	type: 'string',
      option: 'description',
    },
    myName: {
    	type: 'string',
    },
  },
};
    
const blockType2 = {
	attributes: {
    isRegular: {
    	type: 'boolean',
      default: true,
    },
  },
};
    
const BlockEdit = ( { attributes, setAttributes, saveOptions } ) => {
	const { myDescription, myName = '' } = attributes;
  return [
    <p key="description-p"><em>Site-option attribute:</em> { myDescription }</p>,
    <input key="description-input"
      value={ myDescription }
      onChange={
        ( event ) => setAttributes( { myDescription: event.target.value } )
      } />,
    <p key="name-p"><em>Regular attribute:</em> { myName }</p>,
    <input key="name-input"
      value={ myName }
      onChange={
        ( event ) => setAttributes( { myName: event.target.value } )
      } />,
      <p key="button">
        <button onClick={ saveOptions }>Save Options</button>
      </p>,
  ];
};

const interceptAttributes = ( blockType )...