Gutenblock Versions Save

Babel macros support! https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md

New major version bump due to WP moving some components around inside of the wp global object.

Only update if you are using Gutenberg 3.4 or higher

Updates gutenblock-controls to 0.6.0. Adds new collapsable tabs:

<Repeat title="Tab" addNew="Add Tab" attribute="tabs" collapsable>
      <Input name="title" placeholder="Tab Title" />

      <Repeat title="Items" addNew="Add Item" attribute="items">
        <Input name="url" placeholder="URL" />
        <MediaSelect name="logo" label="Select logo" />
      </Repeat>
    </Repeat>

Collapse top level repeats!

Add config section for gutenblock https://github.com/crossfield/gutenblock/commit/023bb8a53c11a7c69008021d4ba77a2d598524df

Add editor component for injected attributes and change function inside of the editor

https://github.com/crossfield/gutenblock/blob/master/plugin/src/notes/edit.js

Refactor repeat component to not use state

https://github.com/crossfield/gutenblock/pull/9

https://github.com/crossfield/gutenblock/commit/796477ccafb9946da06589dd4af787f80476245c

Inject a delete button inside of repeater items

Breaking change

Passes in webpack to gutenblock.config.js:

module.exports = webpack => ({
  plugins: [new webpack.EnvironmentPlugin(['REACT_APP_API'])],
})

If you imported webpack yourself to access plugins and other built ins, it would resolve locally which may not be the same webpack version and cause errors.

• Fix bug with not being able to call onDelete inside inputs that are nested in a Repeat https://github.com/crossfield/gutenblock/commit/93d088a9187f4527c70e3f84e6c7fedf0850205b

Eslint

Added create-react-app's eslint config with minor changes for it to work correctly with this project. Now you will see errors about unused variables and other useful things.

Simplified Input

Before, there was RepeatInput and InspectorInput. Now, there's just Input which can be rendered in the inspector, or inside of a repeat:

import { Inspector, Repeat, Input } from 'gutenblock-controls';

export default () => (
  <Inspector>
    <Input name="title" placeholder="Title" />

    <Repeat title="Projects" addNew="Add Project" attribute="projects">
      <Input name="title" />
    </Repeat>

  </Inspector>
);

Add MediaSelect component

import { Inspector, MediaSelect } from 'gutenblock-controls';

export default () => (
  <Inspector>
    <MediaSelect name="backgroundURL" />
  </Inspector>
);

This will prompt the user to select or upload photos and store the resulting image inside the attributes.

Add Async select component

Load in items from an api and store the value on attributes

import { Inspector, Select } from 'gutenblock-controls';

export default () => (
  <Inspector>
    <Select name="id" loadOptions={async search => {
       let response = await fetch(`/wp-json/wp/v2/posts?search=${search}`);
       let json = await response.json();
       return {
         options: json.map(item => ({ label: item.title.rendered, value: item.id })),
       };
} />
  </Inspector>
);