Add reusable blocks #2659
Add reusable blocks #2659
Commits on Oct 12, 2017
-
Add 'core/reusable-block' block type
This lets us parse reusable blocks from the HTML, and not much else.
-
Stub out Reusable Block UI, implement fetching and local editing
Stubs out some of the editor UI so that we have a base to work from. Also adds the reducers and effects necessary to support fetching and local editing.
-
Implement reusable block persisting
Adds an effect that responds to the PERSIST_REUSABLE_BLOCK action, and some UI for the confirmation dialog that appears when a reusable block is first modified.
-
Implement ATTACH_REUSABLE_BLOCK
Adds an effect which lets us turn reusable blocks into regular blocks.
-
Implement DETACH_REUSABLE_BLOCK
Adds an effect which lets us turn regular blocks into reusable blocks, and stubs out some Advanced Options UI which triggers this effect.
-
Fetch and persist reusable blocks using the WP API Backbone client
Adds the `gutenberg/v1/` endpoint to the WPI API Backbone client so that we can use `wp.api.models.ReusableBlocks` to fetch and save reusable blocks instead of our own (ugly) implementation.
-
Clean up reusable block update actions
Collapse SET_REUSABLE_BLOCK_NAME and UDPATE_REUSABLE_BLOCK_ATTRIBUTES into one UPDATE_REUSABLE_BLOCK action. This makes things read a little nicer.
-
Rename persistReusableBlock -> saveReusableBlock
'persist' is a little verbose, and we already use the term 'save' when saving the Backbone model.
-
Prefer 'id' instead of 'ref' when dealing with reusable blocks
This keeps our variables names in sync with how things look in the API, and disambiguates between the ID stored in the post and the ID stored in redux.
-
Renames ATTACH_REUSABLE_BLOCK -> ATTACH_BLOCK and DETACH_REUSABLE_BLOCK -> DETACH_BLOCK. This makes it clearer that these actions take block UIDs, not reusable block IDs.
-
-
Write tests for reusable block client API
Write tests for reuasble block actions, selectors, reducer and factory methods.
-
-
Style 'Convert to Reusable Block' button
Introduce a button new inspector control and use it for the 'Convert to Reusable Block' and 'Detach from Reusable Block' buttons.
-
Style reusable block dialogs and display them modally
- Introduces a new Modal component, which presents its children modally - Changes ReusableBlockEdit to present NewReusableBlockDialog and SaveConfirmationDialog modally - Styles the reusable block dialogs to look like the design
-
Add reusable blocks to the inserter
Show reusable blocks that are available in the redux state tree in the inserter UI.
-
-
-
Implement
render_callbackfor reusable blocksAllow reusable blocks to be rendered by the server for posts and pages by registering them in PHP and defininig a `render_callback`.
-
Replace reusable block modals with inline edit panel
Replaces SaveConfirmationDialog, NewReusableBlockDialog, and Modal with ReusableBlockEditPanel. This panel sits at the bottom of a reusable block when selected and allows the user to explicitly edit and save the reusable block. The end result is a less ambiguous and more explicit UX.
-
Give the
<button>in<ButtonControl>anidThis makes the `<label>` in the control behave correctly. According to the spec, `<button>` is a labelable element: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Form_labelable
-
Use an explicit
isPrivateflag to hide block types from the inserterWe don't wish to show the 'core/reusable-block' block type in the inserter. We were doing this by taking advantage of the fact that the inserter would ignore block types with a null category. This change makes this behaviour more explicit.
-
-
DRY up
do_blocksandgutenberg_render_block_core_reusable_blockRefactor the common logic in `do_blocks` and `gutenberg_render_block_core_reusable_block` into a new `gutenberg_render_block` function.
-
Combine FETCH_REUSABLE_BLOCK and FETCH_REUSABLE_BLOCKS
Simplify fetching logic a little by DRYing up these two mostly-similar effects.
-
Remove ADD_REUSABLE_BLOCKS action, add ability to track saving
Collapses the ADD_REUSABLE_BLOCKS action into UPDATE_REUSABLE_BLOCK and FETCH_REUSABLE_BLOCKS_SUCCESS. Also makes it so that the Redux store keeps track of whether or not a reusable block is being saved or has had an error while saving.
-
Add reusable block 'saving' and 'save failure' UI
Adds a spinner that indicates whether or not a reusable block is saving, and some UI that allows the user to retry the save if it fails.
-
Rename {ATTACH,DETACH}_BLOCK to MAKE_BLOCK_{STATIC,REUSABLE}
Avoid ambiguity around what 'attach' and 'detach' means by avoiding the its use in code alltogether.
-
Improve tests for actions, selectors and effects
Slightly clean up the tests for reusable block actions and selectors, and change our effects tests to reduce our dependency on mocking selectors by taking advantage of the fact that MAKE_BLOCK_STATIC and MAKE_BLOCK_REUSABLE are relatively pure functions.
-
Remove unnecessary {}s, split up long line, and collapse SCSS selectors into one line. -
Clarify how we're using pickBy
Add a comment which clarifies this weird way we're using _.pickBy.
-
Call
blockType.save, notblockType.createFix this typo. There's no such thing as `blockType.create`!
-
Use convertBlockTo{Static,Reusable} instead of makeBlock{Static,Reusa…
…ble} It's a clearer action name since 'convert' is a less ambigious verb.
-
-
-
Use animation and notices to indicate the reusable block save state
- Makes the 'Save' button animate when a reusable block is saving - Makes a 'Reusable block updated' notice appear when the save is successful - Makes a 'Reusable block update failed' notice appear when the save fails
