From 10605881a4faac964b0c861219fc25e65362230a Mon Sep 17 00:00:00 2001 From: CK Date: Wed, 3 Jul 2019 12:34:09 +0800 Subject: [PATCH 001/122] Add new properties and panel for discover items --- .../src/components/inserter/menu.js | 52 +++++++++++++++++-- 1 file changed, 49 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index bf659f789d1881..9fec9e18bcf15b 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -100,6 +100,7 @@ export class InserterMenu extends Component { hoveredItem: null, suggestedItems: [], reusableItems: [], + discoverItems: [], itemsPerCategory: {}, openPanels: [ 'suggested' ], }; @@ -170,7 +171,7 @@ export class InserterMenu extends Component { }; } - filterOpenPanels( filterValue, itemsPerCategory, filteredItems, reusableItems ) { + filterOpenPanels( filterValue, itemsPerCategory, filteredItems, reusableItems, discoverItems ) { if ( filterValue === this.state.filterValue ) { return this.state.openPanels; } @@ -186,6 +187,9 @@ export class InserterMenu extends Component { Object.keys( itemsPerCategory ) ); } + if ( discoverItems.length > 0 ) { + openPanels.push( 'discover' ); + } return openPanels; } @@ -203,6 +207,28 @@ export class InserterMenu extends Component { const reusableItems = filter( filteredItems, { category: 'reusable' } ); + const discoverItems = [ { + id: 'boxer-block', + name: 'boxer-block', + title: 'Boxer', + icon: 'archive', + description: 'Boxer puts your WordPress posts into boxes.', + assets: { + editor_script: { + src: 'http://plugins.svn.wordpress.org/boxer-block/trunk/build/index.js', + }, + view_script: { + src: 'http://plugins.svn.wordpress.org/boxer-block/trunk/build/view.js', + }, + style: { + src: 'http://plugins.svn.wordpress.org/boxer-block/trunk/style.css', + }, + editor_style: { + src: 'http://plugins.svn.wordpress.org/boxer-block/trunk/editor.css', + }, + }, + } ]; + const getCategoryIndex = ( item ) => { return findIndex( getCategories(), ( category ) => category.slug === item.category ); }; @@ -218,12 +244,14 @@ export class InserterMenu extends Component { filterValue, suggestedItems, reusableItems, + discoverItems, itemsPerCategory, openPanels: this.filterOpenPanels( filterValue, itemsPerCategory, filteredItems, - reusableItems + reusableItems, + discoverItems ), } ); @@ -254,6 +282,7 @@ export class InserterMenu extends Component { itemsPerCategory, openPanels, reusableItems, + discoverItems, suggestedItems, } = this.state; const isPanelOpen = ( panel ) => openPanels.indexOf( panel ) !== -1; @@ -287,7 +316,7 @@ export class InserterMenu extends Component { ref={ this.inserterResults } tabIndex="0" role="region" - aria-label={ __( 'Available block types' ) } + aria-label={ __( 'Discover block types' ) } > } + { !! discoverItems.length && ( + + { + discoverItems.map( ( d ) => { + return ( d.name ); + } ) + } + + ) } + { map( getCategories(), ( category ) => { const categoryItems = itemsPerCategory[ category.slug ]; if ( ! categoryItems || ! categoryItems.length ) { From 8fc202a698d0e7edec9e727d1b240d4c08910669 Mon Sep 17 00:00:00 2001 From: CK Date: Wed, 3 Jul 2019 14:00:54 +0800 Subject: [PATCH 002/122] Add basic component with styling for discover blocks --- .../src/components/block-icon/index.js | 4 +- .../discover-block-list-item/index.js | 60 +++++++++++++++++++ .../discover-block-list-item/style.scss | 51 ++++++++++++++++ .../components/discover-blocks-list/index.js | 43 +++++++++++++ .../discover-blocks-list/style.scss | 7 +++ .../src/components/inserter/menu.js | 7 +-- packages/block-editor/src/style.scss | 2 + 7 files changed, 167 insertions(+), 7 deletions(-) create mode 100644 packages/block-editor/src/components/discover-block-list-item/index.js create mode 100644 packages/block-editor/src/components/discover-block-list-item/style.scss create mode 100644 packages/block-editor/src/components/discover-blocks-list/index.js create mode 100644 packages/block-editor/src/components/discover-blocks-list/style.scss diff --git a/packages/block-editor/src/components/block-icon/index.js b/packages/block-editor/src/components/block-icon/index.js index 4d6106214df7d8..02dd697805f1c5 100644 --- a/packages/block-editor/src/components/block-icon/index.js +++ b/packages/block-editor/src/components/block-icon/index.js @@ -9,14 +9,14 @@ import { get } from 'lodash'; */ import { Path, Icon, SVG } from '@wordpress/components'; -export default function BlockIcon( { icon, showColors = false, className } ) { +export default function BlockIcon( { icon, showColors = false, className, size } ) { if ( get( icon, [ 'src' ] ) === 'block-default' ) { icon = { src: , }; } - const renderedIcon = ; + const renderedIcon = ; const style = showColors ? { backgroundColor: icon && icon.background, color: icon && icon.foreground, diff --git a/packages/block-editor/src/components/discover-block-list-item/index.js b/packages/block-editor/src/components/discover-block-list-item/index.js new file mode 100644 index 00000000000000..1c873460d6de7c --- /dev/null +++ b/packages/block-editor/src/components/discover-block-list-item/index.js @@ -0,0 +1,60 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * Internal dependencies + */ +import BlockIcon from '../block-icon'; + +function DiscoverBlockListItem( { + icon, + onClick, + isDisabled, + title, + className, + description, + ...props +} ) { + const itemIconStyle = icon ? { + backgroundColor: icon.background, + color: icon.foreground, + } : {}; + + return ( +
  • + +
    • + ); +} + +export default DiscoverBlockListItem; diff --git a/packages/block-editor/src/components/discover-block-list-item/style.scss b/packages/block-editor/src/components/discover-block-list-item/style.scss new file mode 100644 index 00000000000000..b35c27e98a590f --- /dev/null +++ b/packages/block-editor/src/components/discover-block-list-item/style.scss @@ -0,0 +1,51 @@ +.block-editor-discover-blocks-list__list-item { + width: 100%; + padding: 0 4px; + margin: 0 0 12px; + width: 100%; +} + +.discover-blocks-list__item { + display: flex; + flex-direction: row; + width: 100%; + font-size: $default-font-size; + color: $dark-gray-700; + padding: 0; + align-items: flex-start; + justify-content: center; + cursor: pointer; + background: transparent; + word-break: break-word; + border-radius: $radius-round-rectangle; + border: $border-width solid transparent; + transition: all 0.05s ease-in-out; + @include reduce-motion("transition"); + position: relative; + text-align: left; +} + +.discover-blocks-list__item-icon { + .block-editor-block-icon { + width: 48px; + height: 48px; + font-size: 48px; + background-color: $light-gray-300; + } +} + +.discover-blocks-list__item-panel { + display: flex; + flex-grow: 1; + flex-direction: column; + margin-left: 1.5em; +} + +.discover-blocks-list__item-title { + font-weight: 600; +} + +.discover-blocks-list__item-description { + color: $dark-gray-400; + margin-top: 4px; +} diff --git a/packages/block-editor/src/components/discover-blocks-list/index.js b/packages/block-editor/src/components/discover-blocks-list/index.js new file mode 100644 index 00000000000000..16853b883e0696 --- /dev/null +++ b/packages/block-editor/src/components/discover-blocks-list/index.js @@ -0,0 +1,43 @@ +/** + * WordPress dependencies + */ +import { getBlockMenuDefaultClassName } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import DiscoverBlockListItem from '../discover-block-list-item'; + +function DiscoverBlocksList( { items, onSelect, onHover = () => {}, children } ) { + return ( + /* + * Disable reason: The `list` ARIA role is redundant but + * Safari+VoiceOver won't announce the list otherwise. + */ + /* eslint-disable jsx-a11y/no-redundant-roles */ +
      + { items && items.map( ( item ) => + { + onSelect( item ); + onHover( null ); + } } + onFocus={ () => onHover( item ) } + onMouseEnter={ () => onHover( item ) } + onMouseLeave={ () => onHover( null ) } + onBlur={ () => onHover( null ) } + isDisabled={ item.isDisabled } + title={ item.title } + description={ item.description } + /> + ) } + { children } +
    + /* eslint-enable jsx-a11y/no-redundant-roles */ + ); +} + +export default DiscoverBlocksList; diff --git a/packages/block-editor/src/components/discover-blocks-list/style.scss b/packages/block-editor/src/components/discover-blocks-list/style.scss new file mode 100644 index 00000000000000..5ee29219bad50b --- /dev/null +++ b/packages/block-editor/src/components/discover-blocks-list/style.scss @@ -0,0 +1,7 @@ +.block-editor-discover-blocks-list { + list-style: none; + padding: 2px 0; + overflow: hidden; + display: flex; + flex-wrap: wrap; +} diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 9fec9e18bcf15b..80ddeb2aec4f08 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -40,6 +40,7 @@ import { addQueryArgs } from '@wordpress/url'; import BlockPreview from '../block-preview'; import BlockTypesList from '../block-types-list'; import ChildBlocks from './child-blocks'; +import DiscoverBlocksList from '../discover-blocks-list'; const MAX_SUGGESTED_ITEMS = 9; @@ -346,11 +347,7 @@ export class InserterMenu extends Component { icon="cart" ref={ this.bindPanel( 'discover' ) } > - { - discoverItems.map( ( d ) => { - return ( d.name ); - } ) - } + ) } diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 23d70816397dae..ef765bbf40a277 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -15,6 +15,8 @@ @import "./components/button-block-appender/style.scss"; @import "./components/color-palette/control.scss"; @import "./components/contrast-checker/style.scss"; +@import "./components/discover-block-list-item/style.scss"; +@import "./components/discover-blocks-list/style.scss"; @import "./components/default-block-appender/style.scss"; @import "./components/font-sizes/style.scss"; @import "./components/inner-blocks/style.scss"; From ebd11482b639dcf648aafcb6bb02f250bd1f8e3b Mon Sep 17 00:00:00 2001 From: CK Date: Wed, 3 Jul 2019 15:01:08 +0800 Subject: [PATCH 003/122] Dynamically load block into editor. --- .../src/components/inserter/menu.js | 68 ++++++++++++++++--- 1 file changed, 59 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 80ddeb2aec4f08..73e716cd032703 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -28,6 +28,7 @@ import { isReusableBlock, createBlock, isUnmodifiedDefaultBlock, + getBlockTypes, } from '@wordpress/blocks'; import { withDispatch, withSelect } from '@wordpress/data'; import { withInstanceId, compose, withSafeTimeout } from '@wordpress/compose'; @@ -92,6 +93,32 @@ export const normalizeTerm = ( term ) => { return term; }; +/** + * Dynamically loads script + * + * @param {Object} asset The asset object as described in block.json. + * @param {Function} onLoad The callback function when script is loaded. + */ +export const loadScipt = ( asset, onLoad ) => { + const script = document.createElement( 'script' ); + script.src = asset.src; + script.onload = onLoad; + document.body.appendChild( script ); +}; + +/** + * Dynamically loads stylesheets + * + * @param {Object} asset The asset object as described in block.json. + * @param {Function} onLoad The callback function when script is loaded. + */ +export const loadStyle = ( asset ) => { + const link = document.createElement( 'link' ); + link.rel = 'stylesheet'; + link.href = asset.src; + document.body.appendChild( link ); +}; + export class InserterMenu extends Component { constructor() { super( ...arguments ); @@ -485,16 +512,39 @@ export default compose( } = select( 'core/block-editor' ); const { isAppender } = ownProps; const { name, initialAttributes } = item; - const selectedBlock = getSelectedBlock(); - const insertedBlock = createBlock( name, initialAttributes ); - if ( ! isAppender && selectedBlock && isUnmodifiedDefaultBlock( selectedBlock ) ) { - replaceBlocks( selectedBlock.clientId, insertedBlock ); + + if ( item.assets ) { + let scriptsCount = 0; + const onLoad = () => { + scriptsCount--; + if ( scriptsCount > 0 ) { + return; + } + const registeredBlocks = getBlockTypes(); + if ( registeredBlocks.length ) { + const block = createBlock( registeredBlocks[ registeredBlocks.length - 1 ].name ); + insertBlock( block ); + } + }; + if ( item.assets.editor_script ) { + scriptsCount++; + loadScipt( item.assets.editor_script, onLoad ); + } + if ( item.assets.style ) { + loadStyle( item.assets.style ); + } } else { - insertBlock( - insertedBlock, - getInsertionIndex(), - ownProps.destinationRootClientId - ); + const selectedBlock = getSelectedBlock(); + const insertedBlock = createBlock( name, initialAttributes ); + if ( ! isAppender && selectedBlock && isUnmodifiedDefaultBlock( selectedBlock ) ) { + replaceBlocks( selectedBlock.clientId, insertedBlock ); + } else { + insertBlock( + insertedBlock, + getInsertionIndex(), + ownProps.destinationRootClientId + ); + } } ownProps.onSelect(); From e85b2a0c353972937bba801942323a80cb712585 Mon Sep 17 00:00:00 2001 From: CK Date: Wed, 3 Jul 2019 15:01:41 +0800 Subject: [PATCH 004/122] Increase icon size. --- .../src/components/discover-block-list-item/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/discover-block-list-item/index.js b/packages/block-editor/src/components/discover-block-list-item/index.js index 1c873460d6de7c..9f4ad4e4a4993d 100644 --- a/packages/block-editor/src/components/discover-block-list-item/index.js +++ b/packages/block-editor/src/components/discover-block-list-item/index.js @@ -42,7 +42,7 @@ function DiscoverBlockListItem( { className="discover-blocks-list__item-icon" style={ itemIconStyle } > - +
    From 7dbdf01039f1fd1f46d66955ed396251908ebba2 Mon Sep 17 00:00:00 2001 From: CK Date: Wed, 3 Jul 2019 15:21:35 +0800 Subject: [PATCH 005/122] Handle insert block properly. --- .../src/components/inserter/menu.js | 32 +++++++++++-------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 73e716cd032703..6bf223f02d78fd 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -236,8 +236,8 @@ export class InserterMenu extends Component { const reusableItems = filter( filteredItems, { category: 'reusable' } ); const discoverItems = [ { - id: 'boxer-block', - name: 'boxer-block', + id: 'boxer/boxer', + name: 'boxer/boxer', title: 'Boxer', icon: 'archive', description: 'Boxer puts your WordPress posts into boxes.', @@ -513,6 +513,19 @@ export default compose( const { isAppender } = ownProps; const { name, initialAttributes } = item; + const handleInsertBlock = ( insertedBlock ) => { + const selectedBlock = getSelectedBlock(); + if ( ! isAppender && selectedBlock && isUnmodifiedDefaultBlock( selectedBlock ) ) { + replaceBlocks( selectedBlock.clientId, insertedBlock ); + } else { + insertBlock( + insertedBlock, + getInsertionIndex(), + ownProps.destinationRootClientId + ); + } + }; + if ( item.assets ) { let scriptsCount = 0; const onLoad = () => { @@ -522,8 +535,8 @@ export default compose( } const registeredBlocks = getBlockTypes(); if ( registeredBlocks.length ) { - const block = createBlock( registeredBlocks[ registeredBlocks.length - 1 ].name ); - insertBlock( block ); + const block = createBlock( item.name ); + handleInsertBlock( block ); } }; if ( item.assets.editor_script ) { @@ -534,17 +547,8 @@ export default compose( loadStyle( item.assets.style ); } } else { - const selectedBlock = getSelectedBlock(); const insertedBlock = createBlock( name, initialAttributes ); - if ( ! isAppender && selectedBlock && isUnmodifiedDefaultBlock( selectedBlock ) ) { - replaceBlocks( selectedBlock.clientId, insertedBlock ); - } else { - insertBlock( - insertedBlock, - getInsertionIndex(), - ownProps.destinationRootClientId - ); - } + handleInsertBlock( insertedBlock ); } ownProps.onSelect(); From 673475e7970d9b6557e161941ca1fa8bdf3eaec6 Mon Sep 17 00:00:00 2001 From: CK Date: Wed, 3 Jul 2019 15:36:13 +0800 Subject: [PATCH 006/122] Added another discover block. --- .../src/components/inserter/menu.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 6bf223f02d78fd..3438cb1fcf4018 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -255,6 +255,23 @@ export class InserterMenu extends Component { src: 'http://plugins.svn.wordpress.org/boxer-block/trunk/editor.css', }, }, + }, { + id: 'lez-library/listicles', + name: 'lez-library/listicles', + title: 'Listicle', + icon: 'excerpt-view', + description: 'A block for listicles. You can add items, remove them, and flip them in reverse.', + assets: { + editor_script: { + src: 'http://plugins.svn.wordpress.org/listicles/trunk/dist/blocks.build.js', + }, + style: { + src: 'http://plugins.svn.wordpress.org/listicles/trunk/dist/blocks.style.build.css', + }, + editor_style: { + src: 'http://plugins.svn.wordpress.org/listicles/trunk/dist/blocks.editor.build.css', + }, + }, } ]; const getCategoryIndex = ( item ) => { From 069d796ce16679a312c0c94f6a18097fc734f6dc Mon Sep 17 00:00:00 2001 From: CK Date: Wed, 3 Jul 2019 15:54:06 +0800 Subject: [PATCH 007/122] Revert unncessary changes. --- packages/block-editor/src/components/inserter/menu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 3438cb1fcf4018..b4ecfcdecb0b3d 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -361,7 +361,7 @@ export class InserterMenu extends Component { ref={ this.inserterResults } tabIndex="0" role="region" - aria-label={ __( 'Discover block types' ) } + aria-label={ __( 'Available block types' ) } > Date: Thu, 4 Jul 2019 15:28:59 +0800 Subject: [PATCH 008/122] Retrieve discover blocks from a mock api. --- .../src/components/inserter/menu.js | 47 ++++--------------- packages/block-editor/src/store/actions.js | 8 ++++ packages/block-editor/src/store/controls.js | 18 +++++++ packages/block-editor/src/store/index.js | 2 + packages/block-editor/src/store/reducer.js | 20 ++++++++ packages/block-editor/src/store/resolvers.js | 18 +++++++ packages/block-editor/src/store/selectors.js | 11 +++++ 7 files changed, 85 insertions(+), 39 deletions(-) create mode 100644 packages/block-editor/src/store/resolvers.js diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index b4ecfcdecb0b3d..6523555f74f50a 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -223,6 +223,7 @@ export class InserterMenu extends Component { filter( filterValue = '' ) { const { debouncedSpeak, items, rootChildBlocks } = this.props; + const filteredItems = searchItems( items, filterValue ); const childItems = filter( filteredItems, ( { name } ) => includes( rootChildBlocks, name ) ); @@ -235,44 +236,7 @@ export class InserterMenu extends Component { const reusableItems = filter( filteredItems, { category: 'reusable' } ); - const discoverItems = [ { - id: 'boxer/boxer', - name: 'boxer/boxer', - title: 'Boxer', - icon: 'archive', - description: 'Boxer puts your WordPress posts into boxes.', - assets: { - editor_script: { - src: 'http://plugins.svn.wordpress.org/boxer-block/trunk/build/index.js', - }, - view_script: { - src: 'http://plugins.svn.wordpress.org/boxer-block/trunk/build/view.js', - }, - style: { - src: 'http://plugins.svn.wordpress.org/boxer-block/trunk/style.css', - }, - editor_style: { - src: 'http://plugins.svn.wordpress.org/boxer-block/trunk/editor.css', - }, - }, - }, { - id: 'lez-library/listicles', - name: 'lez-library/listicles', - title: 'Listicle', - icon: 'excerpt-view', - description: 'A block for listicles. You can add items, remove them, and flip them in reverse.', - assets: { - editor_script: { - src: 'http://plugins.svn.wordpress.org/listicles/trunk/dist/blocks.build.js', - }, - style: { - src: 'http://plugins.svn.wordpress.org/listicles/trunk/dist/blocks.style.build.css', - }, - editor_style: { - src: 'http://plugins.svn.wordpress.org/listicles/trunk/dist/blocks.editor.build.css', - }, - }, - } ]; + const discoverItems = filter( filteredItems, { category: 'discover' } ); const getCategoryIndex = ( item ) => { return findIndex( getCategories(), ( category ) => category.slug === item.category ); @@ -453,6 +417,7 @@ export default compose( getBlockName, getBlockRootClientId, getBlockSelectionEnd, + getDiscoverBlocks, } = select( 'core/block-editor' ); const { getChildBlockNames, @@ -467,9 +432,13 @@ export default compose( } const destinationRootBlockName = getBlockName( destinationRootClientId ); + let items = getInserterItems( destinationRootClientId ); + const discoverBlocks = getDiscoverBlocks(); + items = items.concat( discoverBlocks ); + return { rootChildBlocks: getChildBlockNames( destinationRootBlockName ), - items: getInserterItems( destinationRootClientId ), + items, destinationRootClientId, }; } ), diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index 4dafaa291fcf31..671b2a60992151 100644 --- a/packages/block-editor/src/store/actions.js +++ b/packages/block-editor/src/store/actions.js @@ -705,3 +705,11 @@ export function __unstableMarkLastChangeAsPersistent() { return { type: 'MARK_LAST_CHANGE_AS_PERSISTENT' }; } +/** Returns an action object used in signalling that the discover blocks have been updated. + * @param {Array} discoverBlocks Discoverable blocks. + * + * @return {Object} Action object. + */ +export function setDiscoverBlocks( discoverBlocks ) { + return { type: 'SET_DISCOVER_BLOCKS', discoverBlocks }; +} diff --git a/packages/block-editor/src/store/controls.js b/packages/block-editor/src/store/controls.js index 5012ab244c21c8..f2fee92cd09733 100644 --- a/packages/block-editor/src/store/controls.js +++ b/packages/block-editor/src/store/controls.js @@ -21,10 +21,28 @@ export function select( storeName, selectorName, ...args ) { }; } +/** + * Trigger an API Fetch request. + * + * @param {Object} request API Fetch Request Object. + * @return {Object} control descriptor. + */ +export function apiFetch( request ) { + return { + type: 'API_FETCH', + request, + }; +} + const controls = { SELECT: createRegistryControl( ( registry ) => ( { storeName, selectorName, args } ) => { return registry.select( storeName )[ selectorName ]( ...args ); } ), + API_FETCH( { request } ) { + // todo: replace with wp.api-fetch for real implementation + return window.fetch( request.path ) + .then( ( response ) => response.json() ); + }, }; export default controls; diff --git a/packages/block-editor/src/store/index.js b/packages/block-editor/src/store/index.js index bfc7766a508762..9ae9c00a9489a4 100644 --- a/packages/block-editor/src/store/index.js +++ b/packages/block-editor/src/store/index.js @@ -10,6 +10,7 @@ import reducer from './reducer'; import applyMiddlewares from './middlewares'; import * as selectors from './selectors'; import * as actions from './actions'; +import resolvers from './resolvers'; import controls from './controls'; /** @@ -29,6 +30,7 @@ export const storeConfig = { selectors, actions, controls, + resolvers, }; const store = registerStore( MODULE_KEY, { diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index d9d0ecbdd28b64..b607b2d7a2b326 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -983,6 +983,25 @@ export const blockListSettings = ( state = {}, action ) => { return state; }; +/** + * Reducer returning an array of discover blocks. + * + * @param {Object} state Current state. + * @param {Object} action Dispatched action. + * + * @return {Object} Updated state. + */ +export const discoverBlocks = ( state = { items: [] }, action ) => { + switch ( action.type ) { + case 'SET_DISCOVER_BLOCKS' : + return { + ...state, + items: action.discoverBlocks, + }; + } + return state; +}; + export default combineReducers( { blocks, isTyping, @@ -994,4 +1013,5 @@ export default combineReducers( { template, settings, preferences, + discoverBlocks, } ); diff --git a/packages/block-editor/src/store/resolvers.js b/packages/block-editor/src/store/resolvers.js new file mode 100644 index 00000000000000..f84b19fd04b332 --- /dev/null +++ b/packages/block-editor/src/store/resolvers.js @@ -0,0 +1,18 @@ +/** + * WordPress dependencies + */ + +/** + * Internal dependencies + */ +import { apiFetch } from './controls'; +import { setDiscoverBlocks } from './actions'; + +export default { + * getDiscoverBlocks() { + const discoverblocks = yield apiFetch( { + path: 'https://discoverblocks.free.beeceptor.com/blocks', + } ); + return setDiscoverBlocks( discoverblocks ); + }, +}; diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 6633611fbd9b19..011086d561d08b 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1481,3 +1481,14 @@ function getPostMeta( state, key ) { function getReusableBlocks( state ) { return get( state, [ 'settings', '__experimentalReusableBlocks' ], EMPTY_ARRAY ); } + +/** + * Returns the available uninstalled blocks + * + * @param {Object} state Global application state. + * + * @return {Array} Discoverable blocks + */ +export function getDiscoverBlocks( state ) { + return state.discoverBlocks.items; +} From 7824941d69a2e6253f8e6a766d40ff1cfa556f6e Mon Sep 17 00:00:00 2001 From: CK Date: Mon, 8 Jul 2019 10:17:13 +1200 Subject: [PATCH 009/122] Only show discover blocks when no blocks are found. --- .../src/components/inserter/menu.js | 24 +++++++------------ .../src/components/inserter/style.scss | 7 ++++++ 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 6523555f74f50a..58d22284154d3e 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -242,7 +242,7 @@ export class InserterMenu extends Component { return findIndex( getCategories(), ( category ) => category.slug === item.category ); }; const itemsPerCategory = flow( - ( itemList ) => filter( itemList, ( item ) => item.category !== 'reusable' ), + ( itemList ) => filter( itemList, ( item ) => item.category !== 'reusable' && item.category !== 'discover' ), ( itemList ) => sortBy( itemList, getCategoryIndex ), ( itemList ) => groupBy( itemList, 'category' ) )( filteredItems ); @@ -346,19 +346,6 @@ export class InserterMenu extends Component { } - { !! discoverItems.length && ( - - - - ) } - { map( getCategories(), ( category ) => { const categoryItems = itemsPerCategory[ category.slug ]; if ( ! categoryItems || ! categoryItems.length ) { @@ -397,7 +384,14 @@ export class InserterMenu extends Component { ) } { isEmpty( suggestedItems ) && isEmpty( reusableItems ) && isEmpty( itemsPerCategory ) && ( -

    { __( 'No blocks found.' ) }

    + isEmpty( discoverItems ) ? + (

    { __( 'No blocks found.' ) }

    ) : + ( + +

    { __( 'No blocks found in your library. We did find these blocks available for download:' ) }

    + +     + ) ) }
    diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 87b9a79f12fa40..5f6183c4f0d8d6 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -124,6 +124,13 @@ $block-inserter-search-height: 38px; text-align: center; } +.block-editor-inserter__no-results-with-discover-items { + font-style: italic; + padding: 0; + margin-top: 0; + text-align: left; +} + .block-editor-inserter__child-blocks { padding: 0 $grid-size-large; } From e08184b6f742d7c520adebe9f64e45fa388116a2 Mon Sep 17 00:00:00 2001 From: CK Date: Mon, 8 Jul 2019 11:38:38 +1200 Subject: [PATCH 010/122] Style discover items header --- .../discover-block-list-item/index.js | 79 +++++++++++-------- .../discover-block-list-item/style.scss | 66 +++++++++++----- .../src/components/inserter/style.scss | 1 + packages/block-editor/src/store/resolvers.js | 2 +- 4 files changed, 93 insertions(+), 55 deletions(-) diff --git a/packages/block-editor/src/components/discover-block-list-item/index.js b/packages/block-editor/src/components/discover-block-list-item/index.js index 9f4ad4e4a4993d..2a3de56c15aea0 100644 --- a/packages/block-editor/src/components/discover-block-list-item/index.js +++ b/packages/block-editor/src/components/discover-block-list-item/index.js @@ -1,19 +1,18 @@ /** - * External dependencies + * Internal dependencies */ -import classnames from 'classnames'; +import BlockIcon from '../block-icon'; /** - * Internal dependencies + * WordPress dependencies */ -import BlockIcon from '../block-icon'; +import { Button } from '@wordpress/components'; function DiscoverBlockListItem( { icon, onClick, isDisabled, title, - className, description, ...props } ) { @@ -24,35 +23,49 @@ function DiscoverBlockListItem( { return (
  • - - + + { description } + +
    • ); } diff --git a/packages/block-editor/src/components/discover-block-list-item/style.scss b/packages/block-editor/src/components/discover-block-list-item/style.scss index b35c27e98a590f..11b5e58c7e4f75 100644 --- a/packages/block-editor/src/components/discover-block-list-item/style.scss +++ b/packages/block-editor/src/components/discover-block-list-item/style.scss @@ -1,48 +1,72 @@ -.block-editor-discover-blocks-list__list-item { +.discover-blocks-list__list-item { width: 100%; - padding: 0 4px; + padding: 12px; margin: 0 0 12px; - width: 100%; -} - -.discover-blocks-list__item { display: flex; flex-direction: row; - width: 100%; font-size: $default-font-size; color: $dark-gray-700; - padding: 0; align-items: flex-start; justify-content: center; - cursor: pointer; background: transparent; word-break: break-word; border-radius: $radius-round-rectangle; - border: $border-width solid transparent; + border: $border-width solid $light-gray-500; transition: all 0.05s ease-in-out; @include reduce-motion("transition"); position: relative; text-align: left; } -.discover-blocks-list__item-icon { - .block-editor-block-icon { - width: 48px; - height: 48px; - font-size: 48px; - background-color: $light-gray-300; +.discover-blocks-list__item-header { + display: flex; + flex-direction: row; + align-items: start; + > div { + display: flex; + flex-grow: 1; + + .discover-blocks-list__item-icon { + .block-editor-block-icon { + width: 36px; + height: 36px; + font-size: 36px; + background-color: $light-gray-300; + } + } + + > div { + display: flex; + flex-direction: column; + .discover-blocks-list__item-title { + font-weight: 600; + margin-left: 12px; + } + .plugin-rating { + margin-left: 12px; + width: 100%; + display: flex; + .dashicons { + font-size: 1.2em; + width: 1.1em; + } + .rating-count { + color: $dark-gray-400; + } + } + } } } +.discover-blocks-list__item { + font-size: $default-font-size; + color: $dark-gray-700; +} + .discover-blocks-list__item-panel { display: flex; flex-grow: 1; flex-direction: column; - margin-left: 1.5em; -} - -.discover-blocks-list__item-title { - font-weight: 600; } .discover-blocks-list__item-description { diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 5f6183c4f0d8d6..a4d2adb3f50879 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -129,6 +129,7 @@ $block-inserter-search-height: 38px; padding: 0; margin-top: 0; text-align: left; + color: $dark-gray-400; } .block-editor-inserter__child-blocks { diff --git a/packages/block-editor/src/store/resolvers.js b/packages/block-editor/src/store/resolvers.js index f84b19fd04b332..1a97ee594d3abe 100644 --- a/packages/block-editor/src/store/resolvers.js +++ b/packages/block-editor/src/store/resolvers.js @@ -11,7 +11,7 @@ import { setDiscoverBlocks } from './actions'; export default { * getDiscoverBlocks() { const discoverblocks = yield apiFetch( { - path: 'https://discoverblocks.free.beeceptor.com/blocks', + path: 'https://requestloggerbin.herokuapp.com/bin/6f2b14b8-d04d-4880-b9ff-7d30eb396c0a', } ); return setDiscoverBlocks( discoverblocks ); }, From b5e1756a4aa01d2ad0cdbdbcb188bc757d642bb3 Mon Sep 17 00:00:00 2001 From: CK Date: Mon, 8 Jul 2019 12:26:09 +1200 Subject: [PATCH 011/122] Fill discover item footer elements. --- .../discover-block-list-item/index.js | 29 +++++++++++-- .../discover-block-list-item/style.scss | 43 ++++++++++++++++--- 2 files changed, 62 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/discover-block-list-item/index.js b/packages/block-editor/src/components/discover-block-list-item/index.js index 2a3de56c15aea0..1bc0c82da9dd18 100644 --- a/packages/block-editor/src/components/discover-block-list-item/index.js +++ b/packages/block-editor/src/components/discover-block-list-item/index.js @@ -45,7 +45,7 @@ function DiscoverBlockListItem( { - (213) + (XXX) @@ -62,9 +62,30 @@ function DiscoverBlockListItem( { Add - - { description } - +
    + + { description } + +
    +
    + XX active installations +
    +
    + Updated X week ago. +
    +
    +
    +
    + + Authored by XXX + + + This author has X blocks, with an average rating of X.X. + + + They have an average support time of X days. + +
    ); diff --git a/packages/block-editor/src/components/discover-block-list-item/style.scss b/packages/block-editor/src/components/discover-block-list-item/style.scss index 11b5e58c7e4f75..b3a64702bd681c 100644 --- a/packages/block-editor/src/components/discover-block-list-item/style.scss +++ b/packages/block-editor/src/components/discover-block-list-item/style.scss @@ -1,6 +1,6 @@ .discover-blocks-list__list-item { width: 100%; - padding: 12px; + padding: 0; margin: 0 0 12px; display: flex; flex-direction: row; @@ -21,6 +21,7 @@ .discover-blocks-list__item-header { display: flex; flex-direction: row; + padding: 12px 12px 0; align-items: start; > div { display: flex; @@ -58,6 +59,41 @@ } } +.discover-blocks-list__item-body { + display: flex; + flex-direction: column; + padding: 12px; + .discover-blocks-list__item-description { + color: $dark-gray-400; + margin-top: 4px; + } + > div { + display: flex; + justify-content: space-between; + color: $dark-gray-400; + .dashicons { + font-size: 16px; + } + .dashicons-chart-line { + font-weight: 900; + } + } +} + +.discover-blocks-list__item-footer { + display: flex; + flex-direction: column; + padding: 12px; + background-color: $light-gray-500; + > span { + margin-bottom: 4px; + } + .discover-blocks-list__item-author-info, + .discover-blocks-list__item-support-time { + color: $dark-gray-400; + } +} + .discover-blocks-list__item { font-size: $default-font-size; color: $dark-gray-700; @@ -68,8 +104,3 @@ flex-grow: 1; flex-direction: column; } - -.discover-blocks-list__item-description { - color: $dark-gray-400; - margin-top: 4px; -} From 810546ba82a4c5b16b1a11f3753fd625e47ba840 Mon Sep 17 00:00:00 2001 From: CK Date: Mon, 8 Jul 2019 12:39:30 +1200 Subject: [PATCH 012/122] Use BlockIcon components. --- .../discover-block-list-item/index.js | 4 ++-- .../discover-block-list-item/style.scss | 19 ++++++++++++++----- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/discover-block-list-item/index.js b/packages/block-editor/src/components/discover-block-list-item/index.js index 1bc0c82da9dd18..c38b1526365d35 100644 --- a/packages/block-editor/src/components/discover-block-list-item/index.js +++ b/packages/block-editor/src/components/discover-block-list-item/index.js @@ -68,10 +68,10 @@ function DiscoverBlockListItem( {
    - XX active installations + XX active installations
    - Updated X week ago. + Updated X week ago.
    diff --git a/packages/block-editor/src/components/discover-block-list-item/style.scss b/packages/block-editor/src/components/discover-block-list-item/style.scss index b3a64702bd681c..6eb955b7e60cb5 100644 --- a/packages/block-editor/src/components/discover-block-list-item/style.scss +++ b/packages/block-editor/src/components/discover-block-list-item/style.scss @@ -71,13 +71,22 @@ display: flex; justify-content: space-between; color: $dark-gray-400; - .dashicons { - font-size: 16px; - } - .dashicons-chart-line { - font-weight: 900; + margin-top: 8px; + > div { + display: flex; + .dashicons { + font-size: 16px; + } + .dashicons-chart-line { + font-weight: 900; + } } } + .block-editor-block-icon { + width: 16px; + height: 16px; + margin-right: 4px; + } } .discover-blocks-list__item-footer { From e3631495c300403d112971b1cb4693b00fd1db59 Mon Sep 17 00:00:00 2001 From: CK Date: Mon, 8 Jul 2019 16:34:57 +1200 Subject: [PATCH 013/122] Update documentation. --- .../developers/data/data-core-block-editor.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md index 1b42d76df3e3b4..6e62873be6c1b6 100644 --- a/docs/designers-developers/developers/data/data-core-block-editor.md +++ b/docs/designers-developers/developers/data/data-core-block-editor.md @@ -278,6 +278,18 @@ _Returns_ - `Array`: ids of top-level and descendant blocks. +# **getDiscoverBlocks** + +Returns the available uninstalled blocks + +_Parameters_ + +- _state_ `Object`: Global application state. + +_Returns_ + +- `Array`: Discoverable blocks + # **getFirstMultiSelectedBlockClientId** Returns the client ID of the first block in the multi-selection set, or null @@ -1071,6 +1083,10 @@ _Parameters_ - _clientId_ `string`: Block client ID. +# **setDiscoverBlocks** + +Undocumented declaration. + # **setTemplateValidity** Returns an action object resetting the template validity. From c67d4f3f8ad1a3d5008bda29045bdb87badac540 Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 9 Jul 2019 10:47:35 +1200 Subject: [PATCH 014/122] Update mock URL. --- packages/block-editor/src/store/resolvers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/store/resolvers.js b/packages/block-editor/src/store/resolvers.js index 1a97ee594d3abe..a4a63fedd52209 100644 --- a/packages/block-editor/src/store/resolvers.js +++ b/packages/block-editor/src/store/resolvers.js @@ -11,7 +11,7 @@ import { setDiscoverBlocks } from './actions'; export default { * getDiscoverBlocks() { const discoverblocks = yield apiFetch( { - path: 'https://requestloggerbin.herokuapp.com/bin/6f2b14b8-d04d-4880-b9ff-7d30eb396c0a', + path: 'http://www.mocky.io/v2/5d23c7c32e0000b7a6c3f1ee', } ); return setDiscoverBlocks( discoverblocks ); }, From bdda0cc3c9703ceddac78549ba594444558b7566 Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 9 Jul 2019 14:53:46 +1200 Subject: [PATCH 015/122] Revert changes in BlockIcon for size and use Icon directly. --- packages/block-editor/src/components/block-icon/index.js | 4 ++-- .../src/components/discover-block-list-item/index.js | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/block-icon/index.js b/packages/block-editor/src/components/block-icon/index.js index 02dd697805f1c5..4d6106214df7d8 100644 --- a/packages/block-editor/src/components/block-icon/index.js +++ b/packages/block-editor/src/components/block-icon/index.js @@ -9,14 +9,14 @@ import { get } from 'lodash'; */ import { Path, Icon, SVG } from '@wordpress/components'; -export default function BlockIcon( { icon, showColors = false, className, size } ) { +export default function BlockIcon( { icon, showColors = false, className } ) { if ( get( icon, [ 'src' ] ) === 'block-default' ) { icon = { src: , }; } - const renderedIcon = ; + const renderedIcon = ; const style = showColors ? { backgroundColor: icon && icon.background, color: icon && icon.foreground, diff --git a/packages/block-editor/src/components/discover-block-list-item/index.js b/packages/block-editor/src/components/discover-block-list-item/index.js index c38b1526365d35..f3965f824491c3 100644 --- a/packages/block-editor/src/components/discover-block-list-item/index.js +++ b/packages/block-editor/src/components/discover-block-list-item/index.js @@ -6,7 +6,7 @@ import BlockIcon from '../block-icon'; /** * WordPress dependencies */ -import { Button } from '@wordpress/components'; +import { Button, Icon } from '@wordpress/components'; function DiscoverBlockListItem( { icon, @@ -30,7 +30,7 @@ function DiscoverBlockListItem( { className="discover-blocks-list__item-icon" style={ itemIconStyle } > - +
    @@ -68,10 +68,10 @@ function DiscoverBlockListItem( {
    - XX active installations + XX active installations
    - Updated X week ago. + Updated X week ago.
    From acca61d55f93810517636e28053dfbd9437577e3 Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 9 Jul 2019 14:54:48 +1200 Subject: [PATCH 016/122] Use Fragment from wp.element. --- packages/block-editor/src/components/inserter/menu.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 58d22284154d3e..67f06a934cc6a2 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -21,7 +21,7 @@ import scrollIntoView from 'dom-scroll-into-view'; * WordPress dependencies */ import { __, _n, _x, sprintf } from '@wordpress/i18n'; -import { Component, createRef } from '@wordpress/element'; +import { Component, Fragment, createRef } from '@wordpress/element'; import { withSpokenMessages, PanelBody } from '@wordpress/components'; import { getCategories, @@ -387,10 +387,10 @@ export class InserterMenu extends Component { isEmpty( discoverItems ) ? (

    { __( 'No blocks found.' ) }

    ) : ( - +

    { __( 'No blocks found in your library. We did find these blocks available for download:' ) }

    -     +     ) ) } From 049297fb336975d2886103bb2d4e87033ca94222 Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 9 Jul 2019 15:22:25 +1200 Subject: [PATCH 017/122] Created BlockRatings component. --- .../src/components/block-ratings/index.js | 23 ++++++++++ .../src/components/block-ratings/stars.js | 43 +++++++++++++++++++ .../src/components/block-ratings/style.scss | 19 ++++++++ .../discover-block-list-item/index.js | 14 +----- .../discover-block-list-item/style.scss | 11 +---- packages/block-editor/src/store/resolvers.js | 2 +- packages/block-editor/src/style.scss | 1 + 7 files changed, 90 insertions(+), 23 deletions(-) create mode 100644 packages/block-editor/src/components/block-ratings/index.js create mode 100644 packages/block-editor/src/components/block-ratings/stars.js create mode 100644 packages/block-editor/src/components/block-ratings/style.scss diff --git a/packages/block-editor/src/components/block-ratings/index.js b/packages/block-editor/src/components/block-ratings/index.js new file mode 100644 index 00000000000000..51fd568a71152e --- /dev/null +++ b/packages/block-editor/src/components/block-ratings/index.js @@ -0,0 +1,23 @@ +/** + * WordPress dependencies + */ +import { _n, sprintf } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import Stars from './stars'; + +export const BlockRatings = ( { rating, ratingCount } ) => ( +
    + + + { + // translators: %d: number of ratings (number). + sprintf( _n( '%d total rating', '%d total ratings', ratingCount ), ratingCount ) + } + +
    +); + +export default BlockRatings; diff --git a/packages/block-editor/src/components/block-ratings/stars.js b/packages/block-editor/src/components/block-ratings/stars.js new file mode 100644 index 00000000000000..9db30309e72b1a --- /dev/null +++ b/packages/block-editor/src/components/block-ratings/stars.js @@ -0,0 +1,43 @@ +/** + * WordPress dependencies + */ +import { __, sprintf } from '@wordpress/i18n'; +import { Icon } from '@wordpress/components'; + +/** + * Internal dependencies + */ + +function Stars( { + rating, +} ) { + let counter = rating * 2; + const items = []; + + for ( let i = 0; i < 5; i++ ) { + switch ( counter ) { + case 0: + items.push( ); + break; + + case 1: + items.push( ); + counter--; + break; + + default: + items.push( ); + counter -= 2; + } + } + + const stars = Math.round( rating / 0.5 ) * 0.5; + + return ( +
    + { items } +
    + ); +} + +export default Stars; diff --git a/packages/block-editor/src/components/block-ratings/style.scss b/packages/block-editor/src/components/block-ratings/style.scss new file mode 100644 index 00000000000000..19f39715387e2b --- /dev/null +++ b/packages/block-editor/src/components/block-ratings/style.scss @@ -0,0 +1,19 @@ +.block-ratings { + display: flex; + > div { + line-height: 1; + display: flex; + } + .dashicons { + font-size: ms(-2); + width: 1.1em; + } + .rating-count { + color: $dark-gray-400; + font-size: ms(-2); + } + + [class*="dashicons-star-"] { + color: #ffb900; + } +} diff --git a/packages/block-editor/src/components/discover-block-list-item/index.js b/packages/block-editor/src/components/discover-block-list-item/index.js index f3965f824491c3..d07a8e08847cb5 100644 --- a/packages/block-editor/src/components/discover-block-list-item/index.js +++ b/packages/block-editor/src/components/discover-block-list-item/index.js @@ -2,6 +2,7 @@ * Internal dependencies */ import BlockIcon from '../block-icon'; +import BlockRatings from '../block-ratings'; /** * WordPress dependencies @@ -36,18 +37,7 @@ function DiscoverBlockListItem( { { title } -
    -
    - - - - - -
    - - (XXX) - -
    + -
    - +
    + { description }
    @@ -65,14 +65,14 @@ function DiscoverBlockListItem( {
    -
    - +
    + Authored by XXX - + This author has X blocks, with an average rating of X.X. - + They have an average support time of X days.
    diff --git a/packages/block-editor/src/components/discover-block-list-item/style.scss b/packages/block-editor/src/components/discover-block-list-item/style.scss index 6939a9a904df18..f3fd54a5b2a722 100644 --- a/packages/block-editor/src/components/discover-block-list-item/style.scss +++ b/packages/block-editor/src/components/discover-block-list-item/style.scss @@ -1,4 +1,4 @@ -.discover-blocks-list__list-item { +.block-editor-discover-blocks-list-item { width: 100%; padding: 0; margin: 0 0 12px; @@ -18,7 +18,13 @@ text-align: left; } -.discover-blocks-list__item-header { +.block-editor-discover-blocks-list-item-panel { + display: flex; + flex-grow: 1; + flex-direction: column; +} + +.block-editor-discover-blocks-list-item-header { display: flex; flex-direction: row; padding: 12px 12px 0; @@ -27,7 +33,7 @@ display: flex; flex-grow: 1; - .discover-blocks-list__item-icon { + .block-editor-discover-blocks-list-item__icon { .block-editor-block-icon { width: 36px; height: 36px; @@ -39,23 +45,22 @@ > div { display: flex; flex-direction: column; - .discover-blocks-list__item-title { + .block-editor-discover-blocks-list-item__title { font-weight: 600; margin-left: 12px; } - .block-ratings { + .block-editor-block-ratings { margin-left: 12px; } } } } -.discover-blocks-list__item-body { +.block-editor-discover-blocks-list-item-body { display: flex; flex-direction: column; padding: 12px; - .discover-blocks-list__item-description { - color: $dark-gray-400; + .block-editor-discover-blocks-list-item__content--description { margin-top: 4px; } > div { @@ -80,7 +85,7 @@ } } -.discover-blocks-list__item-footer { +.block-editor-discover-blocks-list-item-footer { display: flex; flex-direction: column; padding: 12px; @@ -88,19 +93,11 @@ > span { margin-bottom: 4px; } - .discover-blocks-list__item-author-info, - .discover-blocks-list__item-support-time { + .block-editor-discover-blocks-list-item__content--footer { color: $dark-gray-400; } } -.discover-blocks-list__item { - font-size: $default-font-size; - color: $dark-gray-700; -} - -.discover-blocks-list__item-panel { - display: flex; - flex-grow: 1; - flex-direction: column; +.block-editor-discover-blocks-list-item__content { + color: $dark-gray-400; } From 4b8e27af08819ac1a2c8b73f7430d01474a68ef5 Mon Sep 17 00:00:00 2001 From: CK Date: Fri, 12 Jul 2019 14:46:10 +1200 Subject: [PATCH 019/122] Moved mock api to WordPress rest api. --- ...class-wp-rest-blocks-search-controller.php | 125 ++++++++++++++++++ lib/load.php | 5 + lib/rest-api.php | 7 + packages/block-editor/src/store/controls.js | 5 +- packages/block-editor/src/store/resolvers.js | 2 +- 5 files changed, 140 insertions(+), 4 deletions(-) create mode 100644 lib/class-wp-rest-blocks-search-controller.php diff --git a/lib/class-wp-rest-blocks-search-controller.php b/lib/class-wp-rest-blocks-search-controller.php new file mode 100644 index 00000000000000..2b3433f992d125 --- /dev/null +++ b/lib/class-wp-rest-blocks-search-controller.php @@ -0,0 +1,125 @@ +namespace = '__experimental'; + $this->rest_base = 'blocks'; + } + + /** + * Registers the necessary REST API routes. + * + * @access public + */ + public function register_routes() { + register_rest_route( + $this->namespace, + '/' . $this->rest_base, + array( + array( + 'methods' => WP_REST_Server::READABLE, + 'callback' => array( $this, 'get_items' ), + 'permission_callback' => array( $this, 'get_items_permissions_check' ), + ), + 'schema' => array( $this, 'get_public_item_schema' ), + ) + ); + } + + /** + * Checks whether a given request has permission to read blocks. + * + * @since 5.7.0 + * + * @param WP_REST_Request $request Full details about the request. + * @return WP_Error|bool True if the request has read access, WP_Error object otherwise. + */ + public function get_items_permissions_check( $request ) { + // if ( ! current_user_can( 'edit_theme_options' ) ) { + // return new WP_Error( + // 'rest_user_cannot_view', + // __( 'Sorry, you are not allowed to read blocks.', 'gutenberg' ) + // ); + // } + + return true; + } + + /** + * Retrieves all blocks. + * + * @since 5.7.0 + * + * @param WP_REST_Request $request Full details about the request. + * @return WP_Error|WP_REST_Response Response object on success, or WP_Error object on failure. + */ + public function get_items( $request ) { + global $wp_registered_sidebars; + + $data = json_decode( + '[ { + "id": "boxer/boxer", + "name": "boxer/boxer", + "title": "Boxer", + "icon": "archive", + "description": "Boxer puts your WordPress posts into boxes.", + "category": "discover", + "keywords": ["posts", "helloworld"], + "assets": { + "editor_script": { + "src": "http://plugins.svn.wordpress.org/boxer-block/trunk/build/index.js" + }, + "view_script": { + "src": "http://plugins.svn.wordpress.org/boxer-block/trunk/build/view.js" + }, + "style": { + "src": "http://plugins.svn.wordpress.org/boxer-block/trunk/style.css" + }, + "editor_style": { + "src": "http://plugins.svn.wordpress.org/boxer-block/trunk/editor.css" + } + } + }, { + "id": "lez-library/listicles", + "name": "lez-library/listicles", + "title": "Listicle", + "icon": "excerpt-view", + "description": "A block for listicles. You can add items, remove them, and flip them in reverse.", + "category": "discover", + "assets": { + "editor_script": { + "src": "http://plugins.svn.wordpress.org/listicles/trunk/dist/blocks.build.js" + }, + "style": { + "src": "http://plugins.svn.wordpress.org/listicles/trunk/dist/blocks.style.build.css" + }, + "editor_style": { + "src": "http://plugins.svn.wordpress.org/listicles/trunk/dist/blocks.editor.build.css" + } + } + } ]' + ); + + return rest_ensure_response( $data ); + } +} diff --git a/lib/load.php b/lib/load.php index 7a3c97fb65553b..4076f5a91cf44c 100644 --- a/lib/load.php +++ b/lib/load.php @@ -25,6 +25,11 @@ /** * End: Include for phase 2 */ + + if ( ! class_exists( 'WP_REST_Blocks_Search_Controller' ) ) { + require dirname( __FILE__ ) . '/class-wp-rest-blocks-search-controller.php'; + } + require dirname( __FILE__ ) . '/rest-api.php'; } diff --git a/lib/rest-api.php b/lib/rest-api.php index d9671557bfcb8b..91a34a78391361 100644 --- a/lib/rest-api.php +++ b/lib/rest-api.php @@ -81,3 +81,10 @@ function gutenberg_register_rest_widget_areas() { /** * End: Include for phase 2 */ + + +function gutenberg_register_rest_blocks_search() { + $blocks_search_controller = new WP_REST_Blocks_Search_Controller(); + $blocks_search_controller->register_routes(); +} +add_filter( 'rest_api_init', 'gutenberg_register_rest_blocks_search' ); diff --git a/packages/block-editor/src/store/controls.js b/packages/block-editor/src/store/controls.js index f2fee92cd09733..faa5f399216d53 100644 --- a/packages/block-editor/src/store/controls.js +++ b/packages/block-editor/src/store/controls.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { createRegistryControl } from '@wordpress/data'; +import wpApiFetch from '@wordpress/api-fetch'; /** * Calls a selector using the current state. @@ -39,9 +40,7 @@ const controls = { return registry.select( storeName )[ selectorName ]( ...args ); } ), API_FETCH( { request } ) { - // todo: replace with wp.api-fetch for real implementation - return window.fetch( request.path ) - .then( ( response ) => response.json() ); + return wpApiFetch( { ... request } ); }, }; diff --git a/packages/block-editor/src/store/resolvers.js b/packages/block-editor/src/store/resolvers.js index cba50ea69955f3..9d3293067f1364 100644 --- a/packages/block-editor/src/store/resolvers.js +++ b/packages/block-editor/src/store/resolvers.js @@ -11,7 +11,7 @@ import { setDiscoverBlocks } from './actions'; export default { * getDiscoverBlocks() { const discoverblocks = yield apiFetch( { - path: 'http://www.mocky.io/v2/5d23c9d52e0000b7a6c3f1f4', + path: '__experimental/blocks', } ); return setDiscoverBlocks( discoverblocks ); }, From 9c2ab35086296fe94ca483d906c923ff6c9a2dd4 Mon Sep 17 00:00:00 2001 From: CK Date: Mon, 15 Jul 2019 10:05:46 +1200 Subject: [PATCH 020/122] Separate DiscoverBlocksPanel to a component. --- .../components/discover-blocks-panel/index.js | 37 +++++++++++++++++++ .../src/components/inserter/menu.js | 34 +++++------------ 2 files changed, 47 insertions(+), 24 deletions(-) create mode 100644 packages/block-editor/src/components/discover-blocks-panel/index.js diff --git a/packages/block-editor/src/components/discover-blocks-panel/index.js b/packages/block-editor/src/components/discover-blocks-panel/index.js new file mode 100644 index 00000000000000..c27459a4042bdc --- /dev/null +++ b/packages/block-editor/src/components/discover-blocks-panel/index.js @@ -0,0 +1,37 @@ +/** + * WordPress dependencies + */ +import { Fragment } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; +import { withSelect } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import DiscoverBlocksList from '../discover-blocks-list'; + +function DiscoverBlocksPanel( { discoverItems, onSelect, onHover } ) { + return ( + +

    + { __( 'No blocks found in your library. We did find these blocks available for download:' ) } +

    + +     + ); +} + +export default compose( [ + withSelect( ( select, { filterValue } ) => { + const { + getDiscoverBlocks, + } = select( 'core/block-editor' ); + + const discoverItems = getDiscoverBlocks( filterValue ); + + return { + discoverItems, + }; + } ), +] )( DiscoverBlocksPanel ); diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 67f06a934cc6a2..191259b2c235c6 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -21,7 +21,7 @@ import scrollIntoView from 'dom-scroll-into-view'; * WordPress dependencies */ import { __, _n, _x, sprintf } from '@wordpress/i18n'; -import { Component, Fragment, createRef } from '@wordpress/element'; +import { Component, createRef } from '@wordpress/element'; import { withSpokenMessages, PanelBody } from '@wordpress/components'; import { getCategories, @@ -41,9 +41,10 @@ import { addQueryArgs } from '@wordpress/url'; import BlockPreview from '../block-preview'; import BlockTypesList from '../block-types-list'; import ChildBlocks from './child-blocks'; -import DiscoverBlocksList from '../discover-blocks-list'; +import DiscoverBlocksPanel from '../discover-blocks-panel'; const MAX_SUGGESTED_ITEMS = 9; +const SHOW_DISCOVER_BLOCKS = true; const stopKeyPropagation = ( event ) => event.stopPropagation(); @@ -128,7 +129,6 @@ export class InserterMenu extends Component { hoveredItem: null, suggestedItems: [], reusableItems: [], - discoverItems: [], itemsPerCategory: {}, openPanels: [ 'suggested' ], }; @@ -199,7 +199,7 @@ export class InserterMenu extends Component { }; } - filterOpenPanels( filterValue, itemsPerCategory, filteredItems, reusableItems, discoverItems ) { + filterOpenPanels( filterValue, itemsPerCategory, filteredItems, reusableItems ) { if ( filterValue === this.state.filterValue ) { return this.state.openPanels; } @@ -215,9 +215,6 @@ export class InserterMenu extends Component { Object.keys( itemsPerCategory ) ); } - if ( discoverItems.length > 0 ) { - openPanels.push( 'discover' ); - } return openPanels; } @@ -236,13 +233,11 @@ export class InserterMenu extends Component { const reusableItems = filter( filteredItems, { category: 'reusable' } ); - const discoverItems = filter( filteredItems, { category: 'discover' } ); - const getCategoryIndex = ( item ) => { return findIndex( getCategories(), ( category ) => category.slug === item.category ); }; const itemsPerCategory = flow( - ( itemList ) => filter( itemList, ( item ) => item.category !== 'reusable' && item.category !== 'discover' ), + ( itemList ) => filter( itemList, ( item ) => item.category !== 'reusable' ), ( itemList ) => sortBy( itemList, getCategoryIndex ), ( itemList ) => groupBy( itemList, 'category' ) )( filteredItems ); @@ -253,14 +248,12 @@ export class InserterMenu extends Component { filterValue, suggestedItems, reusableItems, - discoverItems, itemsPerCategory, openPanels: this.filterOpenPanels( filterValue, itemsPerCategory, filteredItems, reusableItems, - discoverItems ), } ); @@ -291,7 +284,6 @@ export class InserterMenu extends Component { itemsPerCategory, openPanels, reusableItems, - discoverItems, suggestedItems, } = this.state; const isPanelOpen = ( panel ) => openPanels.indexOf( panel ) !== -1; @@ -384,14 +376,11 @@ export class InserterMenu extends Component { ) } { isEmpty( suggestedItems ) && isEmpty( reusableItems ) && isEmpty( itemsPerCategory ) && ( - isEmpty( discoverItems ) ? - (

    { __( 'No blocks found.' ) }

    ) : + SHOW_DISCOVER_BLOCKS ? ( - -

    { __( 'No blocks found in your library. We did find these blocks available for download:' ) }

    - -     - ) + + ) : + (

    { __( 'No blocks found.' ) }

    ) ) }
    @@ -411,7 +400,6 @@ export default compose( getBlockName, getBlockRootClientId, getBlockSelectionEnd, - getDiscoverBlocks, } = select( 'core/block-editor' ); const { getChildBlockNames, @@ -426,9 +414,7 @@ export default compose( } const destinationRootBlockName = getBlockName( destinationRootClientId ); - let items = getInserterItems( destinationRootClientId ); - const discoverBlocks = getDiscoverBlocks(); - items = items.concat( discoverBlocks ); + const items = getInserterItems( destinationRootClientId ); return { rootChildBlocks: getChildBlockNames( destinationRootBlockName ), From 53e6e57ac0a86b3964d840903022aa7a2da728c1 Mon Sep 17 00:00:00 2001 From: CK Date: Mon, 15 Jul 2019 10:36:03 +1200 Subject: [PATCH 021/122] Implement basic block search. --- ...class-wp-rest-blocks-search-controller.php | 20 +++++++++++++++++-- packages/block-editor/src/store/resolvers.js | 4 ++-- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/lib/class-wp-rest-blocks-search-controller.php b/lib/class-wp-rest-blocks-search-controller.php index 2b3433f992d125..597abbd19a4bdd 100644 --- a/lib/class-wp-rest-blocks-search-controller.php +++ b/lib/class-wp-rest-blocks-search-controller.php @@ -74,7 +74,10 @@ public function get_items_permissions_check( $request ) { * @return WP_Error|WP_REST_Response Response object on success, or WP_Error object on failure. */ public function get_items( $request ) { - global $wp_registered_sidebars; + + if (!isset($_GET['search'])) { + return rest_ensure_response( array() ); + } $data = json_decode( '[ { @@ -120,6 +123,19 @@ public function get_items( $request ) { } ]' ); - return rest_ensure_response( $data ); + function block_search( $item ) + { + if(preg_match("/{$_GET['search']}/i", $item->title)) { + return true; + } + if(preg_match("/{$_GET['search']}/i", $item->description)) { + return true; + } + return false; + } + + $filtered = array_filter( $data, "block_search" ); + + return rest_ensure_response( $filtered ); } } diff --git a/packages/block-editor/src/store/resolvers.js b/packages/block-editor/src/store/resolvers.js index 9d3293067f1364..ac2229c5208b4c 100644 --- a/packages/block-editor/src/store/resolvers.js +++ b/packages/block-editor/src/store/resolvers.js @@ -9,9 +9,9 @@ import { apiFetch } from './controls'; import { setDiscoverBlocks } from './actions'; export default { - * getDiscoverBlocks() { + * getDiscoverBlocks( filterValue ) { const discoverblocks = yield apiFetch( { - path: '__experimental/blocks', + path: `__experimental/blocks?search=${ filterValue }`, } ); return setDiscoverBlocks( discoverblocks ); }, From d6cae040038e232c63232c12fe06ece6b8e8db2d Mon Sep 17 00:00:00 2001 From: CK Date: Mon, 15 Jul 2019 11:22:01 +1200 Subject: [PATCH 022/122] Handle user without permission to install blocks. --- lib/class-wp-rest-blocks-search-controller.php | 12 ++++++------ .../components/discover-blocks-panel/index.js | 15 ++++++++++++++- packages/block-editor/src/store/actions.js | 10 ++++++++++ packages/block-editor/src/store/reducer.js | 9 ++++++++- packages/block-editor/src/store/resolvers.js | 16 +++++++++++----- packages/block-editor/src/store/selectors.js | 11 +++++++++++ 6 files changed, 60 insertions(+), 13 deletions(-) diff --git a/lib/class-wp-rest-blocks-search-controller.php b/lib/class-wp-rest-blocks-search-controller.php index 597abbd19a4bdd..43c5c855396fe8 100644 --- a/lib/class-wp-rest-blocks-search-controller.php +++ b/lib/class-wp-rest-blocks-search-controller.php @@ -55,12 +55,12 @@ public function register_routes() { * @return WP_Error|bool True if the request has read access, WP_Error object otherwise. */ public function get_items_permissions_check( $request ) { - // if ( ! current_user_can( 'edit_theme_options' ) ) { - // return new WP_Error( - // 'rest_user_cannot_view', - // __( 'Sorry, you are not allowed to read blocks.', 'gutenberg' ) - // ); - // } + if ( ! current_user_can( 'install_plugins' ) ) { + return new WP_Error( + 'rest_user_cannot_view', + __( 'Sorry, you are not allowed to install blocks.', 'gutenberg' ) + ); + } return true; } diff --git a/packages/block-editor/src/components/discover-blocks-panel/index.js b/packages/block-editor/src/components/discover-blocks-panel/index.js index c27459a4042bdc..da9db74b3c4f5c 100644 --- a/packages/block-editor/src/components/discover-blocks-panel/index.js +++ b/packages/block-editor/src/components/discover-blocks-panel/index.js @@ -11,7 +11,17 @@ import { __ } from '@wordpress/i18n'; */ import DiscoverBlocksList from '../discover-blocks-list'; -function DiscoverBlocksPanel( { discoverItems, onSelect, onHover } ) { +function DiscoverBlocksPanel( { discoverItems, onSelect, onHover, hasPermission } ) { + if ( ! hasPermission ) { + return ( +

    + { __( 'No blocks found in your library.' ) } +
    + { __( 'Please contact your site administrator to install new blocks.' ) } +

    + ); + } + return (

    @@ -26,12 +36,15 @@ export default compose( [ withSelect( ( select, { filterValue } ) => { const { getDiscoverBlocks, + hasInstallBlocksPermission, } = select( 'core/block-editor' ); const discoverItems = getDiscoverBlocks( filterValue ); + const hasPermission = hasInstallBlocksPermission(); return { discoverItems, + hasPermission, }; } ), ] )( DiscoverBlocksPanel ); diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index 671b2a60992151..24cd3fbf7dcc1b 100644 --- a/packages/block-editor/src/store/actions.js +++ b/packages/block-editor/src/store/actions.js @@ -713,3 +713,13 @@ export function __unstableMarkLastChangeAsPersistent() { export function setDiscoverBlocks( discoverBlocks ) { return { type: 'SET_DISCOVER_BLOCKS', discoverBlocks }; } + +/** Returns an action object used in signalling that the user does not have permission to install blocks. +* @param {boolean} hasPermission User has permission to install blocks. +* + * @return {Object} Action object. + */ +export function setInstallBlocksPermission( hasPermission ) { + return { type: 'SET_INSTALL_BLOCKS_PERMISSION', hasPermission }; +} + diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index 4eb9c1173d756a..d03ee9607efd04 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -1231,12 +1231,19 @@ export function lastBlockAttributesChange( state, action ) { * * @return {Object} Updated state. */ -export const discoverBlocks = ( state = { items: [] }, action ) => { +export const discoverBlocks = ( state = { items: [], hasPermission: undefined }, action ) => { switch ( action.type ) { case 'SET_DISCOVER_BLOCKS' : return { ...state, items: action.discoverBlocks, + hasPermission: true, + }; + case 'SET_INSTALL_BLOCKS_PERMISSION' : + return { + ...state, + items: action.hasPermission ? state.items : [], + hasPermission: action.hasPermission, }; } return state; diff --git a/packages/block-editor/src/store/resolvers.js b/packages/block-editor/src/store/resolvers.js index ac2229c5208b4c..85d0414d8a88e8 100644 --- a/packages/block-editor/src/store/resolvers.js +++ b/packages/block-editor/src/store/resolvers.js @@ -6,13 +6,19 @@ * Internal dependencies */ import { apiFetch } from './controls'; -import { setDiscoverBlocks } from './actions'; +import { setDiscoverBlocks, setInstallBlocksPermission } from './actions'; export default { * getDiscoverBlocks( filterValue ) { - const discoverblocks = yield apiFetch( { - path: `__experimental/blocks?search=${ filterValue }`, - } ); - return setDiscoverBlocks( discoverblocks ); + try { + const discoverblocks = yield apiFetch( { + path: `__experimental/blocks?search=${ filterValue }`, + } ); + return setDiscoverBlocks( discoverblocks ); + } catch ( error ) { + if ( error.code === 'rest_user_cannot_view' ) { + return setInstallBlocksPermission( false ); + } + } }, }; diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 73f5723ea9d782..28849c994965ff 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1416,3 +1416,14 @@ function getReusableBlocks( state ) { export function getDiscoverBlocks( state ) { return state.discoverBlocks.items; } + +/** + * Returns true if user has permission to install blocks. + * + * @param {Object} state Global application state. + * + * @return {boolean} User has permission to install blocks. + */ +export function hasInstallBlocksPermission( state ) { + return state.discoverBlocks.hasPermission; +} From 0e4c81b0af931390f756927a3513fc54a8f5c1ee Mon Sep 17 00:00:00 2001 From: CK Date: Mon, 15 Jul 2019 11:38:46 +1200 Subject: [PATCH 023/122] Styling for discover blocks search description. --- .../components/discover-blocks-panel/index.js | 14 ++++++++++++-- .../components/discover-blocks-panel/style.scss | 16 ++++++++++++++++ .../src/components/inserter/style.scss | 8 -------- packages/block-editor/src/style.scss | 1 + 4 files changed, 29 insertions(+), 10 deletions(-) create mode 100644 packages/block-editor/src/components/discover-blocks-panel/style.scss diff --git a/packages/block-editor/src/components/discover-blocks-panel/index.js b/packages/block-editor/src/components/discover-blocks-panel/index.js index da9db74b3c4f5c..ae6a0adaa51a5a 100644 --- a/packages/block-editor/src/components/discover-blocks-panel/index.js +++ b/packages/block-editor/src/components/discover-blocks-panel/index.js @@ -14,7 +14,7 @@ import DiscoverBlocksList from '../discover-blocks-list'; function DiscoverBlocksPanel( { discoverItems, onSelect, onHover, hasPermission } ) { if ( ! hasPermission ) { return ( -

    +

    { __( 'No blocks found in your library.' ) }
    { __( 'Please contact your site administrator to install new blocks.' ) } @@ -22,9 +22,19 @@ function DiscoverBlocksPanel( { discoverItems, onSelect, onHover, hasPermission ); } + if ( ! discoverItems.length ) { + return ( +

    + { __( 'No blocks found in your library.' ) } +
    + { __( 'Check your spelling and try using more general keywords.' ) } +

    + ); + } + return ( -

    +

    { __( 'No blocks found in your library. We did find these blocks available for download:' ) }

    diff --git a/packages/block-editor/src/components/discover-blocks-panel/style.scss b/packages/block-editor/src/components/discover-blocks-panel/style.scss new file mode 100644 index 00000000000000..d003977798bff6 --- /dev/null +++ b/packages/block-editor/src/components/discover-blocks-panel/style.scss @@ -0,0 +1,16 @@ + +.block-editor-discover-blocks-panel__description { + font-style: italic; + padding: 0; + margin-top: 0; + text-align: left; + color: $dark-gray-400; +} + +.block-editor-discover-blocks-panel__description--no-results { + font-style: normal; + padding: 0; + margin-top: 100px; + text-align: center; + color: $dark-gray-400; +} diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index a4d2adb3f50879..87b9a79f12fa40 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -124,14 +124,6 @@ $block-inserter-search-height: 38px; text-align: center; } -.block-editor-inserter__no-results-with-discover-items { - font-style: italic; - padding: 0; - margin-top: 0; - text-align: left; - color: $dark-gray-400; -} - .block-editor-inserter__child-blocks { padding: 0 $grid-size-large; } diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index fbb1e9b746b315..59238bbd82b1db 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -18,6 +18,7 @@ @import "./components/contrast-checker/style.scss"; @import "./components/discover-block-list-item/style.scss"; @import "./components/discover-blocks-list/style.scss"; +@import "./components/discover-blocks-panel/style.scss"; @import "./components/default-block-appender/style.scss"; @import "./components/font-sizes/style.scss"; @import "./components/inner-blocks/style.scss"; From 97326c8516d0b6467ca1b6e8ad1f7da69ec1c48f Mon Sep 17 00:00:00 2001 From: CK Date: Mon, 15 Jul 2019 14:39:00 +1200 Subject: [PATCH 024/122] Handle error when script can't load. Cache search results. --- .../block-editor/src/components/inserter/menu.js | 12 ++++++++++-- packages/block-editor/src/store/actions.js | 5 +++-- packages/block-editor/src/store/reducer.js | 6 ++++-- packages/block-editor/src/store/resolvers.js | 2 +- packages/block-editor/src/store/selectors.js | 8 ++++++-- 5 files changed, 24 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 191259b2c235c6..773292de5733ec 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -99,11 +99,13 @@ export const normalizeTerm = ( term ) => { * * @param {Object} asset The asset object as described in block.json. * @param {Function} onLoad The callback function when script is loaded. + * @param {Function} onError The callback function when script is error loading. */ -export const loadScipt = ( asset, onLoad ) => { +export const loadScipt = ( asset, onLoad, onError ) => { const script = document.createElement( 'script' ); script.src = asset.src; script.onload = onLoad; + script.onerror = onError; document.body.appendChild( script ); }; @@ -473,6 +475,9 @@ export default compose( replaceBlocks, insertBlock, } = dispatch( 'core/block-editor' ); + const { + createErrorNotice, + } = dispatch( 'core/notices' ); const { getSelectedBlock, } = select( 'core/block-editor' ); @@ -505,9 +510,12 @@ export default compose( handleInsertBlock( block ); } }; + const onError = () => { + createErrorNotice( 'Block previews can\'t load.' ); + }; if ( item.assets.editor_script ) { scriptsCount++; - loadScipt( item.assets.editor_script, onLoad ); + loadScipt( item.assets.editor_script, onLoad, onError ); } if ( item.assets.style ) { loadStyle( item.assets.style ); diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index 24cd3fbf7dcc1b..6815babcb08c9f 100644 --- a/packages/block-editor/src/store/actions.js +++ b/packages/block-editor/src/store/actions.js @@ -707,11 +707,12 @@ export function __unstableMarkLastChangeAsPersistent() { /** Returns an action object used in signalling that the discover blocks have been updated. * @param {Array} discoverBlocks Discoverable blocks. + * @param {string} filterValue Search string. * * @return {Object} Action object. */ -export function setDiscoverBlocks( discoverBlocks ) { - return { type: 'SET_DISCOVER_BLOCKS', discoverBlocks }; +export function setDiscoverBlocks( discoverBlocks, filterValue ) { + return { type: 'SET_DISCOVER_BLOCKS', discoverBlocks, filterValue }; } /** Returns an action object used in signalling that the user does not have permission to install blocks. diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index d03ee9607efd04..cde21b780694d7 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -1231,12 +1231,14 @@ export function lastBlockAttributesChange( state, action ) { * * @return {Object} Updated state. */ -export const discoverBlocks = ( state = { items: [], hasPermission: undefined }, action ) => { +export const discoverBlocks = ( state = { results: {}, hasPermission: undefined, filterValue: undefined }, action ) => { switch ( action.type ) { case 'SET_DISCOVER_BLOCKS' : return { ...state, - items: action.discoverBlocks, + results: Object.assign( {}, state.results, { + [ action.filterValue ]: action.discoverBlocks, + } ), hasPermission: true, }; case 'SET_INSTALL_BLOCKS_PERMISSION' : diff --git a/packages/block-editor/src/store/resolvers.js b/packages/block-editor/src/store/resolvers.js index 85d0414d8a88e8..ff1adbeb040c06 100644 --- a/packages/block-editor/src/store/resolvers.js +++ b/packages/block-editor/src/store/resolvers.js @@ -14,7 +14,7 @@ export default { const discoverblocks = yield apiFetch( { path: `__experimental/blocks?search=${ filterValue }`, } ); - return setDiscoverBlocks( discoverblocks ); + return setDiscoverBlocks( discoverblocks, filterValue ); } catch ( error ) { if ( error.code === 'rest_user_cannot_view' ) { return setInstallBlocksPermission( false ); diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 28849c994965ff..0273df29e2093c 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1410,11 +1410,15 @@ function getReusableBlocks( state ) { * Returns the available uninstalled blocks * * @param {Object} state Global application state. + * @param {string} filterValue Search string. * * @return {Array} Discoverable blocks */ -export function getDiscoverBlocks( state ) { - return state.discoverBlocks.items; +export function getDiscoverBlocks( state, filterValue ) { + if ( ! state.discoverBlocks.results[ filterValue ] ) { + return []; + } + return state.discoverBlocks.results[ filterValue ]; } /** From c2d142ad2f3bfd1c227ad9acea04c30f61a1e003 Mon Sep 17 00:00:00 2001 From: CK Date: Mon, 15 Jul 2019 14:56:59 +1200 Subject: [PATCH 025/122] Removed text to follow design. --- .../block-editor/src/components/discover-blocks-panel/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/block-editor/src/components/discover-blocks-panel/index.js b/packages/block-editor/src/components/discover-blocks-panel/index.js index ae6a0adaa51a5a..5ad3756aa72ec0 100644 --- a/packages/block-editor/src/components/discover-blocks-panel/index.js +++ b/packages/block-editor/src/components/discover-blocks-panel/index.js @@ -26,8 +26,6 @@ function DiscoverBlocksPanel( { discoverItems, onSelect, onHover, hasPermission return (

    { __( 'No blocks found in your library.' ) } -
    - { __( 'Check your spelling and try using more general keywords.' ) }

    ); } From 4ddf8c7329f2a08ce30d6ca0ab75ae6d1be8baa6 Mon Sep 17 00:00:00 2001 From: CK Date: Mon, 15 Jul 2019 15:25:42 +1200 Subject: [PATCH 026/122] Fixed search not returning as array from the mock API. --- lib/class-wp-rest-blocks-search-controller.php | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/lib/class-wp-rest-blocks-search-controller.php b/lib/class-wp-rest-blocks-search-controller.php index 43c5c855396fe8..faff8946898515 100644 --- a/lib/class-wp-rest-blocks-search-controller.php +++ b/lib/class-wp-rest-blocks-search-controller.php @@ -109,6 +109,7 @@ public function get_items( $request ) { "icon": "excerpt-view", "description": "A block for listicles. You can add items, remove them, and flip them in reverse.", "category": "discover", + "keywords": ["posts", "helloworld"], "assets": { "editor_script": { "src": "http://plugins.svn.wordpress.org/listicles/trunk/dist/blocks.build.js" @@ -122,20 +123,17 @@ public function get_items( $request ) { } } ]' ); - - function block_search( $item ) - { + $filtered = array(); + + foreach ( $data as $item ) { if(preg_match("/{$_GET['search']}/i", $item->title)) { - return true; + $filtered[] = $item; } - if(preg_match("/{$_GET['search']}/i", $item->description)) { - return true; + else if(preg_match("/{$_GET['search']}/i", $item->description)) { + $filtered[] = $item; } - return false; } - $filtered = array_filter( $data, "block_search" ); - - return rest_ensure_response( $filtered ); + return rest_ensure_response( $filtered ); } } From 95bcc09f54e9b5255671831f153b429bba02bdce Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 16 Jul 2019 10:20:25 +1200 Subject: [PATCH 027/122] Refactor stars component to a shorter code using @talldan's recommendation. --- .../src/components/block-ratings/stars.js | 39 +++++++------------ 1 file changed, 13 insertions(+), 26 deletions(-) diff --git a/packages/block-editor/src/components/block-ratings/stars.js b/packages/block-editor/src/components/block-ratings/stars.js index 9db30309e72b1a..a6db24ceaa6b18 100644 --- a/packages/block-editor/src/components/block-ratings/stars.js +++ b/packages/block-editor/src/components/block-ratings/stars.js @@ -1,41 +1,28 @@ /** - * WordPress dependencies + * External dependencies */ -import { __, sprintf } from '@wordpress/i18n'; -import { Icon } from '@wordpress/components'; +import { times } from 'lodash'; /** - * Internal dependencies + * WordPress dependencies */ +import { __, sprintf } from '@wordpress/i18n'; +import { Icon } from '@wordpress/components'; function Stars( { rating, } ) { - let counter = rating * 2; - const items = []; - - for ( let i = 0; i < 5; i++ ) { - switch ( counter ) { - case 0: - items.push( ); - break; - - case 1: - items.push( ); - counter--; - break; - - default: - items.push( ); - counter -= 2; - } - } - const stars = Math.round( rating / 0.5 ) * 0.5; + const fullStarCount = Math.floor( rating ); + const halfStarCount = Math.ceil( rating - fullStarCount ); + const emptyStarCount = 5 - ( fullStarCount + halfStarCount ); + return ( -
    - { items } +
    + { times( fullStarCount, ( i ) => ) } + { times( halfStarCount, ( i ) => ) } + { times( emptyStarCount, ( i ) => ) }
    ); } From 3745493c517d801a0211f45a0cb6c59b40e89988 Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 16 Jul 2019 10:29:49 +1200 Subject: [PATCH 028/122] Renamed class names based on guideline and recommendation. --- .../discover-block-list-item/index.js | 22 +++++++++---------- .../discover-block-list-item/style.scss | 20 ++++++++--------- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/block-editor/src/components/discover-block-list-item/index.js b/packages/block-editor/src/components/discover-block-list-item/index.js index b4a500a7d5573c..2155284463857a 100644 --- a/packages/block-editor/src/components/discover-block-list-item/index.js +++ b/packages/block-editor/src/components/discover-block-list-item/index.js @@ -23,18 +23,18 @@ function DiscoverBlockListItem( { } : {}; return ( -
  • -
    -
    +
  • +
    +
    - + { title } @@ -52,8 +52,8 @@ function DiscoverBlockListItem( { Add
    -
    - +
    + { description }
    @@ -65,14 +65,14 @@ function DiscoverBlockListItem( {
    -
    - +
    + Authored by XXX - + This author has X blocks, with an average rating of X.X. - + They have an average support time of X days.
    diff --git a/packages/block-editor/src/components/discover-block-list-item/style.scss b/packages/block-editor/src/components/discover-block-list-item/style.scss index f3fd54a5b2a722..37d0662ef1cf9f 100644 --- a/packages/block-editor/src/components/discover-block-list-item/style.scss +++ b/packages/block-editor/src/components/discover-block-list-item/style.scss @@ -1,4 +1,4 @@ -.block-editor-discover-blocks-list-item { +.block-editor-discover-block-list-item { width: 100%; padding: 0; margin: 0 0 12px; @@ -18,13 +18,13 @@ text-align: left; } -.block-editor-discover-blocks-list-item-panel { +.block-editor-discover-block-list-item__panel { display: flex; flex-grow: 1; flex-direction: column; } -.block-editor-discover-blocks-list-item-header { +.block-editor-discover-block-list-item__header { display: flex; flex-direction: row; padding: 12px 12px 0; @@ -33,7 +33,7 @@ display: flex; flex-grow: 1; - .block-editor-discover-blocks-list-item__icon { + .block-editor-discover-block-list-item__icon { .block-editor-block-icon { width: 36px; height: 36px; @@ -45,7 +45,7 @@ > div { display: flex; flex-direction: column; - .block-editor-discover-blocks-list-item__title { + .block-editor-discover-block-list-item__title { font-weight: 600; margin-left: 12px; } @@ -56,11 +56,11 @@ } } -.block-editor-discover-blocks-list-item-body { +.block-editor-discover-block-list-item__body { display: flex; flex-direction: column; padding: 12px; - .block-editor-discover-blocks-list-item__content--description { + .block-editor-discover-block-list-item__content-description { margin-top: 4px; } > div { @@ -85,7 +85,7 @@ } } -.block-editor-discover-blocks-list-item-footer { +.block-editor-discover-block-list-item__footer { display: flex; flex-direction: column; padding: 12px; @@ -93,11 +93,11 @@ > span { margin-bottom: 4px; } - .block-editor-discover-blocks-list-item__content--footer { + .block-editor-discover-block-list-item__content-footer { color: $dark-gray-400; } } -.block-editor-discover-blocks-list-item__content { +.block-editor-discover-block-list-item__content { color: $dark-gray-400; } From 6633c6d7c0750c6242600653bf9d35148932a71b Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 16 Jul 2019 10:33:17 +1200 Subject: [PATCH 029/122] Make React avoid rendering style attribute when icon is falsey. --- .../src/components/discover-block-list-item/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/discover-block-list-item/index.js b/packages/block-editor/src/components/discover-block-list-item/index.js index 2155284463857a..9e4b67a45a8384 100644 --- a/packages/block-editor/src/components/discover-block-list-item/index.js +++ b/packages/block-editor/src/components/discover-block-list-item/index.js @@ -20,7 +20,7 @@ function DiscoverBlockListItem( { const itemIconStyle = icon ? { backgroundColor: icon.background, color: icon.foreground, - } : {}; + } : undefined; return (
  • From c1f7b1146dc83b35ac8b90049ffffbecd66c26f2 Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 16 Jul 2019 10:39:49 +1200 Subject: [PATCH 030/122] Removed redundant styles. --- .../src/components/discover-block-list-item/style.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/block-editor/src/components/discover-block-list-item/style.scss b/packages/block-editor/src/components/discover-block-list-item/style.scss index 37d0662ef1cf9f..268646375a01ed 100644 --- a/packages/block-editor/src/components/discover-block-list-item/style.scss +++ b/packages/block-editor/src/components/discover-block-list-item/style.scss @@ -78,11 +78,6 @@ } } } - .block-editor-block-icon { - width: 16px; - height: 16px; - margin-right: 4px; - } } .block-editor-discover-block-list-item__footer { From 5a225d8894844cc7a03d9841b5729014628a6bfa Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 16 Jul 2019 11:38:21 +1200 Subject: [PATCH 031/122] Refactor DiscoverBlockListItem to smaller components. --- .../discover-block-author-info/index.js | 22 ++++++++++++ .../discover-block-author-info/style.scss | 4 +++ .../components/discover-block-info/index.js | 25 ++++++++++++++ .../components/discover-block-info/style.scss | 18 ++++++++++ .../discover-block-list-item/index.js | 34 +++++-------------- .../discover-block-list-item/style.scss | 24 ------------- packages/block-editor/src/style.scss | 2 ++ 7 files changed, 80 insertions(+), 49 deletions(-) create mode 100644 packages/block-editor/src/components/discover-block-author-info/index.js create mode 100644 packages/block-editor/src/components/discover-block-author-info/style.scss create mode 100644 packages/block-editor/src/components/discover-block-info/index.js create mode 100644 packages/block-editor/src/components/discover-block-info/style.scss diff --git a/packages/block-editor/src/components/discover-block-author-info/index.js b/packages/block-editor/src/components/discover-block-author-info/index.js new file mode 100644 index 00000000000000..087d9fb78ab768 --- /dev/null +++ b/packages/block-editor/src/components/discover-block-author-info/index.js @@ -0,0 +1,22 @@ +/** + * WordPress dependencies + */ +import { Fragment } from '@wordpress/element'; + +function DiscoverBlockAuthorInfo() { + return ( + + + Authored by XXX + + + This author has X blocks, with an average rating of X.X. + + + They have an average support time of X days. + + + ); +} + +export default DiscoverBlockAuthorInfo; diff --git a/packages/block-editor/src/components/discover-block-author-info/style.scss b/packages/block-editor/src/components/discover-block-author-info/style.scss new file mode 100644 index 00000000000000..576b51699c4b44 --- /dev/null +++ b/packages/block-editor/src/components/discover-block-author-info/style.scss @@ -0,0 +1,4 @@ +.block-editor-discover-block-author-info__content { + color: $dark-gray-400; + margin-bottom: 4px; +} diff --git a/packages/block-editor/src/components/discover-block-info/index.js b/packages/block-editor/src/components/discover-block-info/index.js new file mode 100644 index 00000000000000..084b89904cbc52 --- /dev/null +++ b/packages/block-editor/src/components/discover-block-info/index.js @@ -0,0 +1,25 @@ +/** + * WordPress dependencies + */ +import { Fragment } from '@wordpress/element'; +import { Icon } from '@wordpress/components'; + +function DiscoverBlockInfo( { description } ) { + return ( + + + { description } + +
    +
    + XX active installations +
    +
    + Updated X week ago. +
    +
    +     + ); +} + +export default DiscoverBlockInfo; diff --git a/packages/block-editor/src/components/discover-block-info/style.scss b/packages/block-editor/src/components/discover-block-info/style.scss new file mode 100644 index 00000000000000..bf925bb3d0d7c2 --- /dev/null +++ b/packages/block-editor/src/components/discover-block-info/style.scss @@ -0,0 +1,18 @@ +.discover-block-info__content-description { + margin-top: 4px; +} +.discover-block-info-row { + display: flex; + justify-content: space-between; + color: $dark-gray-400; + margin-top: 8px; + .discover-block-info-column { + display: flex; + .dashicons { + font-size: 16px; + } + .dashicons-chart-line { + font-weight: 900; + } + } +} diff --git a/packages/block-editor/src/components/discover-block-list-item/index.js b/packages/block-editor/src/components/discover-block-list-item/index.js index 9e4b67a45a8384..272ff19bfacb25 100644 --- a/packages/block-editor/src/components/discover-block-list-item/index.js +++ b/packages/block-editor/src/components/discover-block-list-item/index.js @@ -1,13 +1,15 @@ /** - * Internal dependencies + * WordPress dependencies */ -import BlockIcon from '../block-icon'; -import BlockRatings from '../block-ratings'; +import { Button } from '@wordpress/components'; /** - * WordPress dependencies + * Internal dependencies */ -import { Button, Icon } from '@wordpress/components'; +import BlockIcon from '../block-icon'; +import BlockRatings from '../block-ratings'; +import DiscoverBlockAuthorInfo from '../discover-block-author-info'; +import DiscoverBlockInfo from '../discover-block-info'; function DiscoverBlockListItem( { icon, @@ -53,28 +55,10 @@ function DiscoverBlockListItem( {
    • - - { description } - -
    -
    - XX active installations -
    -
    - Updated X week ago. -
    -
    +
    - - Authored by XXX - - - This author has X blocks, with an average rating of X.X. - - - They have an average support time of X days. - +
    diff --git a/packages/block-editor/src/components/discover-block-list-item/style.scss b/packages/block-editor/src/components/discover-block-list-item/style.scss index 268646375a01ed..9380a50c5d2eb5 100644 --- a/packages/block-editor/src/components/discover-block-list-item/style.scss +++ b/packages/block-editor/src/components/discover-block-list-item/style.scss @@ -60,24 +60,6 @@ display: flex; flex-direction: column; padding: 12px; - .block-editor-discover-block-list-item__content-description { - margin-top: 4px; - } - > div { - display: flex; - justify-content: space-between; - color: $dark-gray-400; - margin-top: 8px; - > div { - display: flex; - .dashicons { - font-size: 16px; - } - .dashicons-chart-line { - font-weight: 900; - } - } - } } .block-editor-discover-block-list-item__footer { @@ -85,12 +67,6 @@ flex-direction: column; padding: 12px; background-color: $light-gray-500; - > span { - margin-bottom: 4px; - } - .block-editor-discover-block-list-item__content-footer { - color: $dark-gray-400; - } } .block-editor-discover-block-list-item__content { diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 59238bbd82b1db..015ba73e89ca6b 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -16,6 +16,8 @@ @import "./components/button-block-appender/style.scss"; @import "./components/color-palette/control.scss"; @import "./components/contrast-checker/style.scss"; +@import "./components/discover-block-info/style.scss"; +@import "./components/discover-block-author-info/style.scss"; @import "./components/discover-block-list-item/style.scss"; @import "./components/discover-blocks-list/style.scss"; @import "./components/discover-blocks-panel/style.scss"; From 9041d62991c3c060d63a3560c1393624a8030aa5 Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 16 Jul 2019 12:05:01 +1200 Subject: [PATCH 032/122] Renamed class names based on guideline and recommendation. --- .../src/components/discover-blocks-panel/index.js | 4 ++-- .../src/components/discover-blocks-panel/style.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/discover-blocks-panel/index.js b/packages/block-editor/src/components/discover-blocks-panel/index.js index 5ad3756aa72ec0..b9a25624772b8c 100644 --- a/packages/block-editor/src/components/discover-blocks-panel/index.js +++ b/packages/block-editor/src/components/discover-blocks-panel/index.js @@ -14,7 +14,7 @@ import DiscoverBlocksList from '../discover-blocks-list'; function DiscoverBlocksPanel( { discoverItems, onSelect, onHover, hasPermission } ) { if ( ! hasPermission ) { return ( -

    +

    { __( 'No blocks found in your library.' ) }
    { __( 'Please contact your site administrator to install new blocks.' ) } @@ -24,7 +24,7 @@ function DiscoverBlocksPanel( { discoverItems, onSelect, onHover, hasPermission if ( ! discoverItems.length ) { return ( -

    +

    { __( 'No blocks found in your library.' ) }

    ); diff --git a/packages/block-editor/src/components/discover-blocks-panel/style.scss b/packages/block-editor/src/components/discover-blocks-panel/style.scss index d003977798bff6..bec1adfcf3253e 100644 --- a/packages/block-editor/src/components/discover-blocks-panel/style.scss +++ b/packages/block-editor/src/components/discover-blocks-panel/style.scss @@ -7,7 +7,7 @@ color: $dark-gray-400; } -.block-editor-discover-blocks-panel__description--no-results { +.block-editor-discover-blocks-panel__description.has-no-results { font-style: normal; padding: 0; margin-top: 100px; From 1d77f858c4ea73c264fe41a409ae481f3a6f93ab Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 16 Jul 2019 12:07:54 +1200 Subject: [PATCH 033/122] Align @param descriptions. --- packages/block-editor/src/store/selectors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 0273df29e2093c..a2facc85400e13 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1409,7 +1409,7 @@ function getReusableBlocks( state ) { /** * Returns the available uninstalled blocks * - * @param {Object} state Global application state. + * @param {Object} state Global application state. * @param {string} filterValue Search string. * * @return {Array} Discoverable blocks From 777454704ad912c51be99246c8345d278d2b7b7b Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 16 Jul 2019 12:10:11 +1200 Subject: [PATCH 034/122] Removed redundant comments. --- packages/block-editor/src/store/resolvers.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/block-editor/src/store/resolvers.js b/packages/block-editor/src/store/resolvers.js index ff1adbeb040c06..217894617c28d3 100644 --- a/packages/block-editor/src/store/resolvers.js +++ b/packages/block-editor/src/store/resolvers.js @@ -1,7 +1,3 @@ -/** - * WordPress dependencies - */ - /** * Internal dependencies */ From 01c311b6b4240a7f84b1c7e4224c7660edaf44a2 Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 16 Jul 2019 14:31:23 +1200 Subject: [PATCH 035/122] Refactor DiscoverBlockListItem to smaller components. Renamed class names based on guideline and recommendation. --- .../src/components/block-ratings/index.js | 7 ++- .../discover-block-author-info/index.js | 2 +- .../discover-block-author-info/style.scss | 5 ++ .../components/discover-block-header/index.js | 46 +++++++++++++++++++ .../discover-block-header/style.scss | 24 ++++++++++ .../components/discover-block-info/index.js | 10 ++-- .../components/discover-block-info/style.scss | 16 +++++-- .../discover-block-list-item/index.js | 41 +---------------- .../discover-block-list-item/style.scss | 25 ---------- packages/block-editor/src/style.scss | 1 + 10 files changed, 100 insertions(+), 77 deletions(-) create mode 100644 packages/block-editor/src/components/discover-block-header/index.js create mode 100644 packages/block-editor/src/components/discover-block-header/style.scss diff --git a/packages/block-editor/src/components/block-ratings/index.js b/packages/block-editor/src/components/block-ratings/index.js index 04e3e14e87df7b..a1ebd7da89ebef 100644 --- a/packages/block-editor/src/components/block-ratings/index.js +++ b/packages/block-editor/src/components/block-ratings/index.js @@ -11,11 +11,14 @@ import Stars from './stars'; export const BlockRatings = ( { rating, ratingCount } ) => (
    - - { + + ({ ratingCount })
    ); diff --git a/packages/block-editor/src/components/discover-block-author-info/index.js b/packages/block-editor/src/components/discover-block-author-info/index.js index 087d9fb78ab768..10a7effb49d03a 100644 --- a/packages/block-editor/src/components/discover-block-author-info/index.js +++ b/packages/block-editor/src/components/discover-block-author-info/index.js @@ -6,7 +6,7 @@ import { Fragment } from '@wordpress/element'; function DiscoverBlockAuthorInfo() { return ( - + Authored by XXX diff --git a/packages/block-editor/src/components/discover-block-author-info/style.scss b/packages/block-editor/src/components/discover-block-author-info/style.scss index 576b51699c4b44..9508e8dd3f64be 100644 --- a/packages/block-editor/src/components/discover-block-author-info/style.scss +++ b/packages/block-editor/src/components/discover-block-author-info/style.scss @@ -2,3 +2,8 @@ color: $dark-gray-400; margin-bottom: 4px; } + +.block-editor-discover-block-author-info__content-author { + margin-bottom: 4px; + font-size: 14px; +} diff --git a/packages/block-editor/src/components/discover-block-header/index.js b/packages/block-editor/src/components/discover-block-header/index.js new file mode 100644 index 00000000000000..92847db9e778f8 --- /dev/null +++ b/packages/block-editor/src/components/discover-block-header/index.js @@ -0,0 +1,46 @@ +/** + * WordPress dependencies + */ +import { Button } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { Fragment } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import BlockIcon from '../block-icon'; +import BlockRatings from '../block-ratings'; + +function DiscoverBlockHeader( { icon, title, onClick } ) { + const itemIconStyle = icon ? { + backgroundColor: icon.background, + color: icon.foreground, + } : undefined; + + return ( + +
    + + + +
    + + { title } + + +
    + +
    +     + ); +} + +export default DiscoverBlockHeader; diff --git a/packages/block-editor/src/components/discover-block-header/style.scss b/packages/block-editor/src/components/discover-block-header/style.scss new file mode 100644 index 00000000000000..a67be10787591d --- /dev/null +++ b/packages/block-editor/src/components/discover-block-header/style.scss @@ -0,0 +1,24 @@ +.block-editor-discover-block-header__row { + display: flex; + flex-grow: 1; + + .block-editor-block-icon { + width: 36px; + height: 36px; + font-size: 36px; + background-color: $light-gray-300; + } + + .block-editor-discover-block-header__column { + display: flex; + flex-direction: column; + flex-grow: 1; + .block-editor-discover-block-header__title { + font-weight: 600; + margin-left: 12px; + } + .block-editor-block-ratings { + margin-left: 12px; + } + } +} diff --git a/packages/block-editor/src/components/discover-block-info/index.js b/packages/block-editor/src/components/discover-block-info/index.js index 084b89904cbc52..03c57c84229628 100644 --- a/packages/block-editor/src/components/discover-block-info/index.js +++ b/packages/block-editor/src/components/discover-block-info/index.js @@ -7,15 +7,15 @@ import { Icon } from '@wordpress/components'; function DiscoverBlockInfo( { description } ) { return ( - + { description } -
    -
    +
    +
    XX active installations
    -
    - Updated X week ago. +
    + Updated X week ago
    diff --git a/packages/block-editor/src/components/discover-block-info/style.scss b/packages/block-editor/src/components/discover-block-info/style.scss index bf925bb3d0d7c2..1dae97ee6e4187 100644 --- a/packages/block-editor/src/components/discover-block-info/style.scss +++ b/packages/block-editor/src/components/discover-block-info/style.scss @@ -1,16 +1,22 @@ -.discover-block-info__content-description { - margin-top: 4px; +.block-editor-discover-block-info__content { + font-size: 14px; } -.discover-block-info-row { + +.block-editor-discover-block-info__row { display: flex; justify-content: space-between; color: $dark-gray-400; margin-top: 8px; - .discover-block-info-column { + + .block-editor-discover-block-info__column { display: flex; - .dashicons { + align-items: flex-start; + + .dashicon { font-size: 16px; + margin-right: 4px; } + .dashicons-chart-line { font-weight: 900; } diff --git a/packages/block-editor/src/components/discover-block-list-item/index.js b/packages/block-editor/src/components/discover-block-list-item/index.js index 272ff19bfacb25..dd0adce3896fe6 100644 --- a/packages/block-editor/src/components/discover-block-list-item/index.js +++ b/packages/block-editor/src/components/discover-block-list-item/index.js @@ -1,58 +1,21 @@ -/** - * WordPress dependencies - */ -import { Button } from '@wordpress/components'; - /** * Internal dependencies */ -import BlockIcon from '../block-icon'; -import BlockRatings from '../block-ratings'; +import DiscoverBlockHeader from '../discover-block-header'; import DiscoverBlockAuthorInfo from '../discover-block-author-info'; import DiscoverBlockInfo from '../discover-block-info'; function DiscoverBlockListItem( { icon, onClick, - isDisabled, title, description, - ...props } ) { - const itemIconStyle = icon ? { - backgroundColor: icon.background, - color: icon.foreground, - } : undefined; - return (
  • -
    - - - -
    - - { title } - - -
    -
    - +
    diff --git a/packages/block-editor/src/components/discover-block-list-item/style.scss b/packages/block-editor/src/components/discover-block-list-item/style.scss index 9380a50c5d2eb5..6d6f3053dcd28e 100644 --- a/packages/block-editor/src/components/discover-block-list-item/style.scss +++ b/packages/block-editor/src/components/discover-block-list-item/style.scss @@ -29,31 +29,6 @@ flex-direction: row; padding: 12px 12px 0; align-items: start; - > div { - display: flex; - flex-grow: 1; - - .block-editor-discover-block-list-item__icon { - .block-editor-block-icon { - width: 36px; - height: 36px; - font-size: 36px; - background-color: $light-gray-300; - } - } - - > div { - display: flex; - flex-direction: column; - .block-editor-discover-block-list-item__title { - font-weight: 600; - margin-left: 12px; - } - .block-editor-block-ratings { - margin-left: 12px; - } - } - } } .block-editor-discover-block-list-item__body { diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 015ba73e89ca6b..658286f89fb498 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -16,6 +16,7 @@ @import "./components/button-block-appender/style.scss"; @import "./components/color-palette/control.scss"; @import "./components/contrast-checker/style.scss"; +@import "./components/discover-block-header/style.scss"; @import "./components/discover-block-info/style.scss"; @import "./components/discover-block-author-info/style.scss"; @import "./components/discover-block-list-item/style.scss"; From b9baa645c5a02240b195750924311f95c6c0f5ab Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 16 Jul 2019 15:25:58 +1200 Subject: [PATCH 036/122] Tidy up blocks search controller code. --- lib/class-wp-rest-blocks-search-controller.php | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/lib/class-wp-rest-blocks-search-controller.php b/lib/class-wp-rest-blocks-search-controller.php index faff8946898515..776cf82d445de4 100644 --- a/lib/class-wp-rest-blocks-search-controller.php +++ b/lib/class-wp-rest-blocks-search-controller.php @@ -75,7 +75,7 @@ public function get_items_permissions_check( $request ) { */ public function get_items( $request ) { - if (!isset($_GET['search'])) { + if ( ! isset($_REQUEST[ 'search' ] ) ) { return rest_ensure_response( array() ); } @@ -123,13 +123,14 @@ public function get_items( $request ) { } } ]' ); - $filtered = array(); + $filtered = array(); + $search_string = preg_quote( $_REQUEST[ 'search' ] ); foreach ( $data as $item ) { - if(preg_match("/{$_GET['search']}/i", $item->title)) { + if( preg_match( "/{$search_string}/i", $item->title ) ) { $filtered[] = $item; } - else if(preg_match("/{$_GET['search']}/i", $item->description)) { + else if( preg_match( "/{$search_string}/i", $item->description ) ) { $filtered[] = $item; } } From 37a008040c780261feccd0bcf5f516d5b94f41e6 Mon Sep 17 00:00:00 2001 From: CK Date: Thu, 18 Jul 2019 10:45:13 +1200 Subject: [PATCH 037/122] Implement Retry button when Block previews can't load. --- .../src/components/inserter/menu.js | 43 ++++++++++++------- 1 file changed, 28 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 773292de5733ec..0743a37bd3e18b 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -101,7 +101,14 @@ export const normalizeTerm = ( term ) => { * @param {Function} onLoad The callback function when script is loaded. * @param {Function} onError The callback function when script is error loading. */ -export const loadScipt = ( asset, onLoad, onError ) => { +const loadScipt = ( asset, onLoad, onError ) => { + if ( ! asset ) { + return; + } + const existing = document.querySelector( `script[src="${ asset.src }"]` ); + if ( existing ) { + existing.parentNode.removeChild( existing ); + } const script = document.createElement( 'script' ); script.src = asset.src; script.onload = onLoad; @@ -115,7 +122,10 @@ export const loadScipt = ( asset, onLoad, onError ) => { * @param {Object} asset The asset object as described in block.json. * @param {Function} onLoad The callback function when script is loaded. */ -export const loadStyle = ( asset ) => { +const loadStyle = ( asset ) => { + if ( ! asset ) { + return; + } const link = document.createElement( 'link' ); link.rel = 'stylesheet'; link.href = asset.src; @@ -477,6 +487,7 @@ export default compose( } = dispatch( 'core/block-editor' ); const { createErrorNotice, + removeNotice, } = dispatch( 'core/notices' ); const { getSelectedBlock, @@ -498,12 +509,7 @@ export default compose( }; if ( item.assets ) { - let scriptsCount = 0; const onLoad = () => { - scriptsCount--; - if ( scriptsCount > 0 ) { - return; - } const registeredBlocks = getBlockTypes(); if ( registeredBlocks.length ) { const block = createBlock( item.name ); @@ -511,15 +517,22 @@ export default compose( } }; const onError = () => { - createErrorNotice( 'Block previews can\'t load.' ); + createErrorNotice( __( 'Block previews can\'t load.' ), { + id: 'block-preview-error', + actions: [ + { + label: __( 'Retry' ), + onClick: () => { + removeNotice( 'block-preview-error' ); + loadScipt( item.assets.editor_script, onLoad, onError ); + loadStyle( item.assets.style ); + }, + }, + ], + } ); }; - if ( item.assets.editor_script ) { - scriptsCount++; - loadScipt( item.assets.editor_script, onLoad, onError ); - } - if ( item.assets.style ) { - loadStyle( item.assets.style ); - } + loadScipt( item.assets.editor_script, onLoad, onError ); + loadStyle( item.assets.style ); } else { const insertedBlock = createBlock( name, initialAttributes ); handleInsertBlock( insertedBlock ); From 16dfdfe2fef4716c8c0658682d7461a2ae9a61c7 Mon Sep 17 00:00:00 2001 From: CK Date: Thu, 18 Jul 2019 11:44:22 +1200 Subject: [PATCH 038/122] Implement block search to api.wordpress.org. --- ...class-wp-rest-blocks-search-controller.php | 79 ++++++------------- 1 file changed, 25 insertions(+), 54 deletions(-) diff --git a/lib/class-wp-rest-blocks-search-controller.php b/lib/class-wp-rest-blocks-search-controller.php index 776cf82d445de4..0e64df4fdfbbfd 100644 --- a/lib/class-wp-rest-blocks-search-controller.php +++ b/lib/class-wp-rest-blocks-search-controller.php @@ -79,62 +79,33 @@ public function get_items( $request ) { return rest_ensure_response( array() ); } - $data = json_decode( - '[ { - "id": "boxer/boxer", - "name": "boxer/boxer", - "title": "Boxer", - "icon": "archive", - "description": "Boxer puts your WordPress posts into boxes.", - "category": "discover", - "keywords": ["posts", "helloworld"], - "assets": { - "editor_script": { - "src": "http://plugins.svn.wordpress.org/boxer-block/trunk/build/index.js" - }, - "view_script": { - "src": "http://plugins.svn.wordpress.org/boxer-block/trunk/build/view.js" - }, - "style": { - "src": "http://plugins.svn.wordpress.org/boxer-block/trunk/style.css" - }, - "editor_style": { - "src": "http://plugins.svn.wordpress.org/boxer-block/trunk/editor.css" - } - } - }, { - "id": "lez-library/listicles", - "name": "lez-library/listicles", - "title": "Listicle", - "icon": "excerpt-view", - "description": "A block for listicles. You can add items, remove them, and flip them in reverse.", - "category": "discover", - "keywords": ["posts", "helloworld"], - "assets": { - "editor_script": { - "src": "http://plugins.svn.wordpress.org/listicles/trunk/dist/blocks.build.js" - }, - "style": { - "src": "http://plugins.svn.wordpress.org/listicles/trunk/dist/blocks.style.build.css" - }, - "editor_style": { - "src": "http://plugins.svn.wordpress.org/listicles/trunk/dist/blocks.editor.build.css" - } - } - } ]' - ); - $filtered = array(); $search_string = preg_quote( $_REQUEST[ 'search' ] ); - - foreach ( $data as $item ) { - if( preg_match( "/{$search_string}/i", $item->title ) ) { - $filtered[] = $item; - } - else if( preg_match( "/{$search_string}/i", $item->description ) ) { - $filtered[] = $item; - } + + include( ABSPATH . WPINC . '/version.php' ); + + $url = 'http://api.wordpress.org/plugins/info/1.2/'; + $url = add_query_arg( + array( + 'action' => 'query_plugins', + 'request[block]' => $search_string, + 'request[wp_version]' => '5.3', + 'request[per_page]' => '3' + ), + $url + ); + $http_url = $url; + $ssl = wp_http_supports( array( 'ssl' ) ); + if ( $ssl ) { + $url = set_url_scheme( $url, 'https' ); } + $http_args = array( + 'timeout' => 15, + 'user-agent' => 'WordPress/' . $wp_version . '; ' . home_url( '/' ), + ); + + $request = wp_remote_get( $url, $http_args ); + $res = json_decode( wp_remote_retrieve_body( $request ), true ); - return rest_ensure_response( $filtered ); + return rest_ensure_response( $res ); } } From 5882bde32690ff76258c32dbab2bb130d099c4f0 Mon Sep 17 00:00:00 2001 From: CK Date: Thu, 18 Jul 2019 12:52:29 +1200 Subject: [PATCH 039/122] Map plugin info to discover block. --- .../discover-block-author-info/index.js | 4 +-- .../components/discover-block-header/index.js | 20 ++++++------ .../discover-block-header/style.scss | 5 +++ .../components/discover-block-info/index.js | 5 +-- .../discover-block-list-item/index.js | 31 +++++++++++++++---- .../components/discover-blocks-list/index.js | 5 ++- packages/block-editor/src/store/resolvers.js | 17 ++++++++-- 7 files changed, 62 insertions(+), 25 deletions(-) diff --git a/packages/block-editor/src/components/discover-block-author-info/index.js b/packages/block-editor/src/components/discover-block-author-info/index.js index 10a7effb49d03a..dc84c9f3c8b874 100644 --- a/packages/block-editor/src/components/discover-block-author-info/index.js +++ b/packages/block-editor/src/components/discover-block-author-info/index.js @@ -3,11 +3,11 @@ */ import { Fragment } from '@wordpress/element'; -function DiscoverBlockAuthorInfo() { +function DiscoverBlockAuthorInfo( { author } ) { return ( - Authored by XXX + Authored by { author } This author has X blocks, with an average rating of X.X. diff --git a/packages/block-editor/src/components/discover-block-header/index.js b/packages/block-editor/src/components/discover-block-header/index.js index 92847db9e778f8..3219656e07bcfb 100644 --- a/packages/block-editor/src/components/discover-block-header/index.js +++ b/packages/block-editor/src/components/discover-block-header/index.js @@ -11,23 +11,23 @@ import { Fragment } from '@wordpress/element'; import BlockIcon from '../block-icon'; import BlockRatings from '../block-ratings'; -function DiscoverBlockHeader( { icon, title, onClick } ) { - const itemIconStyle = icon ? { - backgroundColor: icon.background, - color: icon.foreground, - } : undefined; - +function DiscoverBlockHeader( { icons, title, rating, ratingCount, onClick } ) { return (
    - - - + { + icons[ '1x' ] ? + block icon : + + + + } +
    { title } - +
    +
    + ); +} + +export default DownloadableBlocks; diff --git a/packages/editor/package.json b/packages/editor/package.json index 88ddf540a926aa..2023257f406c71 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -33,6 +33,7 @@ "@wordpress/data-controls": "file:../data-controls", "@wordpress/date": "file:../date", "@wordpress/deprecated": "file:../deprecated", + "@wordpress/downloadable-blocks": "file:../downloadable-blocks", "@wordpress/element": "file:../element", "@wordpress/hooks": "file:../hooks", "@wordpress/html-entities": "file:../html-entities", diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index cfa67ddbb615d7..ebd6a377d02582 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -11,10 +11,11 @@ import { compose } from '@wordpress/compose'; import { Component } from '@wordpress/element'; import { withDispatch, withSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; -import { BlockEditorProvider, transformStyles } from '@wordpress/block-editor'; +import { BlockEditorProvider, transformStyles, __experimentalInserterMenuExtension } from '@wordpress/block-editor'; import apiFetch from '@wordpress/api-fetch'; import { addQueryArgs } from '@wordpress/url'; import { decodeEntities } from '@wordpress/html-entities'; +import DownloadableBlocks from '@wordpress/downloadable-blocks'; /** * Internal dependencies @@ -104,6 +105,7 @@ class EditorProvider extends Component { __experimentalMediaUpload: hasUploadPermissions ? mediaUpload : undefined, __experimentalFetchLinkSuggestions: fetchLinkSuggestions, __experimentalCanUserUseUnfilteredHTML: canUserUseUnfilteredHTML, + __experimentalIsDownloadableBlocksEnabled: true, }; } @@ -170,6 +172,9 @@ class EditorProvider extends Component { { children } + <__experimentalInserterMenuExtension> + + ); } From d9b0db524a1fc105ae318fb016923d803988cee0 Mon Sep 17 00:00:00 2001 From: CK Date: Sat, 3 Aug 2019 15:25:58 +1200 Subject: [PATCH 059/122] Update documentation. --- .../developers/data/data-core-block-editor.md | 51 ++++++++++++++++++- docs/manifest-devhub.json | 6 +++ 2 files changed, 56 insertions(+), 1 deletion(-) diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md index 6e62873be6c1b6..00a9e9eaad7539 100644 --- a/docs/designers-developers/developers/data/data-core-block-editor.md +++ b/docs/designers-developers/developers/data/data-core-block-editor.md @@ -285,6 +285,7 @@ Returns the available uninstalled blocks _Parameters_ - _state_ `Object`: Global application state. +- _filterValue_ `string`: Search string. _Returns_ @@ -347,6 +348,18 @@ _Returns_ - `Array`: Items that appear in inserter. +# **getIsDownloadableBlocksEnabled** + +Returns true if the block editor can search and install uninstalled blocks. + +_Parameters_ + +- _state_ `Object`: Global application state. + +_Returns_ + +- `boolean`: Whether the downloadable blocks feature is enabled. + # **getLastMultiSelectedBlockClientId** Returns the client ID of the last block in the multi-selection set, or null @@ -593,6 +606,18 @@ _Returns_ - `boolean`: Items that appear in inserter. +# **hasInstallBlocksPermission** + +Returns true if user has permission to install blocks. + +_Parameters_ + +- _state_ `Object`: Global application state. + +_Returns_ + +- `boolean`: User has permission to install blocks. + # **hasMultiSelection** Returns true if a multi-selection has been made, or false otherwise. @@ -773,6 +798,18 @@ _Returns_ - `boolean`: True if multi-selecting, false if not. +# **isRequestingDiscoverBlocks** + +Returns true if application is requesting for discover blocks. + +_Parameters_ + +- _state_ `Object`: Global application state. + +_Returns_ + +- `Array`: Discoverable blocks + # **isSelectionEnabled** Selector that returns if multi-selection is enabled or not. @@ -840,6 +877,10 @@ _Returns_ - `Object`: Action object. +# **fetchDiscoverBlocks** + +Undocumented declaration. + # **hideInsertionPoint** Returns an action object hiding the insertion point. @@ -895,6 +936,10 @@ _Returns_ - `Object`: Action object +# **installBlock** + +Undocumented declaration. + # **mergeBlocks** Returns an action object used in signalling that two blocks should be merged @@ -955,6 +1000,10 @@ _Returns_ - `Object`: Action object. +# **receiveDiscoverBlocks** + +Undocumented declaration. + # **removeBlock** Returns an action object used in signalling that the block with the @@ -1083,7 +1132,7 @@ _Parameters_ - _clientId_ `string`: Block client ID. -# **setDiscoverBlocks** +# **setInstallBlocksPermission** Undocumented declaration. diff --git a/docs/manifest-devhub.json b/docs/manifest-devhub.json index 8c96482e340a30..06f80c284024d5 100644 --- a/docs/manifest-devhub.json +++ b/docs/manifest-devhub.json @@ -1193,6 +1193,12 @@ "markdown_source": "../packages/dom/README.md", "parent": "packages" }, + { + "title": "@wordpress/downloadable-blocks", + "slug": "packages-downloadable-blocks", + "markdown_source": "../packages/downloadable-blocks/README.md", + "parent": "packages" + }, { "title": "@wordpress/e2e-test-utils", "slug": "packages-e2e-test-utils", From 7a4fb2bfe32f6a345a2ead8bae760d47cfcdc1d2 Mon Sep 17 00:00:00 2001 From: CK Date: Sat, 3 Aug 2019 22:16:03 +1200 Subject: [PATCH 060/122] Passing props to downloadable blocks. --- .../src/components/inserter/menu.js | 25 ++++++++++++------- packages/downloadable-blocks/src/index.js | 4 +-- .../index.js | 25 +++++++++++++++++++ .../editor/src/components/provider/index.js | 8 +++--- 4 files changed, 46 insertions(+), 16 deletions(-) create mode 100644 packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 20c3a409a0eb50..e0772d0d0a0322 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -43,7 +43,6 @@ import { addQueryArgs } from '@wordpress/url'; import BlockPreview from '../block-preview'; import BlockTypesList from '../block-types-list'; import ChildBlocks from './child-blocks'; -import DiscoverBlocksPanel from '../discover-blocks-panel'; import __experimentalInserterMenuExtension from '../inserter-menu-extension'; const MAX_SUGGESTED_ITEMS = 9; @@ -335,6 +334,7 @@ export class InserterMenu extends Component { suggestedItems, } = this.state; const isPanelOpen = ( panel ) => openPanels.indexOf( panel ) !== -1; + const isMenuEmpty = isEmpty( suggestedItems ) && isEmpty( reusableItems ) && isEmpty( itemsPerCategory ); // Disable reason (no-autofocus): The inserter menu is a modal display, not one which // is always visible, and one which already incurs this behavior of autoFocus via @@ -423,14 +423,21 @@ export class InserterMenu extends Component { ) } - { isEmpty( suggestedItems ) && isEmpty( reusableItems ) && isEmpty( itemsPerCategory ) && ( - isDownloadableBlocksEnabled ? - ( - - ) : - (

    { __( 'No blocks found.' ) }

    ) - ) } - <__experimentalInserterMenuExtension.Slot /> + { + ! isDownloadableBlocksEnabled && isMenuEmpty && ( +

    { __( 'No blocks found.' ) }

    + ) + } + { + <__experimentalInserterMenuExtension.Slot + fillProps={ { + onSelect, + onHover: this.onHover, + filterValue: this.state.filterValue, + isMenuEmpty, + } } + /> + }
    { hoveredItem && isReusableBlock( hoveredItem ) && diff --git a/packages/downloadable-blocks/src/index.js b/packages/downloadable-blocks/src/index.js index 58764743882d76..2fda7ab7ddc631 100644 --- a/packages/downloadable-blocks/src/index.js +++ b/packages/downloadable-blocks/src/index.js @@ -3,10 +3,10 @@ */ import { Button } from '@wordpress/components'; -function DownloadableBlocks( { onSelect } ) { +function DownloadableBlocks( { onSelect, filterValue } ) { return (
    - Hello from the other side. + { filterValue } +
    ); } diff --git a/packages/downloadable-blocks/src/styles.scss b/packages/downloadable-blocks/src/styles.scss new file mode 100644 index 00000000000000..af4f5ca891add8 --- /dev/null +++ b/packages/downloadable-blocks/src/styles.scss @@ -0,0 +1,8 @@ +@import "./components/discover-block-header/style.scss"; +@import "./components/discover-block-info/style.scss"; +@import "./components/discover-block-author-info/style.scss"; +@import "./components/discover-block-list-item/style.scss"; +@import "./components/discover-blocks-list/style.scss"; +@import "./components/discover-blocks-panel/style.scss"; +@import "./components//block-icon/style.scss"; +@import "./components/block-ratings/style.scss"; From bff4995167271b2cf9cf7abcd1fbb1e27bdee98b Mon Sep 17 00:00:00 2001 From: CK Date: Mon, 5 Aug 2019 13:10:36 +1200 Subject: [PATCH 062/122] Load css for downloadable-blocks. --- lib/client-assets.php | 10 +++++++++- .../src/{styles.scss => style.scss} | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) rename packages/downloadable-blocks/src/{styles.scss => style.scss} (89%) diff --git a/lib/client-assets.php b/lib/client-assets.php index 4d07d1c51ac97e..7eb90a15ab5b55 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -319,7 +319,7 @@ function gutenberg_register_scripts_and_styles() { gutenberg_override_style( 'wp-editor', gutenberg_url( 'build/editor/style.css' ), - array( 'wp-components', 'wp-block-editor', 'wp-nux' ), + array( 'wp-components', 'wp-block-editor', 'wp-nux', 'wp-downloadable-blocks' ), filemtime( gutenberg_dir_path() . 'build/editor/style.css' ) ); wp_style_add_data( 'wp-editor', 'rtl', 'replace' ); @@ -402,6 +402,14 @@ function gutenberg_register_scripts_and_styles() { ); wp_style_add_data( 'wp-edit-widgets', 'rtl', 'replace' ); + gutenberg_override_style( + 'wp-downloadable-blocks', + gutenberg_url( 'build/downloadable-blocks/style.css' ), + array( 'wp-components' ), + filemtime( gutenberg_dir_path() . 'build/downloadable-blocks/style.css' ) + ); + wp_style_add_data( 'wp-downloadable-blocks', 'rtl', 'replace' ); + if ( defined( 'GUTENBERG_LIVE_RELOAD' ) && GUTENBERG_LIVE_RELOAD ) { $live_reload_url = ( GUTENBERG_LIVE_RELOAD === true ) ? 'http://localhost:35729/livereload.js' : GUTENBERG_LIVE_RELOAD; diff --git a/packages/downloadable-blocks/src/styles.scss b/packages/downloadable-blocks/src/style.scss similarity index 89% rename from packages/downloadable-blocks/src/styles.scss rename to packages/downloadable-blocks/src/style.scss index af4f5ca891add8..a291c2ae948a7e 100644 --- a/packages/downloadable-blocks/src/styles.scss +++ b/packages/downloadable-blocks/src/style.scss @@ -4,5 +4,5 @@ @import "./components/discover-block-list-item/style.scss"; @import "./components/discover-blocks-list/style.scss"; @import "./components/discover-blocks-panel/style.scss"; -@import "./components//block-icon/style.scss"; +@import "./components/block-icon/style.scss"; @import "./components/block-ratings/style.scss"; From ac542371156220b713087aa3ce69f5e6a11e42d6 Mon Sep 17 00:00:00 2001 From: CK Date: Mon, 5 Aug 2019 14:38:31 +1200 Subject: [PATCH 063/122] Moved debounce filterValue function to editor. --- .../src/components/inserter/menu.js | 6 ---- .../index.js | 32 ++++++++++++++++--- 2 files changed, 27 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index e0772d0d0a0322..087df0c92b476c 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -15,7 +15,6 @@ import { includes, deburr, forEach, - debounce, } from 'lodash'; import scrollIntoView from 'dom-scroll-into-view'; @@ -172,13 +171,11 @@ export class InserterMenu extends Component { reusableItems: [], itemsPerCategory: {}, openPanels: [ 'suggested' ], - debouncedFilterValue: '', }; this.onChangeSearchInput = this.onChangeSearchInput.bind( this ); this.onHover = this.onHover.bind( this ); this.panels = {}; this.inserterResults = createRef(); - this.debouncedSetState = debounce( this.setState, 400 ); } componentDidMount() { @@ -194,9 +191,6 @@ export class InserterMenu extends Component { } onChangeSearchInput( event ) { - this.debouncedSetState( { - debouncedFilterValue: event.target.value, - } ); this.filter( event.target.value ); } diff --git a/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js b/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js index ee9d88f54afa8a..55b52367b5bb82 100644 --- a/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js +++ b/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js @@ -1,22 +1,44 @@ +/** + * External dependencies + */ +import { debounce } from 'lodash'; + /** * WordPress dependencies */ import { __experimentalInserterMenuExtension } from '@wordpress/block-editor'; import DownloadableBlocks from '@wordpress/downloadable-blocks'; +import { useState } from '@wordpress/element'; function InserterMenuDownloadableBlocksPanel() { + const [ state, setState ] = useState( { + debouncedFilterValue: '', + } ); + + const debouncedSetState = debounce( setState, 400 ); + return ( <__experimentalInserterMenuExtension> { - ( { onSelect, onHover, filterValue, isMenuEmpty } ) => ( - isMenuEmpty && ( + ( { onSelect, onHover, filterValue, isMenuEmpty } ) => { + if ( ! isMenuEmpty ) { + return null; + } + + if ( state.debouncedFilterValue !== filterValue ) { + debouncedSetState( { + debouncedFilterValue: filterValue, + } ); + } + + return ( - ) - ) + ); + } } ); From 89e5862dcc891510cd1b020fca0da9420ec23c32 Mon Sep 17 00:00:00 2001 From: CK Date: Mon, 5 Aug 2019 15:13:04 +1200 Subject: [PATCH 064/122] Moved to use its own data store in downloadable-blocks package. --- packages/block-editor/src/store/actions.js | 74 +---------------- packages/block-editor/src/store/controls.js | 29 ------- packages/block-editor/src/store/index.js | 2 - packages/block-editor/src/store/reducer.js | 36 --------- packages/block-editor/src/store/selectors.js | 37 --------- .../components/discover-block-header/index.js | 2 +- .../components/discover-blocks-panel/index.js | 2 +- packages/downloadable-blocks/src/index.js | 1 + .../downloadable-blocks/src/store/actions.js | 80 +++++++++++++++++++ .../downloadable-blocks/src/store/controls.js | 59 ++++++++++++++ .../downloadable-blocks/src/store/index.js | 40 ++++++++++ .../downloadable-blocks/src/store/reducer.js | 43 ++++++++++ .../src/store/resolvers.js | 0 .../src/store/selectors.js | 52 ++++++++++++ 14 files changed, 278 insertions(+), 179 deletions(-) create mode 100644 packages/downloadable-blocks/src/store/actions.js create mode 100644 packages/downloadable-blocks/src/store/controls.js create mode 100644 packages/downloadable-blocks/src/store/index.js create mode 100644 packages/downloadable-blocks/src/store/reducer.js rename packages/{block-editor => downloadable-blocks}/src/store/resolvers.js (100%) create mode 100644 packages/downloadable-blocks/src/store/selectors.js diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index 2218e99a290e21..e2d989c122604e 100644 --- a/packages/block-editor/src/store/actions.js +++ b/packages/block-editor/src/store/actions.js @@ -7,12 +7,11 @@ import { castArray, first } from 'lodash'; * WordPress dependencies */ import { getDefaultBlockName, createBlock } from '@wordpress/blocks'; -import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { select, dispatch, apiFetch } from './controls'; +import { select } from './controls'; /** * Generator which will yield a default block insert action if there @@ -705,74 +704,3 @@ export function __unstableSaveReusableBlock( id, updatedId ) { export function __unstableMarkLastChangeAsPersistent() { return { type: 'MARK_LAST_CHANGE_AS_PERSISTENT' }; } - -/** Returns an action object used in signalling that the discover blocks have been requested and is loading. - * - * @return {Object} Action object. - */ -export function fetchDiscoverBlocks() { - return { type: 'FETCH_DISCOVER_BLOCKS' }; -} - -/** Returns an action object used in signalling that the discover blocks have been updated. - * @param {Array} discoverBlocks Discoverable blocks. - * @param {string} filterValue Search string. - * - * @return {Object} Action object. - */ -export function receiveDiscoverBlocks( discoverBlocks, filterValue ) { - return { type: 'RECEIVE_DISCOVER_BLOCKS', discoverBlocks, filterValue }; -} - -/** Returns an action object used in signalling that the user does not have permission to install blocks. -* @param {boolean} hasPermission User has permission to install blocks. -* -* @return {Object} Action object. -*/ -export function setInstallBlocksPermission( hasPermission ) { - return { type: 'SET_INSTALL_BLOCKS_PERMISSION', hasPermission }; -} - -/** Action triggered to install a block plugin -* @param {string} slug The plugin slug for block. -* @param {function} retry The callback function when user clicks Retry button on error notice. -* @param {function} remove The callback function when user clicks Remove button on error notice. -* - */ -export function* installBlock( slug, retry, remove ) { - try { - const response = yield apiFetch( { - path: '__experimental/blocks/install', - data: { - slug, - }, - method: 'POST', - } ); - if ( response.success === false ) { - throw new Error( response.errorMessage ); - } - } catch ( error ) { - yield dispatch( - 'core/notices', - 'createErrorNotice', - __( 'Block previews can\'t install.' ), - { id: 'block-install-error', - actions: [ - { - label: 'Retry', - onClick: () => { - retry(); - }, - }, - { - label: 'Remove', - onClick: () => { - remove(); - }, - }, - ], - } - ); - } -} - diff --git a/packages/block-editor/src/store/controls.js b/packages/block-editor/src/store/controls.js index a6aa53b245f84a..5012ab244c21c8 100644 --- a/packages/block-editor/src/store/controls.js +++ b/packages/block-editor/src/store/controls.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { createRegistryControl } from '@wordpress/data'; -import wpApiFetch from '@wordpress/api-fetch'; /** * Calls a selector using the current state. @@ -22,38 +21,10 @@ export function select( storeName, selectorName, ...args ) { }; } -export function dispatch( storeName, dispatcherName, ...args ) { - return { - type: 'DISPATCH', - storeName, - dispatcherName, - args, - }; -} - -/** - * Trigger an API Fetch request. - * - * @param {Object} request API Fetch Request Object. - * @return {Object} control descriptor. - */ -export function apiFetch( request ) { - return { - type: 'API_FETCH', - request, - }; -} - const controls = { SELECT: createRegistryControl( ( registry ) => ( { storeName, selectorName, args } ) => { return registry.select( storeName )[ selectorName ]( ...args ); } ), - DISPATCH: createRegistryControl( ( registry ) => ( { storeName, dispatcherName, args } ) => { - return registry.dispatch( storeName )[ dispatcherName ]( ...args ); - } ), - API_FETCH( { request } ) { - return wpApiFetch( { ... request } ); - }, }; export default controls; diff --git a/packages/block-editor/src/store/index.js b/packages/block-editor/src/store/index.js index 9ae9c00a9489a4..bfc7766a508762 100644 --- a/packages/block-editor/src/store/index.js +++ b/packages/block-editor/src/store/index.js @@ -10,7 +10,6 @@ import reducer from './reducer'; import applyMiddlewares from './middlewares'; import * as selectors from './selectors'; import * as actions from './actions'; -import resolvers from './resolvers'; import controls from './controls'; /** @@ -30,7 +29,6 @@ export const storeConfig = { selectors, actions, controls, - resolvers, }; const store = registerStore( MODULE_KEY, { diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index fdc041bef8063c..afddeb2f7e790e 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -1235,41 +1235,6 @@ export function lastBlockAttributesChange( state, action ) { return null; } -/** - * Reducer returning an array of discover blocks. - * - * @param {Object} state Current state. - * @param {Object} action Dispatched action. - * - * @return {Object} Updated state. - */ -export const discoverBlocks = ( state = { results: {}, hasPermission: undefined, filterValue: undefined, isRequestingDiscoverBlocks: true }, action ) => { - switch ( action.type ) { - case 'FETCH_DISCOVER_BLOCKS' : - return { - ...state, - isRequestingDiscoverBlocks: true, - }; - case 'RECEIVE_DISCOVER_BLOCKS' : - return { - ...state, - results: Object.assign( {}, state.results, { - [ action.filterValue ]: action.discoverBlocks, - } ), - hasPermission: true, - isRequestingDiscoverBlocks: false, - }; - case 'SET_INSTALL_BLOCKS_PERMISSION' : - return { - ...state, - items: action.hasPermission ? state.items : [], - hasPermission: action.hasPermission, - isRequestingDiscoverBlocks: false, - }; - } - return state; -}; - export default combineReducers( { blocks, isTyping, @@ -1282,5 +1247,4 @@ export default combineReducers( { settings, preferences, lastBlockAttributesChange, - discoverBlocks, } ); diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index f20cf0cd6f112d..f644a985210729 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1406,43 +1406,6 @@ function getReusableBlocks( state ) { return get( state, [ 'settings', '__experimentalReusableBlocks' ], EMPTY_ARRAY ); } -/** - * Returns true if application is requesting for discover blocks. - * - * @param {Object} state Global application state. - * - * @return {Array} Discoverable blocks - */ -export function isRequestingDiscoverBlocks( state ) { - return state.discoverBlocks.isRequestingDiscoverBlocks; -} - -/** - * Returns the available uninstalled blocks - * - * @param {Object} state Global application state. - * @param {string} filterValue Search string. - * - * @return {Array} Discoverable blocks - */ -export function getDiscoverBlocks( state, filterValue ) { - if ( ! state.discoverBlocks.results[ filterValue ] ) { - return []; - } - return state.discoverBlocks.results[ filterValue ]; -} - -/** - * Returns true if user has permission to install blocks. - * - * @param {Object} state Global application state. - * - * @return {boolean} User has permission to install blocks. - */ -export function hasInstallBlocksPermission( state ) { - return state.discoverBlocks.hasPermission; -} - /** * Returns true if the block editor can search and install uninstalled blocks. * diff --git a/packages/downloadable-blocks/src/components/discover-block-header/index.js b/packages/downloadable-blocks/src/components/discover-block-header/index.js index b97fb045048d2c..06bda9613f0383 100644 --- a/packages/downloadable-blocks/src/components/discover-block-header/index.js +++ b/packages/downloadable-blocks/src/components/discover-block-header/index.js @@ -58,7 +58,7 @@ function DiscoverBlockHeader( { slug, icon, title, rating, ratingCount, onClick, export default compose( withDispatch( ( dispatch ) => { - const { installBlock } = dispatch( 'core/block-editor' ); + const { installBlock } = dispatch( 'core/download-blocks' ); const { removeNotice } = dispatch( 'core/notices' ); return { diff --git a/packages/downloadable-blocks/src/components/discover-blocks-panel/index.js b/packages/downloadable-blocks/src/components/discover-blocks-panel/index.js index 1de1f228b64af6..399b5c9fb859e0 100644 --- a/packages/downloadable-blocks/src/components/discover-blocks-panel/index.js +++ b/packages/downloadable-blocks/src/components/discover-blocks-panel/index.js @@ -55,7 +55,7 @@ export default compose( [ getDiscoverBlocks, hasInstallBlocksPermission, isRequestingDiscoverBlocks, - } = select( 'core/block-editor' ); + } = select( 'core/download-blocks' ); const discoverItems = getDiscoverBlocks( filterValue ); const hasPermission = hasInstallBlocksPermission(); diff --git a/packages/downloadable-blocks/src/index.js b/packages/downloadable-blocks/src/index.js index 2f37eebd016674..3e9f53d14db691 100644 --- a/packages/downloadable-blocks/src/index.js +++ b/packages/downloadable-blocks/src/index.js @@ -1,6 +1,7 @@ /** * Internal dependencies */ +import './store'; import DiscoverBlocksPanel from './components/discover-blocks-panel'; function DownloadableBlocks( { onSelect, filterValue } ) { diff --git a/packages/downloadable-blocks/src/store/actions.js b/packages/downloadable-blocks/src/store/actions.js new file mode 100644 index 00000000000000..95906e954a5cc9 --- /dev/null +++ b/packages/downloadable-blocks/src/store/actions.js @@ -0,0 +1,80 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { dispatch, apiFetch } from './controls'; + +/** Returns an action object used in signalling that the discover blocks have been requested and is loading. + * + * @return {Object} Action object. + */ +export function fetchDiscoverBlocks() { + return { type: 'FETCH_DISCOVER_BLOCKS' }; +} + +/** Returns an action object used in signalling that the discover blocks have been updated. + * @param {Array} discoverBlocks Discoverable blocks. + * @param {string} filterValue Search string. + * + * @return {Object} Action object. + */ +export function receiveDiscoverBlocks( discoverBlocks, filterValue ) { + return { type: 'RECEIVE_DISCOVER_BLOCKS', discoverBlocks, filterValue }; +} + +/** Returns an action object used in signalling that the user does not have permission to install blocks. +* @param {boolean} hasPermission User has permission to install blocks. +* +* @return {Object} Action object. +*/ +export function setInstallBlocksPermission( hasPermission ) { + return { type: 'SET_INSTALL_BLOCKS_PERMISSION', hasPermission }; +} + +/** Action triggered to install a block plugin +* @param {string} slug The plugin slug for block. +* @param {function} retry The callback function when user clicks Retry button on error notice. +* @param {function} remove The callback function when user clicks Remove button on error notice. +* + */ +export function* installBlock( slug, retry, remove ) { + try { + const response = yield apiFetch( { + path: '__experimental/blocks/install', + data: { + slug, + }, + method: 'POST', + } ); + if ( response.success === false ) { + throw new Error( response.errorMessage ); + } + } catch ( error ) { + yield dispatch( + 'core/notices', + 'createErrorNotice', + __( 'Block previews can\'t install.' ), + { id: 'block-install-error', + actions: [ + { + label: 'Retry', + onClick: () => { + retry(); + }, + }, + { + label: 'Remove', + onClick: () => { + remove(); + }, + }, + ], + } + ); + } +} + diff --git a/packages/downloadable-blocks/src/store/controls.js b/packages/downloadable-blocks/src/store/controls.js new file mode 100644 index 00000000000000..a6aa53b245f84a --- /dev/null +++ b/packages/downloadable-blocks/src/store/controls.js @@ -0,0 +1,59 @@ +/** + * WordPress dependencies + */ +import { createRegistryControl } from '@wordpress/data'; +import wpApiFetch from '@wordpress/api-fetch'; + +/** + * Calls a selector using the current state. + * + * @param {string} storeName Store name. + * @param {string} selectorName Selector name. + * @param {Array} args Selector arguments. + * + * @return {Object} control descriptor. + */ +export function select( storeName, selectorName, ...args ) { + return { + type: 'SELECT', + storeName, + selectorName, + args, + }; +} + +export function dispatch( storeName, dispatcherName, ...args ) { + return { + type: 'DISPATCH', + storeName, + dispatcherName, + args, + }; +} + +/** + * Trigger an API Fetch request. + * + * @param {Object} request API Fetch Request Object. + * @return {Object} control descriptor. + */ +export function apiFetch( request ) { + return { + type: 'API_FETCH', + request, + }; +} + +const controls = { + SELECT: createRegistryControl( ( registry ) => ( { storeName, selectorName, args } ) => { + return registry.select( storeName )[ selectorName ]( ...args ); + } ), + DISPATCH: createRegistryControl( ( registry ) => ( { storeName, dispatcherName, args } ) => { + return registry.dispatch( storeName )[ dispatcherName ]( ...args ); + } ), + API_FETCH( { request } ) { + return wpApiFetch( { ... request } ); + }, +}; + +export default controls; diff --git a/packages/downloadable-blocks/src/store/index.js b/packages/downloadable-blocks/src/store/index.js new file mode 100644 index 00000000000000..d40b66d75df99a --- /dev/null +++ b/packages/downloadable-blocks/src/store/index.js @@ -0,0 +1,40 @@ +/** + * WordPress dependencies + */ +import { registerStore } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import reducer from './reducer'; +import * as selectors from './selectors'; +import * as actions from './actions'; +import resolvers from './resolvers'; +import controls from './controls'; + +/** + * Module Constants + */ +const MODULE_KEY = 'core/download-blocks'; + +/** + * Block editor data store configuration. + * + * @see https://github.com/WordPress/gutenberg/blob/master/packages/data/README.md#registerStore + * + * @type {Object} + */ +export const storeConfig = { + reducer, + selectors, + actions, + controls, + resolvers, +}; + +const store = registerStore( MODULE_KEY, { + ...storeConfig, + persist: [ 'preferences' ], +} ); + +export default store; diff --git a/packages/downloadable-blocks/src/store/reducer.js b/packages/downloadable-blocks/src/store/reducer.js new file mode 100644 index 00000000000000..81a493d0bee885 --- /dev/null +++ b/packages/downloadable-blocks/src/store/reducer.js @@ -0,0 +1,43 @@ +/** + * WordPress dependencies + */ +import { combineReducers } from '@wordpress/data'; + +/** + * Reducer returning an array of discover blocks. + * + * @param {Object} state Current state. + * @param {Object} action Dispatched action. + * + * @return {Object} Updated state. + */ +export const discoverBlocks = ( state = { results: {}, hasPermission: undefined, filterValue: undefined, isRequestingDiscoverBlocks: true }, action ) => { + switch ( action.type ) { + case 'FETCH_DISCOVER_BLOCKS' : + return { + ...state, + isRequestingDiscoverBlocks: true, + }; + case 'RECEIVE_DISCOVER_BLOCKS' : + return { + ...state, + results: Object.assign( {}, state.results, { + [ action.filterValue ]: action.discoverBlocks, + } ), + hasPermission: true, + isRequestingDiscoverBlocks: false, + }; + case 'SET_INSTALL_BLOCKS_PERMISSION' : + return { + ...state, + items: action.hasPermission ? state.items : [], + hasPermission: action.hasPermission, + isRequestingDiscoverBlocks: false, + }; + } + return state; +}; + +export default combineReducers( { + discoverBlocks, +} ); diff --git a/packages/block-editor/src/store/resolvers.js b/packages/downloadable-blocks/src/store/resolvers.js similarity index 100% rename from packages/block-editor/src/store/resolvers.js rename to packages/downloadable-blocks/src/store/resolvers.js diff --git a/packages/downloadable-blocks/src/store/selectors.js b/packages/downloadable-blocks/src/store/selectors.js new file mode 100644 index 00000000000000..9b88890ad70da8 --- /dev/null +++ b/packages/downloadable-blocks/src/store/selectors.js @@ -0,0 +1,52 @@ +/** + * External dependencies + */ +import { get } from 'lodash'; + +/** + * Returns true if application is requesting for discover blocks. + * + * @param {Object} state Global application state. + * + * @return {Array} Discoverable blocks + */ +export function isRequestingDiscoverBlocks( state ) { + return state.discoverBlocks.isRequestingDiscoverBlocks; +} + +/** + * Returns the available uninstalled blocks + * + * @param {Object} state Global application state. + * @param {string} filterValue Search string. + * + * @return {Array} Discoverable blocks + */ +export function getDiscoverBlocks( state, filterValue ) { + if ( ! state.discoverBlocks.results[ filterValue ] ) { + return []; + } + return state.discoverBlocks.results[ filterValue ]; +} + +/** + * Returns true if user has permission to install blocks. + * + * @param {Object} state Global application state. + * + * @return {boolean} User has permission to install blocks. + */ +export function hasInstallBlocksPermission( state ) { + return state.discoverBlocks.hasPermission; +} + +/** + * Returns true if the block editor can search and install uninstalled blocks. + * + * @param {Object} state Global application state. + * + * @return {boolean} Whether the downloadable blocks feature is enabled. + */ +export function getIsDownloadableBlocksEnabled( state ) { + return get( state, [ 'settings', '__experimentalIsDownloadableBlocksEnabled' ], false ); +} From 20e0e794cef76693143e388b4122f24d6048fabb Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 6 Aug 2019 12:14:47 +1200 Subject: [PATCH 065/122] Moved code to load block assets out of menu.js --- .../src/components/inserter/menu.js | 126 ++---------------- .../components/discover-blocks-list/index.js | 117 +++++++++++++++- packages/downloadable-blocks/src/index.js | 1 - .../downloadable-blocks/src/store/actions.js | 1 - 4 files changed, 126 insertions(+), 119 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 087df0c92b476c..1873502727006b 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -14,7 +14,6 @@ import { without, includes, deburr, - forEach, } from 'lodash'; import scrollIntoView from 'dom-scroll-into-view'; @@ -29,7 +28,6 @@ import { isReusableBlock, createBlock, isUnmodifiedDefaultBlock, - getBlockTypes, } from '@wordpress/blocks'; import { withDispatch, withSelect } from '@wordpress/data'; import { withInstanceId, compose, withSafeTimeout } from '@wordpress/compose'; @@ -94,72 +92,6 @@ export const normalizeTerm = ( term ) => { return term; }; -/** - * Dynamically loads script - * - * @param {Object} asset The asset object as described in block.json. - * @param {Function} onLoad The callback function when script is loaded. - * @param {Function} onError The callback function when script is error loading. - */ -const loadScipt = ( asset, onLoad, onError ) => { - if ( ! asset ) { - return; - } - const existing = document.querySelector( `script[src="${ asset.src }"]` ); - if ( existing ) { - existing.parentNode.removeChild( existing ); - } - const script = document.createElement( 'script' ); - script.src = typeof asset === 'string' ? asset : asset.src; - script.onload = onLoad; - script.onerror = onError; - document.body.appendChild( script ); -}; - -/** - * Dynamically loads stylesheets - * - * @param {Object} asset The asset object as described in block.json. - */ -const loadStyle = ( asset ) => { - if ( ! asset ) { - return; - } - const link = document.createElement( 'link' ); - link.rel = 'stylesheet'; - link.href = typeof asset === 'string' ? asset : asset.src; - document.body.appendChild( link ); -}; - -/** - * Loads block's assets - * - * @param {Object|Array} assets The asset object as described in block.json or array of URL of the - * @param {Function} onLoad The callback function when script is loaded. - * @param {Function} onError The callback function when script is error loading. - * - * @return {number} The number of scripts loaded. - */ -const handleBlockAssets = ( assets, onLoad, onError ) => { - let scriptsCount = 0; - if ( typeof assets === 'object' && assets.constructor === Array ) { - forEach( assets, ( asset ) => { - if ( asset.match( /\.js$/ ) !== null ) { - scriptsCount++; - onLoad.bind( scriptsCount ); - loadScipt( asset, onLoad, onError, scriptsCount ); - } else { - loadStyle( asset ); - } - } ); - } else { - scriptsCount++; - loadScipt( assets.editor_script, onLoad, onError ); - loadStyle( assets.style ); - } - return scriptsCount; -}; - export class InserterMenu extends Component { constructor() { super( ...arguments ); @@ -525,60 +457,24 @@ export default compose( replaceBlocks, insertBlock, } = dispatch( 'core/block-editor' ); - const { - createErrorNotice, - removeNotice, - } = dispatch( 'core/notices' ); const { getSelectedBlock, } = select( 'core/block-editor' ); const { isAppender } = ownProps; const { name, initialAttributes } = item; + const selectedBlock = getSelectedBlock(); + const insertedBlock = createBlock( name, initialAttributes ); - const handleInsertBlock = ( insertedBlock ) => { - const selectedBlock = getSelectedBlock(); - if ( ! isAppender && selectedBlock && isUnmodifiedDefaultBlock( selectedBlock ) ) { - replaceBlocks( selectedBlock.clientId, insertedBlock ); - } else { - insertBlock( - insertedBlock, - getInsertionIndex(), - ownProps.destinationRootClientId - ); - } - }; - - if ( item.assets ) { - let scriptsCount = 0; - const onLoad = () => { - scriptsCount--; - if ( scriptsCount > 0 ) { - return; - } - const registeredBlocks = getBlockTypes(); - if ( registeredBlocks.length ) { - const block = createBlock( item.name ); - handleInsertBlock( block ); - } - }; - const onError = () => { - createErrorNotice( __( 'Block previews can\'t load.' ), { - id: 'block-preview-error', - actions: [ - { - label: __( 'Retry' ), - onClick: () => { - removeNotice( 'block-preview-error' ); - scriptsCount = handleBlockAssets( item.assets, onLoad, onError ); - }, - }, - ], - } ); - }; - scriptsCount = handleBlockAssets( item.assets, onLoad, onError ); + //load block asssets if isDownloadableBlockEnabled. + + if ( ! isAppender && selectedBlock && isUnmodifiedDefaultBlock( selectedBlock ) ) { + replaceBlocks( selectedBlock.clientId, insertedBlock ); } else { - const insertedBlock = createBlock( name, initialAttributes ); - handleInsertBlock( insertedBlock ); + insertBlock( + insertedBlock, + getInsertionIndex(), + ownProps.destinationRootClientId + ); } ownProps.onSelect(); diff --git a/packages/downloadable-blocks/src/components/discover-blocks-list/index.js b/packages/downloadable-blocks/src/components/discover-blocks-list/index.js index 4bfa66b40fdef6..d1202911cf23bc 100644 --- a/packages/downloadable-blocks/src/components/discover-blocks-list/index.js +++ b/packages/downloadable-blocks/src/components/discover-blocks-list/index.js @@ -1,13 +1,126 @@ +/** + * External dependencies + */ +import { forEach } from 'lodash'; + /** * WordPress dependencies */ -import { getBlockMenuDefaultClassName } from '@wordpress/blocks'; +import { getBlockMenuDefaultClassName, getBlockTypes } from '@wordpress/blocks'; +import { __ } from '@wordpress/i18n'; +import { dispatch } from '@wordpress/data'; /** * Internal dependencies */ import DiscoverBlockListItem from '../discover-block-list-item'; +/** + * Dynamically loads script + * + * @param {Object} asset The asset object as described in block.json. + * @param {Function} onLoad The callback function when script is loaded. + * @param {Function} onError The callback function when script is error loading. + */ +const loadScipt = ( asset, onLoad, onError ) => { + if ( ! asset ) { + return; + } + const existing = document.querySelector( `script[src="${ asset.src }"]` ); + if ( existing ) { + existing.parentNode.removeChild( existing ); + } + const script = document.createElement( 'script' ); + script.src = typeof asset === 'string' ? asset : asset.src; + script.onload = onLoad; + script.onerror = onError; + document.body.appendChild( script ); +}; + +/** + * Dynamically loads stylesheets + * + * @param {Object} asset The asset object as described in block.json. + */ +const loadStyle = ( asset ) => { + if ( ! asset ) { + return; + } + const link = document.createElement( 'link' ); + link.rel = 'stylesheet'; + link.href = typeof asset === 'string' ? asset : asset.src; + document.body.appendChild( link ); +}; + +/** + * Loads block's assets + * + * @param {Object|Array} assets The asset object as described in block.json or array of URL of the + * @param {Function} onLoad The callback function when script is loaded. + * @param {Function} onError The callback function when script is error loading. + * + * @return {number} The number of scripts loaded. + */ +const loadAssets = ( assets, onLoad, onError ) => { + let scriptsCount = 0; + if ( typeof assets === 'object' && assets.constructor === Array ) { + forEach( assets, ( asset ) => { + if ( asset.match( /\.js$/ ) !== null ) { + scriptsCount++; + onLoad.bind( scriptsCount ); + loadScipt( asset, onLoad, onError, scriptsCount ); + } else { + loadStyle( asset ); + } + } ); + } else { + scriptsCount++; + loadScipt( assets.editor_script, onLoad, onError ); + loadStyle( assets.style ); + } + return scriptsCount; +}; + +/** + * Handle a downloadable block to load assets, notify and retry on errors. + * + * @param {Object} item The selected block item + * @param {Function} onSelect The callback function when the assets are loaded. + */ +const handleDownloadableBlock = ( item, onSelect ) => { + const { + createErrorNotice, + removeNotice, + } = dispatch( 'core/notices' ); + + let scriptsCount = 0; + const onLoad = () => { + scriptsCount--; + if ( scriptsCount > 0 ) { + return; + } + const registeredBlocks = getBlockTypes(); + if ( registeredBlocks.length ) { + onSelect( item ); + } + }; + const onError = () => { + createErrorNotice( __( 'Block previews can\'t load.' ), { + id: 'block-preview-error', + actions: [ + { + label: __( 'Retry' ), + onClick: () => { + removeNotice( 'block-preview-error' ); + scriptsCount = loadAssets( item.assets, onLoad, onError ); + }, + }, + ], + } ); + }; + scriptsCount = loadAssets( item.assets, onLoad, onError ); +}; + function DiscoverBlocksList( { items, onSelect, onHover = () => {}, children } ) { return ( /* @@ -22,7 +135,7 @@ function DiscoverBlocksList( { items, onSelect, onHover = () => {}, children } ) className={ getBlockMenuDefaultClassName( item.id ) } icons={ item.icons } onClick={ () => { - onSelect( item ); + handleDownloadableBlock( item, onSelect ); onHover( null ); } } onFocus={ () => onHover( item ) } diff --git a/packages/downloadable-blocks/src/index.js b/packages/downloadable-blocks/src/index.js index 3e9f53d14db691..e0491860853315 100644 --- a/packages/downloadable-blocks/src/index.js +++ b/packages/downloadable-blocks/src/index.js @@ -7,7 +7,6 @@ import DiscoverBlocksPanel from './components/discover-blocks-panel'; function DownloadableBlocks( { onSelect, filterValue } ) { return (
    - { filterValue } Date: Tue, 6 Aug 2019 12:20:32 +1200 Subject: [PATCH 066/122] Remove comment. --- packages/block-editor/src/components/inserter/menu.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 1873502727006b..23ab884796596a 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -464,9 +464,6 @@ export default compose( const { name, initialAttributes } = item; const selectedBlock = getSelectedBlock(); const insertedBlock = createBlock( name, initialAttributes ); - - //load block asssets if isDownloadableBlockEnabled. - if ( ! isAppender && selectedBlock && isUnmodifiedDefaultBlock( selectedBlock ) ) { replaceBlocks( selectedBlock.clientId, insertedBlock ); } else { From 7a39b70af56b5a34e0f85b2c83e20cf265fa6edc Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 6 Aug 2019 12:27:10 +1200 Subject: [PATCH 067/122] Removed block-icon from downloadable-blocks package. --- packages/block-editor/src/store/reducer.js | 2 +- .../src/components/block-icon/index.js | 37 -------------- .../src/components/block-icon/style.scss | 27 ---------- .../src/components/block-icon/test/index.js | 49 ------------------- .../components/discover-block-header/index.js | 2 +- 5 files changed, 2 insertions(+), 115 deletions(-) delete mode 100644 packages/downloadable-blocks/src/components/block-icon/index.js delete mode 100644 packages/downloadable-blocks/src/components/block-icon/style.scss delete mode 100644 packages/downloadable-blocks/src/components/block-icon/test/index.js diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index afddeb2f7e790e..df81bd5df22f0b 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -1207,7 +1207,7 @@ export const blockListSettings = ( state = {}, action ) => { return state; }; -/* +/** * Reducer return an updated state representing the most recent block attribute * update. The state is structured as an object where the keys represent the * client IDs of blocks, the values a subset of attributes from the most recent diff --git a/packages/downloadable-blocks/src/components/block-icon/index.js b/packages/downloadable-blocks/src/components/block-icon/index.js deleted file mode 100644 index 4d6106214df7d8..00000000000000 --- a/packages/downloadable-blocks/src/components/block-icon/index.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; -import { get } from 'lodash'; - -/** - * WordPress dependencies - */ -import { Path, Icon, SVG } from '@wordpress/components'; - -export default function BlockIcon( { icon, showColors = false, className } ) { - if ( get( icon, [ 'src' ] ) === 'block-default' ) { - icon = { - src: , - }; - } - - const renderedIcon = ; - const style = showColors ? { - backgroundColor: icon && icon.background, - color: icon && icon.foreground, - } : {}; - - return ( - - { renderedIcon } - - ); -} diff --git a/packages/downloadable-blocks/src/components/block-icon/style.scss b/packages/downloadable-blocks/src/components/block-icon/style.scss deleted file mode 100644 index 07eff392cca18e..00000000000000 --- a/packages/downloadable-blocks/src/components/block-icon/style.scss +++ /dev/null @@ -1,27 +0,0 @@ -.block-editor-block-icon { - display: flex; - align-items: center; - justify-content: center; - width: 24px; - height: 24px; - margin: 0; - border-radius: 4px; - - &.has-colors { - svg { - fill: currentColor; - } - } - - // Icons with width/height attributes below 20px will be sized up to 20px, - // and icons with width/height attributes above 24px will be sized down to - // 24px. Icons with width/height >=20px and <=24px will display at the - // indicated size. - // See: https://github.com/WordPress/gutenberg/pull/9828 - svg { - min-width: 20px; - min-height: 20px; - max-width: 24px; - max-height: 24px; - } -} diff --git a/packages/downloadable-blocks/src/components/block-icon/test/index.js b/packages/downloadable-blocks/src/components/block-icon/test/index.js deleted file mode 100644 index 8c74330ad34d49..00000000000000 --- a/packages/downloadable-blocks/src/components/block-icon/test/index.js +++ /dev/null @@ -1,49 +0,0 @@ -/** - * External dependencies - */ -import { shallow } from 'enzyme'; - -/** - * WordPress dependencies - */ -import { Icon } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import BlockIcon from '../'; - -describe( 'BlockIcon', () => { - it( 'renders a Icon', () => { - const wrapper = shallow( ); - - expect( wrapper.containsMatchingElement( ) ).toBe( true ); - } ); - - it( 'renders a span without the has-colors classname', () => { - const wrapper = shallow( ); - - expect( wrapper.find( 'span' ).hasClass( 'has-colors' ) ).toBe( false ); - } ); - - it( 'renders a span with the has-colors classname', () => { - const wrapper = shallow( ); - - expect( wrapper.find( 'span' ).hasClass( 'has-colors' ) ).toBe( true ); - } ); - - it( 'skips adding background and foreground styles when colors are not enabled', () => { - const wrapper = shallow( ); - - expect( wrapper.find( 'span' ).prop( 'style' ) ).toEqual( {} ); - } ); - - it( 'adds background and foreground styles when colors are enabled', () => { - const wrapper = shallow( ); - - expect( wrapper.find( 'span' ).prop( 'style' ) ).toEqual( { - backgroundColor: 'white', - color: 'black', - } ); - } ); -} ); diff --git a/packages/downloadable-blocks/src/components/discover-block-header/index.js b/packages/downloadable-blocks/src/components/discover-block-header/index.js index 06bda9613f0383..5e92a83ca2c130 100644 --- a/packages/downloadable-blocks/src/components/discover-block-header/index.js +++ b/packages/downloadable-blocks/src/components/discover-block-header/index.js @@ -10,7 +10,7 @@ import { compose } from '@wordpress/compose'; /** * Internal dependencies */ -import BlockIcon from '../block-icon'; +import { BlockIcon } from '@wordpress/block-editor'; import BlockRatings from '../block-ratings'; function DiscoverBlockHeader( { slug, icon, title, rating, ratingCount, onClick, installBlock, removeNotice } ) { From b3bd7525968d40129564905e73dd69c00486f570 Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 6 Aug 2019 14:25:40 +1200 Subject: [PATCH 068/122] Fixed bad reference in scss file. --- packages/downloadable-blocks/src/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/downloadable-blocks/src/style.scss b/packages/downloadable-blocks/src/style.scss index a291c2ae948a7e..b8138eb9f3737f 100644 --- a/packages/downloadable-blocks/src/style.scss +++ b/packages/downloadable-blocks/src/style.scss @@ -4,5 +4,4 @@ @import "./components/discover-block-list-item/style.scss"; @import "./components/discover-blocks-list/style.scss"; @import "./components/discover-blocks-panel/style.scss"; -@import "./components/block-icon/style.scss"; @import "./components/block-ratings/style.scss"; From b2352ff617fe41f405d1aee1760117b03ac3b529 Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 6 Aug 2019 14:41:03 +1200 Subject: [PATCH 069/122] Moved installBlock function to a be next to handleDownloadableBlock. --- .../components/discover-block-header/index.js | 27 ++--------------- .../components/discover-blocks-list/index.js | 30 +++++++++++++++++-- 2 files changed, 29 insertions(+), 28 deletions(-) diff --git a/packages/downloadable-blocks/src/components/discover-block-header/index.js b/packages/downloadable-blocks/src/components/discover-block-header/index.js index 5e92a83ca2c130..704d7b89ad694c 100644 --- a/packages/downloadable-blocks/src/components/discover-block-header/index.js +++ b/packages/downloadable-blocks/src/components/discover-block-header/index.js @@ -4,8 +4,6 @@ import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { Fragment } from '@wordpress/element'; -import { withDispatch } from '@wordpress/data'; -import { compose } from '@wordpress/compose'; /** * Internal dependencies @@ -13,17 +11,7 @@ import { compose } from '@wordpress/compose'; import { BlockIcon } from '@wordpress/block-editor'; import BlockRatings from '../block-ratings'; -function DiscoverBlockHeader( { slug, icon, title, rating, ratingCount, onClick, installBlock, removeNotice } ) { - const retryIfFailed = () => { - removeNotice( 'block-install-error' ); - installBlock( slug, retryIfFailed, removeIfFailed ); - }; - - const removeIfFailed = () => { - removeNotice( 'block-install-error' ); - //TODO: remove block and unregister block type from editor; - }; - +function DiscoverBlockHeader( { icon, title, rating, ratingCount, onClick } ) { return (
    @@ -45,7 +33,6 @@ function DiscoverBlockHeader( { slug, icon, title, rating, ratingCount, onClick, isDefault onClick={ ( event ) => { event.preventDefault(); - installBlock( slug, retryIfFailed, removeIfFailed ); onClick(); } } > @@ -56,14 +43,4 @@ function DiscoverBlockHeader( { slug, icon, title, rating, ratingCount, onClick, ); } -export default compose( - withDispatch( ( dispatch ) => { - const { installBlock } = dispatch( 'core/download-blocks' ); - const { removeNotice } = dispatch( 'core/notices' ); - - return { - installBlock, - removeNotice, - }; - } ), -)( DiscoverBlockHeader ); +export default DiscoverBlockHeader; diff --git a/packages/downloadable-blocks/src/components/discover-blocks-list/index.js b/packages/downloadable-blocks/src/components/discover-blocks-list/index.js index d1202911cf23bc..a0c6b5a212db5c 100644 --- a/packages/downloadable-blocks/src/components/discover-blocks-list/index.js +++ b/packages/downloadable-blocks/src/components/discover-blocks-list/index.js @@ -8,7 +8,8 @@ import { forEach } from 'lodash'; */ import { getBlockMenuDefaultClassName, getBlockTypes } from '@wordpress/blocks'; import { __ } from '@wordpress/i18n'; -import { dispatch } from '@wordpress/data'; +import { dispatch, withDispatch } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies @@ -121,7 +122,7 @@ const handleDownloadableBlock = ( item, onSelect ) => { scriptsCount = loadAssets( item.assets, onLoad, onError ); }; -function DiscoverBlocksList( { items, onSelect, onHover = () => {}, children } ) { +function DiscoverBlocksList( { items, onSelect, onHover = () => {}, children, installBlock } ) { return ( /* * Disable reason: The `list` ARIA role is redundant but @@ -136,6 +137,7 @@ function DiscoverBlocksList( { items, onSelect, onHover = () => {}, children } ) icons={ item.icons } onClick={ () => { handleDownloadableBlock( item, onSelect ); + installBlock( item.id ); onHover( null ); } } onFocus={ () => onHover( item ) } @@ -152,4 +154,26 @@ function DiscoverBlocksList( { items, onSelect, onHover = () => {}, children } ) ); } -export default DiscoverBlocksList; +export default compose( + withDispatch( ( ownDispatch ) => { + const { installBlock } = ownDispatch( 'core/download-blocks' ); + const { removeNotice } = ownDispatch( 'core/notices' ); + + const retryIfFailed = ( slug ) => { + removeNotice( 'block-install-error' ); + installBlock( slug, retryIfFailed, removeIfFailed ); + }; + + const removeIfFailed = () => { + removeNotice( 'block-install-error' ); + //TODO: remove block and unregister block type from editor; + }; + + return { + installBlock: ( slug ) => { + installBlock( slug, retryIfFailed, removeIfFailed ); + }, + removeNotice, + }; + } ), +)( DiscoverBlocksList ); From 8a9603b3665e392a48443ac202453b8bf5a5f2f5 Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 6 Aug 2019 16:09:26 +1200 Subject: [PATCH 070/122] Moved the handleDownloadableBlock to actions. --- .../discover-block-list-item/index.js | 2 - .../components/discover-blocks-list/index.js | 128 ++---------------- .../downloadable-blocks/src/store/actions.js | 43 +++++- .../downloadable-blocks/src/store/controls.js | 83 ++++++++++++ 4 files changed, 135 insertions(+), 121 deletions(-) diff --git a/packages/downloadable-blocks/src/components/discover-block-list-item/index.js b/packages/downloadable-blocks/src/components/discover-block-list-item/index.js index 0beb7992720a0e..1b2c6746415bf1 100644 --- a/packages/downloadable-blocks/src/components/discover-block-list-item/index.js +++ b/packages/downloadable-blocks/src/components/discover-block-list-item/index.js @@ -10,7 +10,6 @@ function DiscoverBlockListItem( { onClick, } ) { const { - id, icon, title, description, @@ -26,7 +25,6 @@ function DiscoverBlockListItem( {
    { - if ( ! asset ) { - return; - } - const existing = document.querySelector( `script[src="${ asset.src }"]` ); - if ( existing ) { - existing.parentNode.removeChild( existing ); - } - const script = document.createElement( 'script' ); - script.src = typeof asset === 'string' ? asset : asset.src; - script.onload = onLoad; - script.onerror = onError; - document.body.appendChild( script ); -}; - -/** - * Dynamically loads stylesheets - * - * @param {Object} asset The asset object as described in block.json. - */ -const loadStyle = ( asset ) => { - if ( ! asset ) { - return; - } - const link = document.createElement( 'link' ); - link.rel = 'stylesheet'; - link.href = typeof asset === 'string' ? asset : asset.src; - document.body.appendChild( link ); -}; - -/** - * Loads block's assets - * - * @param {Object|Array} assets The asset object as described in block.json or array of URL of the - * @param {Function} onLoad The callback function when script is loaded. - * @param {Function} onError The callback function when script is error loading. - * - * @return {number} The number of scripts loaded. - */ -const loadAssets = ( assets, onLoad, onError ) => { - let scriptsCount = 0; - if ( typeof assets === 'object' && assets.constructor === Array ) { - forEach( assets, ( asset ) => { - if ( asset.match( /\.js$/ ) !== null ) { - scriptsCount++; - onLoad.bind( scriptsCount ); - loadScipt( asset, onLoad, onError, scriptsCount ); - } else { - loadStyle( asset ); - } - } ); - } else { - scriptsCount++; - loadScipt( assets.editor_script, onLoad, onError ); - loadStyle( assets.style ); - } - return scriptsCount; -}; - -/** - * Handle a downloadable block to load assets, notify and retry on errors. - * - * @param {Object} item The selected block item - * @param {Function} onSelect The callback function when the assets are loaded. - */ -const handleDownloadableBlock = ( item, onSelect ) => { - const { - createErrorNotice, - removeNotice, - } = dispatch( 'core/notices' ); - - let scriptsCount = 0; - const onLoad = () => { - scriptsCount--; - if ( scriptsCount > 0 ) { - return; - } - const registeredBlocks = getBlockTypes(); - if ( registeredBlocks.length ) { - onSelect( item ); - } - }; - const onError = () => { - createErrorNotice( __( 'Block previews can\'t load.' ), { - id: 'block-preview-error', - actions: [ - { - label: __( 'Retry' ), - onClick: () => { - removeNotice( 'block-preview-error' ); - scriptsCount = loadAssets( item.assets, onLoad, onError ); - }, - }, - ], - } ); - }; - scriptsCount = loadAssets( item.assets, onLoad, onError ); -}; - -function DiscoverBlocksList( { items, onSelect, onHover = () => {}, children, installBlock } ) { +function DiscoverBlocksList( { items, onHover = () => {}, children, handleDownloadableBlock, installBlock } ) { return ( /* * Disable reason: The `list` ARIA role is redundant but @@ -136,7 +24,7 @@ function DiscoverBlocksList( { items, onSelect, onHover = () => {}, children, in className={ getBlockMenuDefaultClassName( item.id ) } icons={ item.icons } onClick={ () => { - handleDownloadableBlock( item, onSelect ); + handleDownloadableBlock( item ); installBlock( item.id ); onHover( null ); } } @@ -155,9 +43,10 @@ function DiscoverBlocksList( { items, onSelect, onHover = () => {}, children, in } export default compose( - withDispatch( ( ownDispatch ) => { - const { installBlock } = ownDispatch( 'core/download-blocks' ); + withDispatch( ( ownDispatch, props ) => { + const { installBlock, handleDownloadableBlock } = ownDispatch( 'core/download-blocks' ); const { removeNotice } = ownDispatch( 'core/notices' ); + const { onSelect } = props; const retryIfFailed = ( slug ) => { removeNotice( 'block-install-error' ); @@ -173,6 +62,9 @@ export default compose( installBlock: ( slug ) => { installBlock( slug, retryIfFailed, removeIfFailed ); }, + handleDownloadableBlock: ( item ) => { + handleDownloadableBlock( item, onSelect ); + }, removeNotice, }; } ), diff --git a/packages/downloadable-blocks/src/store/actions.js b/packages/downloadable-blocks/src/store/actions.js index 57b7fc305923f9..8c7d0c2b5806c4 100644 --- a/packages/downloadable-blocks/src/store/actions.js +++ b/packages/downloadable-blocks/src/store/actions.js @@ -2,11 +2,12 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; +import { getBlockTypes } from '@wordpress/blocks'; /** * Internal dependencies */ -import { dispatch, apiFetch } from './controls'; +import { dispatch, apiFetch, loadAssets } from './controls'; /** Returns an action object used in signalling that the discover blocks have been requested and is loading. * @@ -35,6 +36,46 @@ export function setInstallBlocksPermission( hasPermission ) { return { type: 'SET_INSTALL_BLOCKS_PERMISSION', hasPermission }; } +/** + * Action triggered to load assets for a downloadable block. + * + * @param {Object} item The selected block item + * @param {Function} onSelect The callback function when the assets are loaded. + */ +export function* handleDownloadableBlock( item, onSelect ) { + const { + createErrorNotice, + removeNotice, + } = dispatch( 'core/notices' ); + + let scriptsCount = 0; + const onLoad = () => { + scriptsCount--; + if ( scriptsCount > 0 ) { + return; + } + const registeredBlocks = getBlockTypes(); + if ( registeredBlocks.length ) { + onSelect( item ); + } + }; + const onError = () => { + createErrorNotice( __( 'Block previews can\'t load.' ), { + id: 'block-preview-error', + actions: [ + { + label: __( 'Retry' ), + onClick: () => { + removeNotice( 'block-preview-error' ); + scriptsCount = loadAssets( item.assets, onLoad, onError ); + }, + }, + ], + } ); + }; + scriptsCount = yield loadAssets( item.assets, onLoad, onError ); +} + /** Action triggered to install a block plugin * @param {string} slug The plugin slug for block. * @param {function} retry The callback function when user clicks Retry button on error notice. diff --git a/packages/downloadable-blocks/src/store/controls.js b/packages/downloadable-blocks/src/store/controls.js index a6aa53b245f84a..0ff3d66f70c296 100644 --- a/packages/downloadable-blocks/src/store/controls.js +++ b/packages/downloadable-blocks/src/store/controls.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import { forEach } from 'lodash'; + /** * WordPress dependencies */ @@ -22,6 +27,15 @@ export function select( storeName, selectorName, ...args ) { }; } +/** + * Calls a dispatcher using the current state. + * + * @param {string} storeName Store name. + * @param {string} dispatcherName Dispatcher name. + * @param {Array} args Selector arguments. + * + * @return {Object} control descriptor. + */ export function dispatch( storeName, dispatcherName, ...args ) { return { type: 'DISPATCH', @@ -44,6 +58,57 @@ export function apiFetch( request ) { }; } +/** + * Loads JavaScript + * @param {Array} asset the url for the JavaScript. + * @param {Function} onLoad callback function on success. + * @param {Function} onError callback funciton on failure. + */ +const loadScript = ( asset, onLoad, onError ) => { + if ( ! asset ) { + return; + } + const existing = document.querySelector( `script[src="${ asset.src }"]` ); + if ( existing ) { + existing.parentNode.removeChild( existing ); + } + const script = document.createElement( 'script' ); + script.src = typeof asset === 'string' ? asset : asset.src; + script.onload = onLoad; + script.onerror = onError; + document.body.appendChild( script ); +}; + +/** + * Loads CSS file. + * @param {*} asset the url for the CSS file. + */ +const loadStyle = ( asset ) => { + if ( ! asset ) { + return; + } + const link = document.createElement( 'link' ); + link.rel = 'stylesheet'; + link.href = typeof asset === 'string' ? asset : asset.src; + document.body.appendChild( link ); +}; + +/** + * Load the asset files for a block + * @param {Array} assets A collection of URL for the assets + * @param {Function} onLoad callback function on success. + * @param {Function} onError callback funciton on failure. + * @return {Object} control descriptor. + */ +export function* loadAssets( assets, onLoad, onError ) { + return { + type: 'LOAD_ASSETS', + assets, + onLoad, + onError, + }; +} + const controls = { SELECT: createRegistryControl( ( registry ) => ( { storeName, selectorName, args } ) => { return registry.select( storeName )[ selectorName ]( ...args ); @@ -54,6 +119,24 @@ const controls = { API_FETCH( { request } ) { return wpApiFetch( { ... request } ); }, + LOAD_ASSETS( { assets, onLoad, onError } ) { + let scriptsCount = 0; + if ( typeof assets === 'object' && assets.constructor === Array ) { + forEach( assets, ( asset ) => { + if ( asset.match( /\.js$/ ) !== null ) { + scriptsCount++; + loadScript( asset, onLoad, onError ); + } else { + loadStyle( asset ); + } + } ); + } else { + scriptsCount++; + loadScript( assets.editor_script, onLoad, onError ); + loadStyle( assets.style ); + } + return scriptsCount; + }, }; export default controls; From 2ec1a968d97b431062d1e5a08162974c19f46570 Mon Sep 17 00:00:00 2001 From: CK Date: Wed, 7 Aug 2019 11:13:46 +1200 Subject: [PATCH 071/122] Renamed downloadable-blocks package to block-directory. --- .../developers/data/data-core-block-editor.md | 53 ------------------- docs/manifest-devhub.json | 12 ++--- package.json | 2 +- .../.npmrc | 0 .../CHANGELOG.md | 0 .../README.md | 2 +- .../package.json | 6 +-- .../src/components/block-ratings/index.js | 0 .../src/components/block-ratings/stars.js | 0 .../src/components/block-ratings/style.scss | 0 .../discover-block-author-info/index.js | 0 .../discover-block-author-info/style.scss | 0 .../components/discover-block-header/index.js | 0 .../discover-block-header/style.scss | 0 .../components/discover-block-info/index.js | 0 .../components/discover-block-info/style.scss | 0 .../discover-block-list-item/index.js | 0 .../discover-block-list-item/style.scss | 0 .../components/discover-blocks-list/index.js | 0 .../discover-blocks-list/style.scss | 0 .../components/discover-blocks-panel/index.js | 0 .../discover-blocks-panel/style.scss | 0 .../src/index.js | 0 .../src/store/actions.js | 0 .../src/store/controls.js | 0 .../src/store/index.js | 0 .../src/store/reducer.js | 0 .../src/store/resolvers.js | 0 .../src/store/selectors.js | 0 .../src/style.scss | 0 packages/editor/package.json | 2 +- .../index.js | 2 +- 32 files changed, 13 insertions(+), 66 deletions(-) rename packages/{downloadable-blocks => block-directory}/.npmrc (100%) rename packages/{downloadable-blocks => block-directory}/CHANGELOG.md (100%) rename packages/{downloadable-blocks => block-directory}/README.md (94%) rename packages/{downloadable-blocks => block-directory}/package.json (82%) rename packages/{downloadable-blocks => block-directory}/src/components/block-ratings/index.js (100%) rename packages/{downloadable-blocks => block-directory}/src/components/block-ratings/stars.js (100%) rename packages/{downloadable-blocks => block-directory}/src/components/block-ratings/style.scss (100%) rename packages/{downloadable-blocks => block-directory}/src/components/discover-block-author-info/index.js (100%) rename packages/{downloadable-blocks => block-directory}/src/components/discover-block-author-info/style.scss (100%) rename packages/{downloadable-blocks => block-directory}/src/components/discover-block-header/index.js (100%) rename packages/{downloadable-blocks => block-directory}/src/components/discover-block-header/style.scss (100%) rename packages/{downloadable-blocks => block-directory}/src/components/discover-block-info/index.js (100%) rename packages/{downloadable-blocks => block-directory}/src/components/discover-block-info/style.scss (100%) rename packages/{downloadable-blocks => block-directory}/src/components/discover-block-list-item/index.js (100%) rename packages/{downloadable-blocks => block-directory}/src/components/discover-block-list-item/style.scss (100%) rename packages/{downloadable-blocks => block-directory}/src/components/discover-blocks-list/index.js (100%) rename packages/{downloadable-blocks => block-directory}/src/components/discover-blocks-list/style.scss (100%) rename packages/{downloadable-blocks => block-directory}/src/components/discover-blocks-panel/index.js (100%) rename packages/{downloadable-blocks => block-directory}/src/components/discover-blocks-panel/style.scss (100%) rename packages/{downloadable-blocks => block-directory}/src/index.js (100%) rename packages/{downloadable-blocks => block-directory}/src/store/actions.js (100%) rename packages/{downloadable-blocks => block-directory}/src/store/controls.js (100%) rename packages/{downloadable-blocks => block-directory}/src/store/index.js (100%) rename packages/{downloadable-blocks => block-directory}/src/store/reducer.js (100%) rename packages/{downloadable-blocks => block-directory}/src/store/resolvers.js (100%) rename packages/{downloadable-blocks => block-directory}/src/store/selectors.js (100%) rename packages/{downloadable-blocks => block-directory}/src/style.scss (100%) diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md index 00a9e9eaad7539..ae1ff66976a3e1 100644 --- a/docs/designers-developers/developers/data/data-core-block-editor.md +++ b/docs/designers-developers/developers/data/data-core-block-editor.md @@ -278,19 +278,6 @@ _Returns_ - `Array`: ids of top-level and descendant blocks. -# **getDiscoverBlocks** - -Returns the available uninstalled blocks - -_Parameters_ - -- _state_ `Object`: Global application state. -- _filterValue_ `string`: Search string. - -_Returns_ - -- `Array`: Discoverable blocks - # **getFirstMultiSelectedBlockClientId** Returns the client ID of the first block in the multi-selection set, or null @@ -606,18 +593,6 @@ _Returns_ - `boolean`: Items that appear in inserter. -# **hasInstallBlocksPermission** - -Returns true if user has permission to install blocks. - -_Parameters_ - -- _state_ `Object`: Global application state. - -_Returns_ - -- `boolean`: User has permission to install blocks. - # **hasMultiSelection** Returns true if a multi-selection has been made, or false otherwise. @@ -798,18 +773,6 @@ _Returns_ - `boolean`: True if multi-selecting, false if not. -# **isRequestingDiscoverBlocks** - -Returns true if application is requesting for discover blocks. - -_Parameters_ - -- _state_ `Object`: Global application state. - -_Returns_ - -- `Array`: Discoverable blocks - # **isSelectionEnabled** Selector that returns if multi-selection is enabled or not. @@ -877,10 +840,6 @@ _Returns_ - `Object`: Action object. -# **fetchDiscoverBlocks** - -Undocumented declaration. - # **hideInsertionPoint** Returns an action object hiding the insertion point. @@ -936,10 +895,6 @@ _Returns_ - `Object`: Action object -# **installBlock** - -Undocumented declaration. - # **mergeBlocks** Returns an action object used in signalling that two blocks should be merged @@ -1000,10 +955,6 @@ _Returns_ - `Object`: Action object. -# **receiveDiscoverBlocks** - -Undocumented declaration. - # **removeBlock** Returns an action object used in signalling that the block with the @@ -1132,10 +1083,6 @@ _Parameters_ - _clientId_ `string`: Block client ID. -# **setInstallBlocksPermission** - -Undocumented declaration. - # **setTemplateValidity** Returns an action object resetting the template validity. diff --git a/docs/manifest-devhub.json b/docs/manifest-devhub.json index 06f80c284024d5..7c7d6900fbcefd 100644 --- a/docs/manifest-devhub.json +++ b/docs/manifest-devhub.json @@ -1085,6 +1085,12 @@ "markdown_source": "../packages/blob/README.md", "parent": "packages" }, + { + "title": "@wordpress/block-directory", + "slug": "packages-block-directory", + "markdown_source": "../packages/block-directory/README.md", + "parent": "packages" + }, { "title": "@wordpress/block-editor", "slug": "packages-block-editor", @@ -1193,12 +1199,6 @@ "markdown_source": "../packages/dom/README.md", "parent": "packages" }, - { - "title": "@wordpress/downloadable-blocks", - "slug": "packages-downloadable-blocks", - "markdown_source": "../packages/downloadable-blocks/README.md", - "parent": "packages" - }, { "title": "@wordpress/e2e-test-utils", "slug": "packages-e2e-test-utils", diff --git a/package.json b/package.json index fc9132479c7fd2..08ef507a33a8c1 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "@wordpress/deprecated": "file:packages/deprecated", "@wordpress/dom": "file:packages/dom", "@wordpress/dom-ready": "file:packages/dom-ready", - "@wordpress/downloadable-blocks": "file:packages/downloadable-blocks", + "@wordpress/block-directory": "file:packages/block-directory", "@wordpress/edit-post": "file:packages/edit-post", "@wordpress/edit-widgets": "file:packages/edit-widgets", "@wordpress/editor": "file:packages/editor", diff --git a/packages/downloadable-blocks/.npmrc b/packages/block-directory/.npmrc similarity index 100% rename from packages/downloadable-blocks/.npmrc rename to packages/block-directory/.npmrc diff --git a/packages/downloadable-blocks/CHANGELOG.md b/packages/block-directory/CHANGELOG.md similarity index 100% rename from packages/downloadable-blocks/CHANGELOG.md rename to packages/block-directory/CHANGELOG.md diff --git a/packages/downloadable-blocks/README.md b/packages/block-directory/README.md similarity index 94% rename from packages/downloadable-blocks/README.md rename to packages/block-directory/README.md index 36512926500a5c..37c9952b8197ba 100644 --- a/packages/downloadable-blocks/README.md +++ b/packages/block-directory/README.md @@ -9,7 +9,7 @@ Package used to extend block editor to download and install blocks directly. Install the module ```bash -npm install @wordpress/downloadable-blocks --save +npm install @wordpress/block-directory --save ``` _This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ diff --git a/packages/downloadable-blocks/package.json b/packages/block-directory/package.json similarity index 82% rename from packages/downloadable-blocks/package.json rename to packages/block-directory/package.json index 7838c7473f8ab7..39703924ef7400 100644 --- a/packages/downloadable-blocks/package.json +++ b/packages/block-directory/package.json @@ -1,5 +1,5 @@ { - "name": "@wordpress/downloadable-blocks", + "name": "@wordpress/block-directory", "version": "1.0.0", "description": "Extend block editor to download and install blocks directly.", "author": "The WordPress Contributors", @@ -7,11 +7,11 @@ "keywords": [ "downloadable blocks" ], - "homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/downloadable-blocks/README.md", + "homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/block-directory/README.md", "repository": { "type": "git", "url": "https://github.com/WordPress/gutenberg.git", - "directory": "packages/downloadable-blocks" + "directory": "packages/block-directory" }, "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" diff --git a/packages/downloadable-blocks/src/components/block-ratings/index.js b/packages/block-directory/src/components/block-ratings/index.js similarity index 100% rename from packages/downloadable-blocks/src/components/block-ratings/index.js rename to packages/block-directory/src/components/block-ratings/index.js diff --git a/packages/downloadable-blocks/src/components/block-ratings/stars.js b/packages/block-directory/src/components/block-ratings/stars.js similarity index 100% rename from packages/downloadable-blocks/src/components/block-ratings/stars.js rename to packages/block-directory/src/components/block-ratings/stars.js diff --git a/packages/downloadable-blocks/src/components/block-ratings/style.scss b/packages/block-directory/src/components/block-ratings/style.scss similarity index 100% rename from packages/downloadable-blocks/src/components/block-ratings/style.scss rename to packages/block-directory/src/components/block-ratings/style.scss diff --git a/packages/downloadable-blocks/src/components/discover-block-author-info/index.js b/packages/block-directory/src/components/discover-block-author-info/index.js similarity index 100% rename from packages/downloadable-blocks/src/components/discover-block-author-info/index.js rename to packages/block-directory/src/components/discover-block-author-info/index.js diff --git a/packages/downloadable-blocks/src/components/discover-block-author-info/style.scss b/packages/block-directory/src/components/discover-block-author-info/style.scss similarity index 100% rename from packages/downloadable-blocks/src/components/discover-block-author-info/style.scss rename to packages/block-directory/src/components/discover-block-author-info/style.scss diff --git a/packages/downloadable-blocks/src/components/discover-block-header/index.js b/packages/block-directory/src/components/discover-block-header/index.js similarity index 100% rename from packages/downloadable-blocks/src/components/discover-block-header/index.js rename to packages/block-directory/src/components/discover-block-header/index.js diff --git a/packages/downloadable-blocks/src/components/discover-block-header/style.scss b/packages/block-directory/src/components/discover-block-header/style.scss similarity index 100% rename from packages/downloadable-blocks/src/components/discover-block-header/style.scss rename to packages/block-directory/src/components/discover-block-header/style.scss diff --git a/packages/downloadable-blocks/src/components/discover-block-info/index.js b/packages/block-directory/src/components/discover-block-info/index.js similarity index 100% rename from packages/downloadable-blocks/src/components/discover-block-info/index.js rename to packages/block-directory/src/components/discover-block-info/index.js diff --git a/packages/downloadable-blocks/src/components/discover-block-info/style.scss b/packages/block-directory/src/components/discover-block-info/style.scss similarity index 100% rename from packages/downloadable-blocks/src/components/discover-block-info/style.scss rename to packages/block-directory/src/components/discover-block-info/style.scss diff --git a/packages/downloadable-blocks/src/components/discover-block-list-item/index.js b/packages/block-directory/src/components/discover-block-list-item/index.js similarity index 100% rename from packages/downloadable-blocks/src/components/discover-block-list-item/index.js rename to packages/block-directory/src/components/discover-block-list-item/index.js diff --git a/packages/downloadable-blocks/src/components/discover-block-list-item/style.scss b/packages/block-directory/src/components/discover-block-list-item/style.scss similarity index 100% rename from packages/downloadable-blocks/src/components/discover-block-list-item/style.scss rename to packages/block-directory/src/components/discover-block-list-item/style.scss diff --git a/packages/downloadable-blocks/src/components/discover-blocks-list/index.js b/packages/block-directory/src/components/discover-blocks-list/index.js similarity index 100% rename from packages/downloadable-blocks/src/components/discover-blocks-list/index.js rename to packages/block-directory/src/components/discover-blocks-list/index.js diff --git a/packages/downloadable-blocks/src/components/discover-blocks-list/style.scss b/packages/block-directory/src/components/discover-blocks-list/style.scss similarity index 100% rename from packages/downloadable-blocks/src/components/discover-blocks-list/style.scss rename to packages/block-directory/src/components/discover-blocks-list/style.scss diff --git a/packages/downloadable-blocks/src/components/discover-blocks-panel/index.js b/packages/block-directory/src/components/discover-blocks-panel/index.js similarity index 100% rename from packages/downloadable-blocks/src/components/discover-blocks-panel/index.js rename to packages/block-directory/src/components/discover-blocks-panel/index.js diff --git a/packages/downloadable-blocks/src/components/discover-blocks-panel/style.scss b/packages/block-directory/src/components/discover-blocks-panel/style.scss similarity index 100% rename from packages/downloadable-blocks/src/components/discover-blocks-panel/style.scss rename to packages/block-directory/src/components/discover-blocks-panel/style.scss diff --git a/packages/downloadable-blocks/src/index.js b/packages/block-directory/src/index.js similarity index 100% rename from packages/downloadable-blocks/src/index.js rename to packages/block-directory/src/index.js diff --git a/packages/downloadable-blocks/src/store/actions.js b/packages/block-directory/src/store/actions.js similarity index 100% rename from packages/downloadable-blocks/src/store/actions.js rename to packages/block-directory/src/store/actions.js diff --git a/packages/downloadable-blocks/src/store/controls.js b/packages/block-directory/src/store/controls.js similarity index 100% rename from packages/downloadable-blocks/src/store/controls.js rename to packages/block-directory/src/store/controls.js diff --git a/packages/downloadable-blocks/src/store/index.js b/packages/block-directory/src/store/index.js similarity index 100% rename from packages/downloadable-blocks/src/store/index.js rename to packages/block-directory/src/store/index.js diff --git a/packages/downloadable-blocks/src/store/reducer.js b/packages/block-directory/src/store/reducer.js similarity index 100% rename from packages/downloadable-blocks/src/store/reducer.js rename to packages/block-directory/src/store/reducer.js diff --git a/packages/downloadable-blocks/src/store/resolvers.js b/packages/block-directory/src/store/resolvers.js similarity index 100% rename from packages/downloadable-blocks/src/store/resolvers.js rename to packages/block-directory/src/store/resolvers.js diff --git a/packages/downloadable-blocks/src/store/selectors.js b/packages/block-directory/src/store/selectors.js similarity index 100% rename from packages/downloadable-blocks/src/store/selectors.js rename to packages/block-directory/src/store/selectors.js diff --git a/packages/downloadable-blocks/src/style.scss b/packages/block-directory/src/style.scss similarity index 100% rename from packages/downloadable-blocks/src/style.scss rename to packages/block-directory/src/style.scss diff --git a/packages/editor/package.json b/packages/editor/package.json index 2023257f406c71..95d1446fcdbf95 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -24,6 +24,7 @@ "@babel/runtime": "^7.4.4", "@wordpress/api-fetch": "file:../api-fetch", "@wordpress/blob": "file:../blob", + "@wordpress/block-directory": "file:../block-directory", "@wordpress/block-editor": "file:../block-editor", "@wordpress/blocks": "file:../blocks", "@wordpress/components": "file:../components", @@ -33,7 +34,6 @@ "@wordpress/data-controls": "file:../data-controls", "@wordpress/date": "file:../date", "@wordpress/deprecated": "file:../deprecated", - "@wordpress/downloadable-blocks": "file:../downloadable-blocks", "@wordpress/element": "file:../element", "@wordpress/hooks": "file:../hooks", "@wordpress/html-entities": "file:../html-entities", diff --git a/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js b/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js index 55b52367b5bb82..ff6cbe0fdeeb28 100644 --- a/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js +++ b/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js @@ -7,7 +7,7 @@ import { debounce } from 'lodash'; * WordPress dependencies */ import { __experimentalInserterMenuExtension } from '@wordpress/block-editor'; -import DownloadableBlocks from '@wordpress/downloadable-blocks'; +import DownloadableBlocks from '@wordpress/block-directory'; import { useState } from '@wordpress/element'; function InserterMenuDownloadableBlocksPanel() { From 762a72661981c146059d2da1c60549fc811ccbf7 Mon Sep 17 00:00:00 2001 From: CK Date: Wed, 7 Aug 2019 11:42:45 +1200 Subject: [PATCH 072/122] Export DiscoverBlocksPanel as named exports. --- packages/block-directory/src/index.js | 14 +------------- .../index.js | 4 ++-- 2 files changed, 3 insertions(+), 15 deletions(-) diff --git a/packages/block-directory/src/index.js b/packages/block-directory/src/index.js index e0491860853315..0d155012f1c8f9 100644 --- a/packages/block-directory/src/index.js +++ b/packages/block-directory/src/index.js @@ -2,17 +2,5 @@ * Internal dependencies */ import './store'; -import DiscoverBlocksPanel from './components/discover-blocks-panel'; -function DownloadableBlocks( { onSelect, filterValue } ) { - return ( -
    - -
    - ); -} - -export default DownloadableBlocks; +export { default as DiscoverBlocksPanel } from './components/discover-blocks-panel'; diff --git a/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js b/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js index ff6cbe0fdeeb28..b3c04d59f4754e 100644 --- a/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js +++ b/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js @@ -7,7 +7,7 @@ import { debounce } from 'lodash'; * WordPress dependencies */ import { __experimentalInserterMenuExtension } from '@wordpress/block-editor'; -import DownloadableBlocks from '@wordpress/block-directory'; +import { DiscoverBlocksPanel } from '@wordpress/block-directory'; import { useState } from '@wordpress/element'; function InserterMenuDownloadableBlocksPanel() { @@ -32,7 +32,7 @@ function InserterMenuDownloadableBlocksPanel() { } return ( - Date: Wed, 7 Aug 2019 11:49:28 +1200 Subject: [PATCH 073/122] Update README and package.json. --- packages/block-directory/README.md | 4 ++-- packages/block-directory/package.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-directory/README.md b/packages/block-directory/README.md index 37c9952b8197ba..16ef9ac8bc8d30 100644 --- a/packages/block-directory/README.md +++ b/packages/block-directory/README.md @@ -1,6 +1,6 @@ -# Downloadable Blocks +# Block directory -Package used to extend block editor to download and install blocks directly. +Package used to extend editor with block directory features to search and install blocks. > This package is meant to be used only with WordPress core. Feel free to use it in your own project but please keep in mind that it might never get fully documented. diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json index 39703924ef7400..59b0e23e96afdb 100644 --- a/packages/block-directory/package.json +++ b/packages/block-directory/package.json @@ -1,11 +1,11 @@ { "name": "@wordpress/block-directory", "version": "1.0.0", - "description": "Extend block editor to download and install blocks directly.", + "description": "Extend editor with block directory features to search, download and install blocks.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", "keywords": [ - "downloadable blocks" + "block directory" ], "homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/block-directory/README.md", "repository": { From 4b3d836553feea965a4f918cecd1d226a6461bec Mon Sep 17 00:00:00 2001 From: CK Date: Wed, 7 Aug 2019 11:55:38 +1200 Subject: [PATCH 074/122] Renamed store to core/block-directory. --- .../src/components/discover-blocks-list/index.js | 2 +- .../src/components/discover-blocks-panel/index.js | 2 +- packages/block-directory/src/store/index.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-directory/src/components/discover-blocks-list/index.js b/packages/block-directory/src/components/discover-blocks-list/index.js index b2548f4bf5aabc..62f5a8a806a9b8 100644 --- a/packages/block-directory/src/components/discover-blocks-list/index.js +++ b/packages/block-directory/src/components/discover-blocks-list/index.js @@ -44,7 +44,7 @@ function DiscoverBlocksList( { items, onHover = () => {}, children, handleDownlo export default compose( withDispatch( ( ownDispatch, props ) => { - const { installBlock, handleDownloadableBlock } = ownDispatch( 'core/download-blocks' ); + const { installBlock, handleDownloadableBlock } = ownDispatch( 'core/block-directory' ); const { removeNotice } = ownDispatch( 'core/notices' ); const { onSelect } = props; diff --git a/packages/block-directory/src/components/discover-blocks-panel/index.js b/packages/block-directory/src/components/discover-blocks-panel/index.js index 399b5c9fb859e0..a60157762c37f3 100644 --- a/packages/block-directory/src/components/discover-blocks-panel/index.js +++ b/packages/block-directory/src/components/discover-blocks-panel/index.js @@ -55,7 +55,7 @@ export default compose( [ getDiscoverBlocks, hasInstallBlocksPermission, isRequestingDiscoverBlocks, - } = select( 'core/download-blocks' ); + } = select( 'core/block-directory' ); const discoverItems = getDiscoverBlocks( filterValue ); const hasPermission = hasInstallBlocksPermission(); diff --git a/packages/block-directory/src/store/index.js b/packages/block-directory/src/store/index.js index d40b66d75df99a..4237813cb29eb9 100644 --- a/packages/block-directory/src/store/index.js +++ b/packages/block-directory/src/store/index.js @@ -15,7 +15,7 @@ import controls from './controls'; /** * Module Constants */ -const MODULE_KEY = 'core/download-blocks'; +const MODULE_KEY = 'core/block-directory'; /** * Block editor data store configuration. From e4cc959433962baf94ef301e54f0dd5c4049057a Mon Sep 17 00:00:00 2001 From: CK Date: Wed, 7 Aug 2019 12:57:59 +1200 Subject: [PATCH 075/122] Renamed css class name. --- .../src/components/discover-blocks-list/index.js | 2 +- .../src/components/discover-blocks-list/style.scss | 2 +- .../src/components/discover-blocks-panel/index.js | 8 ++++---- .../src/components/discover-blocks-panel/style.scss | 4 ++-- .../block-editor/src/components/inserter/test/menu.js | 2 +- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/block-directory/src/components/discover-blocks-list/index.js b/packages/block-directory/src/components/discover-blocks-list/index.js index 62f5a8a806a9b8..d104c04db7c2c8 100644 --- a/packages/block-directory/src/components/discover-blocks-list/index.js +++ b/packages/block-directory/src/components/discover-blocks-list/index.js @@ -17,7 +17,7 @@ function DiscoverBlocksList( { items, onHover = () => {}, children, handleDownlo * Safari+VoiceOver won't announce the list otherwise. */ /* eslint-disable jsx-a11y/no-redundant-roles */ -
      +
        { items && items.map( ( item ) => +

        ); @@ -23,7 +23,7 @@ function DiscoverBlocksPanel( { discoverItems, onSelect, onHover, hasPermission, if ( ! hasPermission ) { return ( -

        +

        { __( 'No blocks found in your library.' ) }
        { __( 'Please contact your site administrator to install new blocks.' ) } @@ -33,7 +33,7 @@ function DiscoverBlocksPanel( { discoverItems, onSelect, onHover, hasPermission, if ( ! discoverItems.length ) { return ( -

        +

        { __( 'No blocks found in your library.' ) }

        ); @@ -41,7 +41,7 @@ function DiscoverBlocksPanel( { discoverItems, onSelect, onHover, hasPermission, return ( -

        +

        { __( 'No blocks found in your library. We did find these blocks available for download:' ) }

        diff --git a/packages/block-directory/src/components/discover-blocks-panel/style.scss b/packages/block-directory/src/components/discover-blocks-panel/style.scss index 79f6b99c492006..62a6a11c0fcabe 100644 --- a/packages/block-directory/src/components/discover-blocks-panel/style.scss +++ b/packages/block-directory/src/components/discover-blocks-panel/style.scss @@ -1,5 +1,5 @@ -.block-editor-discover-blocks-panel__description { +.block-directory-downloadable-blocks-panel__description { font-style: italic; padding: 0; margin-top: 0; @@ -7,7 +7,7 @@ color: $dark-gray-400; } -.block-editor-discover-blocks-panel__description.has-no-results { +.block-directory-downloadable-blocks-panel__description.has-no-results { font-style: normal; padding: 0; margin-top: 100px; diff --git a/packages/block-editor/src/components/inserter/test/menu.js b/packages/block-editor/src/components/inserter/test/menu.js index 0b6ba115aff793..4e77ef50df7cd2 100644 --- a/packages/block-editor/src/components/inserter/test/menu.js +++ b/packages/block-editor/src/components/inserter/test/menu.js @@ -124,7 +124,7 @@ const initializeAllClosedMenuStateAndReturnElement = ( propOverrides ) => { const assertNoResultsMessageToBePresent = ( element ) => { const noResultsMessage = element.querySelector( - '.block-editor-discover-blocks-panel__description.has-no-results' + '.block-directory-downloadable-blocks-panel__description.has-no-results' ); expect( noResultsMessage.textContent ).toContain( 'No blocks found' ); }; From 822bcc111e8c11a375b0a1e142046ed831b72c23 Mon Sep 17 00:00:00 2001 From: CK Date: Wed, 7 Aug 2019 13:08:52 +1200 Subject: [PATCH 076/122] Renamed css class name. --- lib/client-assets.php | 10 +++++----- .../components/discover-block-author-info/index.js | 6 +++--- .../components/discover-block-author-info/style.scss | 4 ++-- .../src/components/discover-block-header/index.js | 6 +++--- .../src/components/discover-block-header/style.scss | 6 +++--- .../src/components/discover-block-info/index.js | 8 ++++---- .../src/components/discover-block-info/style.scss | 6 +++--- .../src/components/discover-block-list-item/index.js | 10 +++++----- .../components/discover-block-list-item/style.scss | 12 ++++++------ 9 files changed, 34 insertions(+), 34 deletions(-) diff --git a/lib/client-assets.php b/lib/client-assets.php index 7eb90a15ab5b55..cdbb3be1f0ec58 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -319,7 +319,7 @@ function gutenberg_register_scripts_and_styles() { gutenberg_override_style( 'wp-editor', gutenberg_url( 'build/editor/style.css' ), - array( 'wp-components', 'wp-block-editor', 'wp-nux', 'wp-downloadable-blocks' ), + array( 'wp-components', 'wp-block-editor', 'wp-nux', 'wp-block-directory' ), filemtime( gutenberg_dir_path() . 'build/editor/style.css' ) ); wp_style_add_data( 'wp-editor', 'rtl', 'replace' ); @@ -403,12 +403,12 @@ function gutenberg_register_scripts_and_styles() { wp_style_add_data( 'wp-edit-widgets', 'rtl', 'replace' ); gutenberg_override_style( - 'wp-downloadable-blocks', - gutenberg_url( 'build/downloadable-blocks/style.css' ), + 'wp-block-directory', + gutenberg_url( 'build/block-directory/style.css' ), array( 'wp-components' ), - filemtime( gutenberg_dir_path() . 'build/downloadable-blocks/style.css' ) + filemtime( gutenberg_dir_path() . 'build/block-directory/style.css' ) ); - wp_style_add_data( 'wp-downloadable-blocks', 'rtl', 'replace' ); + wp_style_add_data( 'wp-block-directory', 'rtl', 'replace' ); if ( defined( 'GUTENBERG_LIVE_RELOAD' ) && GUTENBERG_LIVE_RELOAD ) { $live_reload_url = ( GUTENBERG_LIVE_RELOAD === true ) ? 'http://localhost:35729/livereload.js' : GUTENBERG_LIVE_RELOAD; diff --git a/packages/block-directory/src/components/discover-block-author-info/index.js b/packages/block-directory/src/components/discover-block-author-info/index.js index dc84c9f3c8b874..e8afcdc0504c25 100644 --- a/packages/block-directory/src/components/discover-block-author-info/index.js +++ b/packages/block-directory/src/components/discover-block-author-info/index.js @@ -6,13 +6,13 @@ import { Fragment } from '@wordpress/element'; function DiscoverBlockAuthorInfo( { author } ) { return ( - + Authored by { author } - + This author has X blocks, with an average rating of X.X. - + They have an average support time of X days. diff --git a/packages/block-directory/src/components/discover-block-author-info/style.scss b/packages/block-directory/src/components/discover-block-author-info/style.scss index 9508e8dd3f64be..5692e5d66bfecb 100644 --- a/packages/block-directory/src/components/discover-block-author-info/style.scss +++ b/packages/block-directory/src/components/discover-block-author-info/style.scss @@ -1,9 +1,9 @@ -.block-editor-discover-block-author-info__content { +.block-directory-downloadable-block-author-info__content { color: $dark-gray-400; margin-bottom: 4px; } -.block-editor-discover-block-author-info__content-author { +.block-directory-downloadable-block-author-info__content-author { margin-bottom: 4px; font-size: 14px; } diff --git a/packages/block-directory/src/components/discover-block-header/index.js b/packages/block-directory/src/components/discover-block-header/index.js index 704d7b89ad694c..a63cef3a42dab6 100644 --- a/packages/block-directory/src/components/discover-block-header/index.js +++ b/packages/block-directory/src/components/discover-block-header/index.js @@ -14,7 +14,7 @@ import BlockRatings from '../block-ratings'; function DiscoverBlockHeader( { icon, title, rating, ratingCount, onClick } ) { return ( -
        +
        { icon.match( /\.(jpeg|jpg|gif|png)/ ) !== null ? block icon : @@ -23,8 +23,8 @@ function DiscoverBlockHeader( { icon, title, rating, ratingCount, onClick } ) { } -
        - +
        + { title } diff --git a/packages/block-directory/src/components/discover-block-header/style.scss b/packages/block-directory/src/components/discover-block-header/style.scss index 2470b1e2ba9f77..6840b3cb113457 100644 --- a/packages/block-directory/src/components/discover-block-header/style.scss +++ b/packages/block-directory/src/components/discover-block-header/style.scss @@ -1,4 +1,4 @@ -.block-editor-discover-block-header__row { +.block-directory-downloadable-block-header__row { display: flex; flex-grow: 1; @@ -14,11 +14,11 @@ height: 36px; } - .block-editor-discover-block-header__column { + .block-directory-downloadable-block-header__column { display: flex; flex-direction: column; flex-grow: 1; - .block-editor-discover-block-header__title { + .block-directory-downloadable-block-header__title { font-weight: 600; margin-left: 12px; } diff --git a/packages/block-directory/src/components/discover-block-info/index.js b/packages/block-directory/src/components/discover-block-info/index.js index 0f648c4e2d863b..8df84881340503 100644 --- a/packages/block-directory/src/components/discover-block-info/index.js +++ b/packages/block-directory/src/components/discover-block-info/index.js @@ -8,14 +8,14 @@ import { _n, sprintf } from '@wordpress/i18n'; function DiscoverBlockInfo( { description, activeInstalls, humanizedUpdated } ) { return ( - + { description } -
        -
        +
        +
        { sprintf( _n( '%d active installation', '%d active installations', activeInstalls ), activeInstalls ) }
        -
        +
        { humanizedUpdated }
        diff --git a/packages/block-directory/src/components/discover-block-info/style.scss b/packages/block-directory/src/components/discover-block-info/style.scss index 1dae97ee6e4187..8ae857cca22ce0 100644 --- a/packages/block-directory/src/components/discover-block-info/style.scss +++ b/packages/block-directory/src/components/discover-block-info/style.scss @@ -1,14 +1,14 @@ -.block-editor-discover-block-info__content { +.block-directory-downloadable-block-info__content { font-size: 14px; } -.block-editor-discover-block-info__row { +.block-directory-downloadable-block-info__row { display: flex; justify-content: space-between; color: $dark-gray-400; margin-top: 8px; - .block-editor-discover-block-info__column { + .block-directory-downloadable-block-info__column { display: flex; align-items: flex-start; diff --git a/packages/block-directory/src/components/discover-block-list-item/index.js b/packages/block-directory/src/components/discover-block-list-item/index.js index 1b2c6746415bf1..759ecc0b848b61 100644 --- a/packages/block-directory/src/components/discover-block-list-item/index.js +++ b/packages/block-directory/src/components/discover-block-list-item/index.js @@ -21,9 +21,9 @@ function DiscoverBlockListItem( { } = item; return ( -
      • -
        -
        +
      • +
        +
        -
        +
        -
        +
        diff --git a/packages/block-directory/src/components/discover-block-list-item/style.scss b/packages/block-directory/src/components/discover-block-list-item/style.scss index 1c1af482da2841..e862d0225ff7b6 100644 --- a/packages/block-directory/src/components/discover-block-list-item/style.scss +++ b/packages/block-directory/src/components/discover-block-list-item/style.scss @@ -1,4 +1,4 @@ -.block-editor-discover-block-list-item { +.block-directory-downloadable-block-list-item { width: 100%; padding: 0; margin: 0 0 12px; @@ -18,31 +18,31 @@ text-align: left; } -.block-editor-discover-block-list-item__panel { +.block-directory-downloadable-block-list-item__panel { display: flex; flex-grow: 1; flex-direction: column; } -.block-editor-discover-block-list-item__header { +.block-directory-downloadable-block-list-item__header { display: flex; flex-direction: column; padding: 12px 12px 0; } -.block-editor-discover-block-list-item__body { +.block-directory-downloadable-block-list-item__body { display: flex; flex-direction: column; padding: 12px; } -.block-editor-discover-block-list-item__footer { +.block-directory-downloadable-block-list-item__footer { display: flex; flex-direction: column; padding: 12px; background-color: $light-gray-500; } -.block-editor-discover-block-list-item__content { +.block-directory-downloadable-block-list-item__content { color: $dark-gray-400; } From d91f6690a4ebe8032f79723a506c4acd1d93ee4e Mon Sep 17 00:00:00 2001 From: CK Date: Wed, 7 Aug 2019 13:22:47 +1200 Subject: [PATCH 077/122] Renamed discover-block to downloadable-block --- .../index.js | 4 ++-- .../style.scss | 0 .../index.js | 4 ++-- .../style.scss | 0 .../index.js | 4 ++-- .../style.scss | 0 .../index.js | 16 ++++++++-------- .../style.scss | 0 .../index.js | 8 ++++---- .../style.scss | 0 .../index.js | 16 ++++++++-------- .../style.scss | 0 packages/block-directory/src/index.js | 2 +- packages/block-directory/src/store/actions.js | 4 ++-- packages/block-directory/src/store/reducer.js | 8 ++++---- packages/block-directory/src/store/resolvers.js | 8 ++++---- packages/block-directory/src/store/selectors.js | 6 +++--- packages/block-directory/src/style.scss | 12 ++++++------ .../index.js | 4 ++-- 19 files changed, 48 insertions(+), 48 deletions(-) rename packages/block-directory/src/components/{discover-block-author-info => downloadable-block-author-info}/index.js (86%) rename packages/block-directory/src/components/{discover-block-author-info => downloadable-block-author-info}/style.scss (100%) rename packages/block-directory/src/components/{discover-block-header => downloadable-block-header}/index.js (89%) rename packages/block-directory/src/components/{discover-block-header => downloadable-block-header}/style.scss (100%) rename packages/block-directory/src/components/{discover-block-info => downloadable-block-info}/index.js (85%) rename packages/block-directory/src/components/{discover-block-info => downloadable-block-info}/style.scss (100%) rename packages/block-directory/src/components/{discover-block-list-item => downloadable-block-list-item}/index.js (70%) rename packages/block-directory/src/components/{discover-block-list-item => downloadable-block-list-item}/style.scss (100%) rename packages/block-directory/src/components/{discover-blocks-list => downloadable-blocks-list}/index.js (88%) rename packages/block-directory/src/components/{discover-blocks-list => downloadable-blocks-list}/style.scss (100%) rename packages/block-directory/src/components/{discover-blocks-panel => downloadable-blocks-panel}/index.js (75%) rename packages/block-directory/src/components/{discover-blocks-panel => downloadable-blocks-panel}/style.scss (100%) diff --git a/packages/block-directory/src/components/discover-block-author-info/index.js b/packages/block-directory/src/components/downloadable-block-author-info/index.js similarity index 86% rename from packages/block-directory/src/components/discover-block-author-info/index.js rename to packages/block-directory/src/components/downloadable-block-author-info/index.js index e8afcdc0504c25..4cc76ffa9cd3b9 100644 --- a/packages/block-directory/src/components/discover-block-author-info/index.js +++ b/packages/block-directory/src/components/downloadable-block-author-info/index.js @@ -3,7 +3,7 @@ */ import { Fragment } from '@wordpress/element'; -function DiscoverBlockAuthorInfo( { author } ) { +function DownloadableBlockAuthorInfo( { author } ) { return ( @@ -19,4 +19,4 @@ function DiscoverBlockAuthorInfo( { author } ) { ); } -export default DiscoverBlockAuthorInfo; +export default DownloadableBlockAuthorInfo; diff --git a/packages/block-directory/src/components/discover-block-author-info/style.scss b/packages/block-directory/src/components/downloadable-block-author-info/style.scss similarity index 100% rename from packages/block-directory/src/components/discover-block-author-info/style.scss rename to packages/block-directory/src/components/downloadable-block-author-info/style.scss diff --git a/packages/block-directory/src/components/discover-block-header/index.js b/packages/block-directory/src/components/downloadable-block-header/index.js similarity index 89% rename from packages/block-directory/src/components/discover-block-header/index.js rename to packages/block-directory/src/components/downloadable-block-header/index.js index a63cef3a42dab6..a7036d4015641a 100644 --- a/packages/block-directory/src/components/discover-block-header/index.js +++ b/packages/block-directory/src/components/downloadable-block-header/index.js @@ -11,7 +11,7 @@ import { Fragment } from '@wordpress/element'; import { BlockIcon } from '@wordpress/block-editor'; import BlockRatings from '../block-ratings'; -function DiscoverBlockHeader( { icon, title, rating, ratingCount, onClick } ) { +function DownloadableBlockHeader( { icon, title, rating, ratingCount, onClick } ) { return (
        @@ -43,4 +43,4 @@ function DiscoverBlockHeader( { icon, title, rating, ratingCount, onClick } ) { ); } -export default DiscoverBlockHeader; +export default DownloadableBlockHeader; diff --git a/packages/block-directory/src/components/discover-block-header/style.scss b/packages/block-directory/src/components/downloadable-block-header/style.scss similarity index 100% rename from packages/block-directory/src/components/discover-block-header/style.scss rename to packages/block-directory/src/components/downloadable-block-header/style.scss diff --git a/packages/block-directory/src/components/discover-block-info/index.js b/packages/block-directory/src/components/downloadable-block-info/index.js similarity index 85% rename from packages/block-directory/src/components/discover-block-info/index.js rename to packages/block-directory/src/components/downloadable-block-info/index.js index 8df84881340503..611bc2c6e09c71 100644 --- a/packages/block-directory/src/components/discover-block-info/index.js +++ b/packages/block-directory/src/components/downloadable-block-info/index.js @@ -5,7 +5,7 @@ import { Fragment } from '@wordpress/element'; import { Icon } from '@wordpress/components'; import { _n, sprintf } from '@wordpress/i18n'; -function DiscoverBlockInfo( { description, activeInstalls, humanizedUpdated } ) { +function DownloadableBlockInfo( { description, activeInstalls, humanizedUpdated } ) { return ( @@ -23,4 +23,4 @@ function DiscoverBlockInfo( { description, activeInstalls, humanizedUpdated } ) ); } -export default DiscoverBlockInfo; +export default DownloadableBlockInfo; diff --git a/packages/block-directory/src/components/discover-block-info/style.scss b/packages/block-directory/src/components/downloadable-block-info/style.scss similarity index 100% rename from packages/block-directory/src/components/discover-block-info/style.scss rename to packages/block-directory/src/components/downloadable-block-info/style.scss diff --git a/packages/block-directory/src/components/discover-block-list-item/index.js b/packages/block-directory/src/components/downloadable-block-list-item/index.js similarity index 70% rename from packages/block-directory/src/components/discover-block-list-item/index.js rename to packages/block-directory/src/components/downloadable-block-list-item/index.js index 759ecc0b848b61..1b607cf6f476c2 100644 --- a/packages/block-directory/src/components/discover-block-list-item/index.js +++ b/packages/block-directory/src/components/downloadable-block-list-item/index.js @@ -1,11 +1,11 @@ /** * Internal dependencies */ -import DiscoverBlockHeader from '../discover-block-header'; -import DiscoverBlockAuthorInfo from '../discover-block-author-info'; -import DiscoverBlockInfo from '../discover-block-info'; +import DownloadableBlockHeader from '../downloadable-block-header'; +import DownloadableBlockAuthorInfo from '../downloadable-block-author-info'; +import DownloadableBlockInfo from '../downloadable-block-info'; -function DiscoverBlockListItem( { +function DownloadableBlockListItem( { item, onClick, } ) { @@ -24,7 +24,7 @@ function DiscoverBlockListItem( {
      • -
        -
        -
        @@ -49,4 +49,4 @@ function DiscoverBlockListItem( { ); } -export default DiscoverBlockListItem; +export default DownloadableBlockListItem; diff --git a/packages/block-directory/src/components/discover-block-list-item/style.scss b/packages/block-directory/src/components/downloadable-block-list-item/style.scss similarity index 100% rename from packages/block-directory/src/components/discover-block-list-item/style.scss rename to packages/block-directory/src/components/downloadable-block-list-item/style.scss diff --git a/packages/block-directory/src/components/discover-blocks-list/index.js b/packages/block-directory/src/components/downloadable-blocks-list/index.js similarity index 88% rename from packages/block-directory/src/components/discover-blocks-list/index.js rename to packages/block-directory/src/components/downloadable-blocks-list/index.js index d104c04db7c2c8..7506dbd7805e00 100644 --- a/packages/block-directory/src/components/discover-blocks-list/index.js +++ b/packages/block-directory/src/components/downloadable-blocks-list/index.js @@ -8,9 +8,9 @@ import { compose } from '@wordpress/compose'; /** * Internal dependencies */ -import DiscoverBlockListItem from '../discover-block-list-item'; +import DownloadableBlockListItem from '../downloadable-block-list-item'; -function DiscoverBlocksList( { items, onHover = () => {}, children, handleDownloadableBlock, installBlock } ) { +function DownloadableBlocksList( { items, onHover = () => {}, children, handleDownloadableBlock, installBlock } ) { return ( /* * Disable reason: The `list` ARIA role is redundant but @@ -19,7 +19,7 @@ function DiscoverBlocksList( { items, onHover = () => {}, children, handleDownlo /* eslint-disable jsx-a11y/no-redundant-roles */
          { items && items.map( ( item ) => - @@ -44,7 +44,7 @@ function DiscoverBlocksPanel( { discoverItems, onSelect, onHover, hasPermission,

          { __( 'No blocks found in your library. We did find these blocks available for download:' ) }

          - + ); } @@ -52,14 +52,14 @@ function DiscoverBlocksPanel( { discoverItems, onSelect, onHover, hasPermission, export default compose( [ withSelect( ( select, { filterValue } ) => { const { - getDiscoverBlocks, + getDownloadableBlocks, hasInstallBlocksPermission, - isRequestingDiscoverBlocks, + isRequestingDownloadableBlocks, } = select( 'core/block-directory' ); - const discoverItems = getDiscoverBlocks( filterValue ); + const discoverItems = getDownloadableBlocks( filterValue ); const hasPermission = hasInstallBlocksPermission(); - const isLoading = isRequestingDiscoverBlocks(); + const isLoading = isRequestingDownloadableBlocks(); return { discoverItems, @@ -67,4 +67,4 @@ export default compose( [ isLoading, }; } ), -] )( DiscoverBlocksPanel ); +] )( DownloadableBlocksPanel ); diff --git a/packages/block-directory/src/components/discover-blocks-panel/style.scss b/packages/block-directory/src/components/downloadable-blocks-panel/style.scss similarity index 100% rename from packages/block-directory/src/components/discover-blocks-panel/style.scss rename to packages/block-directory/src/components/downloadable-blocks-panel/style.scss diff --git a/packages/block-directory/src/index.js b/packages/block-directory/src/index.js index 0d155012f1c8f9..5c088e8d5928d3 100644 --- a/packages/block-directory/src/index.js +++ b/packages/block-directory/src/index.js @@ -3,4 +3,4 @@ */ import './store'; -export { default as DiscoverBlocksPanel } from './components/discover-blocks-panel'; +export { default as DownloadableBlocksPanel } from './components/downloadable-blocks-panel'; diff --git a/packages/block-directory/src/store/actions.js b/packages/block-directory/src/store/actions.js index 8c7d0c2b5806c4..c167627b6d8316 100644 --- a/packages/block-directory/src/store/actions.js +++ b/packages/block-directory/src/store/actions.js @@ -13,7 +13,7 @@ import { dispatch, apiFetch, loadAssets } from './controls'; * * @return {Object} Action object. */ -export function fetchDiscoverBlocks() { +export function fetchDownloadableBlocks() { return { type: 'FETCH_DISCOVER_BLOCKS' }; } @@ -23,7 +23,7 @@ export function fetchDiscoverBlocks() { * * @return {Object} Action object. */ -export function receiveDiscoverBlocks( discoverBlocks, filterValue ) { +export function receiveDownloadableBlocks( discoverBlocks, filterValue ) { return { type: 'RECEIVE_DISCOVER_BLOCKS', discoverBlocks, filterValue }; } diff --git a/packages/block-directory/src/store/reducer.js b/packages/block-directory/src/store/reducer.js index 81a493d0bee885..aea55545b5f799 100644 --- a/packages/block-directory/src/store/reducer.js +++ b/packages/block-directory/src/store/reducer.js @@ -11,12 +11,12 @@ import { combineReducers } from '@wordpress/data'; * * @return {Object} Updated state. */ -export const discoverBlocks = ( state = { results: {}, hasPermission: undefined, filterValue: undefined, isRequestingDiscoverBlocks: true }, action ) => { +export const discoverBlocks = ( state = { results: {}, hasPermission: undefined, filterValue: undefined, isRequestingDownloadableBlocks: true }, action ) => { switch ( action.type ) { case 'FETCH_DISCOVER_BLOCKS' : return { ...state, - isRequestingDiscoverBlocks: true, + isRequestingDownloadableBlocks: true, }; case 'RECEIVE_DISCOVER_BLOCKS' : return { @@ -25,14 +25,14 @@ export const discoverBlocks = ( state = { results: {}, hasPermission: undefined, [ action.filterValue ]: action.discoverBlocks, } ), hasPermission: true, - isRequestingDiscoverBlocks: false, + isRequestingDownloadableBlocks: false, }; case 'SET_INSTALL_BLOCKS_PERMISSION' : return { ...state, items: action.hasPermission ? state.items : [], hasPermission: action.hasPermission, - isRequestingDiscoverBlocks: false, + isRequestingDownloadableBlocks: false, }; } return state; diff --git a/packages/block-directory/src/store/resolvers.js b/packages/block-directory/src/store/resolvers.js index a440b3325143a0..087c79f6e9c931 100644 --- a/packages/block-directory/src/store/resolvers.js +++ b/packages/block-directory/src/store/resolvers.js @@ -7,16 +7,16 @@ import { camelCase, mapKeys } from 'lodash'; * Internal dependencies */ import { apiFetch } from './controls'; -import { fetchDiscoverBlocks, receiveDiscoverBlocks, setInstallBlocksPermission } from './actions'; +import { fetchDownloadableBlocks, receiveDownloadableBlocks, setInstallBlocksPermission } from './actions'; export default { - * getDiscoverBlocks( filterValue ) { + * getDownloadableBlocks( filterValue ) { if ( ! filterValue ) { return; } try { - yield fetchDiscoverBlocks( filterValue ); + yield fetchDownloadableBlocks( filterValue ); const results = yield apiFetch( { path: `__experimental/blocks?search=${ filterValue }`, } ); @@ -24,7 +24,7 @@ export default { return camelCase( key ); } ) ); - yield receiveDiscoverBlocks( blocks, filterValue ); + yield receiveDownloadableBlocks( blocks, filterValue ); } catch ( error ) { if ( error.code === 'rest_user_cannot_view' ) { yield setInstallBlocksPermission( false ); diff --git a/packages/block-directory/src/store/selectors.js b/packages/block-directory/src/store/selectors.js index 9b88890ad70da8..b7c7e21b095622 100644 --- a/packages/block-directory/src/store/selectors.js +++ b/packages/block-directory/src/store/selectors.js @@ -10,8 +10,8 @@ import { get } from 'lodash'; * * @return {Array} Discoverable blocks */ -export function isRequestingDiscoverBlocks( state ) { - return state.discoverBlocks.isRequestingDiscoverBlocks; +export function isRequestingDownloadableBlocks( state ) { + return state.discoverBlocks.isRequestingDownloadableBlocks; } /** @@ -22,7 +22,7 @@ export function isRequestingDiscoverBlocks( state ) { * * @return {Array} Discoverable blocks */ -export function getDiscoverBlocks( state, filterValue ) { +export function getDownloadableBlocks( state, filterValue ) { if ( ! state.discoverBlocks.results[ filterValue ] ) { return []; } diff --git a/packages/block-directory/src/style.scss b/packages/block-directory/src/style.scss index b8138eb9f3737f..14f33e678ede45 100644 --- a/packages/block-directory/src/style.scss +++ b/packages/block-directory/src/style.scss @@ -1,7 +1,7 @@ -@import "./components/discover-block-header/style.scss"; -@import "./components/discover-block-info/style.scss"; -@import "./components/discover-block-author-info/style.scss"; -@import "./components/discover-block-list-item/style.scss"; -@import "./components/discover-blocks-list/style.scss"; -@import "./components/discover-blocks-panel/style.scss"; +@import "./components/downloadable-block-header/style.scss"; +@import "./components/downloadable-block-info/style.scss"; +@import "./components/downloadable-block-author-info/style.scss"; +@import "./components/downloadable-block-list-item/style.scss"; +@import "./components/downloadable-blocks-list/style.scss"; +@import "./components/downloadable-blocks-panel/style.scss"; @import "./components/block-ratings/style.scss"; diff --git a/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js b/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js index b3c04d59f4754e..5ac9c6c54569c7 100644 --- a/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js +++ b/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js @@ -7,7 +7,7 @@ import { debounce } from 'lodash'; * WordPress dependencies */ import { __experimentalInserterMenuExtension } from '@wordpress/block-editor'; -import { DiscoverBlocksPanel } from '@wordpress/block-directory'; +import { DownloadableBlocksPanel } from '@wordpress/block-directory'; import { useState } from '@wordpress/element'; function InserterMenuDownloadableBlocksPanel() { @@ -32,7 +32,7 @@ function InserterMenuDownloadableBlocksPanel() { } return ( - Date: Thu, 8 Aug 2019 10:05:27 +1200 Subject: [PATCH 078/122] Rename block-ratings to prefix with block-directory. --- .../block-directory/src/components/block-ratings/index.js | 4 ++-- .../block-directory/src/components/block-ratings/style.scss | 4 ++-- .../src/components/downloadable-block-header/style.scss | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-directory/src/components/block-ratings/index.js b/packages/block-directory/src/components/block-ratings/index.js index a1ebd7da89ebef..ff4b8111fc7d84 100644 --- a/packages/block-directory/src/components/block-ratings/index.js +++ b/packages/block-directory/src/components/block-ratings/index.js @@ -9,10 +9,10 @@ import { _n, sprintf } from '@wordpress/i18n'; import Stars from './stars'; export const BlockRatings = ( { rating, ratingCount } ) => ( -
          +
          div { line-height: 1; @@ -8,7 +8,7 @@ font-size: ms(-2); width: 1.1em; } - .block-editor-block-ratings__rating-count { + .block-directory-block-ratings__rating-count { color: $dark-gray-400; font-size: ms(-2); } diff --git a/packages/block-directory/src/components/downloadable-block-header/style.scss b/packages/block-directory/src/components/downloadable-block-header/style.scss index 6840b3cb113457..3855306bc7d7c4 100644 --- a/packages/block-directory/src/components/downloadable-block-header/style.scss +++ b/packages/block-directory/src/components/downloadable-block-header/style.scss @@ -22,7 +22,7 @@ font-weight: 600; margin-left: 12px; } - .block-editor-block-ratings { + .block-directory-block-ratings { margin-left: 12px; } } From 01be3e03e05d80eb6bdcb7fda3188633d15627aa Mon Sep 17 00:00:00 2001 From: CK Date: Thu, 8 Aug 2019 10:16:19 +1200 Subject: [PATCH 079/122] Rename rest controller to block directory. --- ...r.php => class-wp-rest-block-directory-controller.php} | 2 +- lib/load.php | 4 ++-- lib/rest-api.php | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) rename lib/{class-wp-rest-blocks-search-controller.php => class-wp-rest-block-directory-controller.php} (99%) diff --git a/lib/class-wp-rest-blocks-search-controller.php b/lib/class-wp-rest-block-directory-controller.php similarity index 99% rename from lib/class-wp-rest-blocks-search-controller.php rename to lib/class-wp-rest-block-directory-controller.php index e79ae6b4b886dd..32238d068d170a 100644 --- a/lib/class-wp-rest-blocks-search-controller.php +++ b/lib/class-wp-rest-block-directory-controller.php @@ -14,7 +14,7 @@ * * @see WP_REST_Controller */ -class WP_REST_Blocks_Search_Controller extends WP_REST_Controller { +class WP_REST_Block_Directory_Controller extends WP_REST_Controller { /** * Constructs the controller. diff --git a/lib/load.php b/lib/load.php index 7a9b3e7384d1ed..61ef46936831b6 100644 --- a/lib/load.php +++ b/lib/load.php @@ -26,8 +26,8 @@ * End: Include for phase 2 */ - if ( ! class_exists( 'WP_REST_Blocks_Search_Controller' ) ) { - require dirname( __FILE__ ) . '/class-wp-rest-blocks-search-controller.php'; + if ( ! class_exists( 'WP_REST_Block_Directory_Controller' ) ) { + require dirname( __FILE__ ) . '/class-wp-rest-block-directory-controller.php'; } require dirname( __FILE__ ) . '/rest-api.php'; diff --git a/lib/rest-api.php b/lib/rest-api.php index 91a34a78391361..48d3cf98e85851 100644 --- a/lib/rest-api.php +++ b/lib/rest-api.php @@ -83,8 +83,8 @@ function gutenberg_register_rest_widget_areas() { */ -function gutenberg_register_rest_blocks_search() { - $blocks_search_controller = new WP_REST_Blocks_Search_Controller(); - $blocks_search_controller->register_routes(); +function gutenberg_register_rest_block_directory() { + $block_directory_controller = new WP_REST_Block_Directory_Controller(); + $block_directory_controller->register_routes(); } -add_filter( 'rest_api_init', 'gutenberg_register_rest_blocks_search' ); +add_filter( 'rest_api_init', 'gutenberg_register_rest_block_directory' ); From 7021e2e6b0dc07c896967643f50a8154a056e258 Mon Sep 17 00:00:00 2001 From: CK Date: Thu, 8 Aug 2019 10:19:13 +1200 Subject: [PATCH 080/122] Limit the number of words in description. --- lib/class-wp-rest-block-directory-controller.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/class-wp-rest-block-directory-controller.php b/lib/class-wp-rest-block-directory-controller.php index 32238d068d170a..e08df1b7a1ae3b 100644 --- a/lib/class-wp-rest-block-directory-controller.php +++ b/lib/class-wp-rest-block-directory-controller.php @@ -215,7 +215,7 @@ function parse_block_metadata( $plugin ) { $block->title = reset( $plugin[ 'blocks' ] )[ 'title' ]; // AMBIGUOUS: Plugin's description, not description in block.json - $block->description = wp_strip_all_tags( $plugin[ 'description' ] ); + $block->description = wp_trim_words( wp_strip_all_tags( $plugin[ 'description' ] ), 30, '...' ); $block->rating = $plugin[ 'rating' ]; $block->rating_count = $plugin[ 'num_ratings' ]; From 56a790a22232960285c98b8ec8722df0e6e519fb Mon Sep 17 00:00:00 2001 From: CK Date: Thu, 8 Aug 2019 10:21:16 +1200 Subject: [PATCH 081/122] Update background color to design specs. --- .../src/components/downloadable-block-list-item/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-directory/src/components/downloadable-block-list-item/style.scss b/packages/block-directory/src/components/downloadable-block-list-item/style.scss index e862d0225ff7b6..87eeafbde50600 100644 --- a/packages/block-directory/src/components/downloadable-block-list-item/style.scss +++ b/packages/block-directory/src/components/downloadable-block-list-item/style.scss @@ -40,7 +40,7 @@ display: flex; flex-direction: column; padding: 12px; - background-color: $light-gray-500; + background-color: $light-gray-200; } .block-directory-downloadable-block-list-item__content { From 5df0ffc3df0c54cf28ddc5f04053eaff937a635d Mon Sep 17 00:00:00 2001 From: CK Date: Thu, 8 Aug 2019 16:33:31 +1200 Subject: [PATCH 082/122] Refactor to call loadAssets asynchronously. --- .../downloadable-blocks-list/index.js | 8 ++- packages/block-directory/src/store/actions.js | 52 +++++++++---------- .../block-directory/src/store/controls.js | 41 +++++++++------ 3 files changed, 56 insertions(+), 45 deletions(-) diff --git a/packages/block-directory/src/components/downloadable-blocks-list/index.js b/packages/block-directory/src/components/downloadable-blocks-list/index.js index 7506dbd7805e00..1cc5f90c0a9914 100644 --- a/packages/block-directory/src/components/downloadable-blocks-list/index.js +++ b/packages/block-directory/src/components/downloadable-blocks-list/index.js @@ -58,14 +58,18 @@ export default compose( //TODO: remove block and unregister block type from editor; }; + const retryDownloadIfFailed = ( item ) => { + removeNotice( 'block-preview-error' ); + handleDownloadableBlock( item, onSelect, retryDownloadIfFailed ); + }; + return { installBlock: ( slug ) => { installBlock( slug, retryIfFailed, removeIfFailed ); }, handleDownloadableBlock: ( item ) => { - handleDownloadableBlock( item, onSelect ); + handleDownloadableBlock( item, onSelect, retryDownloadIfFailed ); }, - removeNotice, }; } ), )( DownloadableBlocksList ); diff --git a/packages/block-directory/src/store/actions.js b/packages/block-directory/src/store/actions.js index c167627b6d8316..bea7122d07925e 100644 --- a/packages/block-directory/src/store/actions.js +++ b/packages/block-directory/src/store/actions.js @@ -41,39 +41,38 @@ export function setInstallBlocksPermission( hasPermission ) { * * @param {Object} item The selected block item * @param {Function} onSelect The callback function when the assets are loaded. + * @param {Function} retry The callback function when the user clicks retry on error notice. */ -export function* handleDownloadableBlock( item, onSelect ) { - const { - createErrorNotice, - removeNotice, - } = dispatch( 'core/notices' ); - - let scriptsCount = 0; +export function* handleDownloadableBlock( item, onSelect, retry ) { const onLoad = () => { - scriptsCount--; - if ( scriptsCount > 0 ) { - return; - } const registeredBlocks = getBlockTypes(); if ( registeredBlocks.length ) { onSelect( item ); } }; - const onError = () => { - createErrorNotice( __( 'Block previews can\'t load.' ), { - id: 'block-preview-error', - actions: [ - { - label: __( 'Retry' ), - onClick: () => { - removeNotice( 'block-preview-error' ); - scriptsCount = loadAssets( item.assets, onLoad, onError ); + function* onError() { + yield dispatch( + 'core/notices', + 'createErrorNotice', + __( 'Block previews can\'t load.' ), + { + id: 'block-preview-error', + actions: [ + { + label: __( 'Retry' ), + onClick: () => { + retry( item ); + }, }, - }, - ], - } ); - }; - scriptsCount = yield loadAssets( item.assets, onLoad, onError ); + ], + } ); + } + try { + yield loadAssets( item.assets ); + onLoad(); + } catch { + yield onError(); + } } /** Action triggered to install a block plugin @@ -99,7 +98,8 @@ export function* installBlock( slug, retry, remove ) { 'core/notices', 'createErrorNotice', __( 'Block previews can\'t install.' ), - { id: 'block-install-error', + { + id: 'block-install-error', actions: [ { label: 'Retry', diff --git a/packages/block-directory/src/store/controls.js b/packages/block-directory/src/store/controls.js index 0ff3d66f70c296..a0dfb751d91891 100644 --- a/packages/block-directory/src/store/controls.js +++ b/packages/block-directory/src/store/controls.js @@ -119,23 +119,30 @@ const controls = { API_FETCH( { request } ) { return wpApiFetch( { ... request } ); }, - LOAD_ASSETS( { assets, onLoad, onError } ) { - let scriptsCount = 0; - if ( typeof assets === 'object' && assets.constructor === Array ) { - forEach( assets, ( asset ) => { - if ( asset.match( /\.js$/ ) !== null ) { - scriptsCount++; - loadScript( asset, onLoad, onError ); - } else { - loadStyle( asset ); - } - } ); - } else { - scriptsCount++; - loadScript( assets.editor_script, onLoad, onError ); - loadStyle( assets.style ); - } - return scriptsCount; + LOAD_ASSETS( { assets } ) { + return new Promise( ( resolve, reject ) => { + if ( typeof assets === 'object' && assets.constructor === Array ) { + let scriptsCount = 0; + forEach( assets, ( asset ) => { + if ( asset.match( /\.js$/ ) !== null ) { + scriptsCount++; + loadScript( asset, () => { + scriptsCount--; + if ( scriptsCount === 0 ) { + return resolve( scriptsCount ); + } + }, reject ); + } else { + loadStyle( asset ); + } + } ); + } else { + loadScript( assets.editor_script, () => { + return resolve( 0 ); + }, reject ); + loadStyle( assets.style ); + } + } ); }, }; From e25c6c6efa30df331590c2b9a302d2108ac58a2b Mon Sep 17 00:00:00 2001 From: CK Date: Thu, 8 Aug 2019 17:09:25 +1200 Subject: [PATCH 083/122] Refactor downloadBlock and installBlock to be more extensible. --- .../downloadable-blocks-list/index.js | 78 ++++++++++++++----- packages/block-directory/src/store/actions.js | 75 +++++------------- 2 files changed, 75 insertions(+), 78 deletions(-) diff --git a/packages/block-directory/src/components/downloadable-blocks-list/index.js b/packages/block-directory/src/components/downloadable-blocks-list/index.js index 1cc5f90c0a9914..bc8134cee4d6a1 100644 --- a/packages/block-directory/src/components/downloadable-blocks-list/index.js +++ b/packages/block-directory/src/components/downloadable-blocks-list/index.js @@ -4,12 +4,16 @@ import { getBlockMenuDefaultClassName } from '@wordpress/blocks'; import { withDispatch } from '@wordpress/data'; import { compose } from '@wordpress/compose'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ import DownloadableBlockListItem from '../downloadable-block-list-item'; +const DOWNLOAD_ERROR_NOTICE_ID = 'block-download-error'; +const INSTALL_ERROR_NOTICE_ID = 'block-install-error'; + function DownloadableBlocksList( { items, onHover = () => {}, children, handleDownloadableBlock, installBlock } ) { return ( /* @@ -44,31 +48,63 @@ function DownloadableBlocksList( { items, onHover = () => {}, children, handleDo export default compose( withDispatch( ( ownDispatch, props ) => { - const { installBlock, handleDownloadableBlock } = ownDispatch( 'core/block-directory' ); - const { removeNotice } = ownDispatch( 'core/notices' ); + const { installBlock, downloadBlock } = ownDispatch( 'core/block-directory' ); + const { createErrorNotice, removeNotice } = ownDispatch( 'core/notices' ); const { onSelect } = props; - - const retryIfFailed = ( slug ) => { - removeNotice( 'block-install-error' ); - installBlock( slug, retryIfFailed, removeIfFailed ); - }; - - const removeIfFailed = () => { - removeNotice( 'block-install-error' ); - //TODO: remove block and unregister block type from editor; - }; - - const retryDownloadIfFailed = ( item ) => { - removeNotice( 'block-preview-error' ); - handleDownloadableBlock( item, onSelect, retryDownloadIfFailed ); - }; - return { installBlock: ( slug ) => { - installBlock( slug, retryIfFailed, removeIfFailed ); + const retryIfFailed = () => { + removeNotice( INSTALL_ERROR_NOTICE_ID ); + installBlock( slug, retryIfFailed, removeIfFailed ); + }; + + const removeIfFailed = () => { + removeNotice( INSTALL_ERROR_NOTICE_ID ); + //TODO: remove block and unregister block type from editor; + }; + + const onError = () => { + createErrorNotice( + __( 'Block previews can\'t install.' ), + { + id: INSTALL_ERROR_NOTICE_ID, + actions: [ + { + label: __( 'Retry' ), + onClick: () => { + retryIfFailed(); + }, + }, + { + label: __( 'Remove' ), + onClick: () => { + removeIfFailed(); + }, + }, + ], + } + ); + }; + installBlock( slug, () => {}, onError ); }, - handleDownloadableBlock: ( item ) => { - handleDownloadableBlock( item, onSelect, retryDownloadIfFailed ); + downloadBlock: ( item ) => { + const onError = () => { + createErrorNotice( + __( 'Block previews can\'t load.' ), + { + id: DOWNLOAD_ERROR_NOTICE_ID, + actions: [ + { + label: __( 'Retry' ), + onClick: () => { + removeNotice( DOWNLOAD_ERROR_NOTICE_ID ); + downloadBlock( item, onSelect, onError ); + }, + }, + ], + } ); + }; + downloadBlock( item, onSelect, onError ); }, }; } ), diff --git a/packages/block-directory/src/store/actions.js b/packages/block-directory/src/store/actions.js index bea7122d07925e..318bef393fe680 100644 --- a/packages/block-directory/src/store/actions.js +++ b/packages/block-directory/src/store/actions.js @@ -1,13 +1,12 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { getBlockTypes } from '@wordpress/blocks'; /** * Internal dependencies */ -import { dispatch, apiFetch, loadAssets } from './controls'; +import { apiFetch, loadAssets } from './controls'; /** Returns an action object used in signalling that the discover blocks have been requested and is loading. * @@ -37,51 +36,33 @@ export function setInstallBlocksPermission( hasPermission ) { } /** - * Action triggered to load assets for a downloadable block. + * Action triggered to download block assets. * * @param {Object} item The selected block item - * @param {Function} onSelect The callback function when the assets are loaded. - * @param {Function} retry The callback function when the user clicks retry on error notice. + * @param {Function} onSuccess The callback function when the action has succeeded. + * @param {Function} onError The callback function when the action has failed. */ -export function* handleDownloadableBlock( item, onSelect, retry ) { - const onLoad = () => { +export function* downloadBlock( item, onSuccess, onError ) { + try { + yield loadAssets( item.assets ); const registeredBlocks = getBlockTypes(); if ( registeredBlocks.length ) { - onSelect( item ); + onSuccess( item ); + } else { + throw new Error( 'Unable to get block types' ); } - }; - function* onError() { - yield dispatch( - 'core/notices', - 'createErrorNotice', - __( 'Block previews can\'t load.' ), - { - id: 'block-preview-error', - actions: [ - { - label: __( 'Retry' ), - onClick: () => { - retry( item ); - }, - }, - ], - } ); - } - try { - yield loadAssets( item.assets ); - onLoad(); - } catch { - yield onError(); + } catch ( error ) { + yield onError( error ); } } -/** Action triggered to install a block plugin +/** Action triggered to install a block plugin. * @param {string} slug The plugin slug for block. -* @param {function} retry The callback function when user clicks Retry button on error notice. -* @param {function} remove The callback function when user clicks Remove button on error notice. +* @param {Function} onSuccess The callback function when the action has succeeded. +* @param {Function} onError The callback function when the action has failed. * */ -export function* installBlock( slug, retry, remove ) { +export function* installBlock( slug, onSuccess, onError ) { try { const response = yield apiFetch( { path: '__experimental/blocks/install', @@ -93,28 +74,8 @@ export function* installBlock( slug, retry, remove ) { if ( response.success === false ) { throw new Error( response.errorMessage ); } + onSuccess(); } catch ( error ) { - yield dispatch( - 'core/notices', - 'createErrorNotice', - __( 'Block previews can\'t install.' ), - { - id: 'block-install-error', - actions: [ - { - label: 'Retry', - onClick: () => { - retry(); - }, - }, - { - label: 'Remove', - onClick: () => { - remove(); - }, - }, - ], - } - ); + onError( error ); } } From 0d137f3f230b54ae747e5f61b0f24bf1c0ff0b6b Mon Sep 17 00:00:00 2001 From: CK Date: Fri, 9 Aug 2019 09:59:50 +1200 Subject: [PATCH 084/122] Rename handleDownloadableBlock to downloadBlock --- .../src/components/downloadable-blocks-list/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-directory/src/components/downloadable-blocks-list/index.js b/packages/block-directory/src/components/downloadable-blocks-list/index.js index bc8134cee4d6a1..1db70095ffc894 100644 --- a/packages/block-directory/src/components/downloadable-blocks-list/index.js +++ b/packages/block-directory/src/components/downloadable-blocks-list/index.js @@ -14,7 +14,7 @@ import DownloadableBlockListItem from '../downloadable-block-list-item'; const DOWNLOAD_ERROR_NOTICE_ID = 'block-download-error'; const INSTALL_ERROR_NOTICE_ID = 'block-install-error'; -function DownloadableBlocksList( { items, onHover = () => {}, children, handleDownloadableBlock, installBlock } ) { +function DownloadableBlocksList( { items, onHover = () => {}, children, downloadBlock, installBlock } ) { return ( /* * Disable reason: The `list` ARIA role is redundant but @@ -28,7 +28,7 @@ function DownloadableBlocksList( { items, onHover = () => {}, children, handleDo className={ getBlockMenuDefaultClassName( item.id ) } icons={ item.icons } onClick={ () => { - handleDownloadableBlock( item ); + downloadBlock( item ); installBlock( item.id ); onHover( null ); } } From fde3dca9b7d33cd7f9a14c3dcb389d90c3e3e483 Mon Sep 17 00:00:00 2001 From: CK Date: Fri, 9 Aug 2019 10:46:10 +1200 Subject: [PATCH 085/122] Handle if FS_METHOD is not direct. --- lib/class-wp-rest-block-directory-controller.php | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/class-wp-rest-block-directory-controller.php b/lib/class-wp-rest-block-directory-controller.php index e08df1b7a1ae3b..9a7685e211d6a5 100644 --- a/lib/class-wp-rest-block-directory-controller.php +++ b/lib/class-wp-rest-block-directory-controller.php @@ -110,7 +110,12 @@ public function install_block( $request ) { $skin = new WP_Ajax_Upgrader_Skin(); $upgrader = new Plugin_Upgrader( $skin ); - //TODO: Handle if FS_METHOD is not direct. file.php is trying to display FTP credentials modal dialog as part of the request, causing malformed JSON. + $filesystem_method = get_filesystem_method(); + + if ( $filesystem_method !== 'direct' ) { + return WP_Error( null, 'Only direct FS_METHOD is supported.' ); + } + $result = $upgrader->install( $api->download_link ); if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) { From c2705403b0f4e7f674f4b88b5d5c994c78e06dc0 Mon Sep 17 00:00:00 2001 From: CK Date: Fri, 9 Aug 2019 10:52:53 +1200 Subject: [PATCH 086/122] Fix retry of installing block. --- .../src/components/downloadable-blocks-list/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-directory/src/components/downloadable-blocks-list/index.js b/packages/block-directory/src/components/downloadable-blocks-list/index.js index 1db70095ffc894..f501a6187b95b1 100644 --- a/packages/block-directory/src/components/downloadable-blocks-list/index.js +++ b/packages/block-directory/src/components/downloadable-blocks-list/index.js @@ -55,7 +55,7 @@ export default compose( installBlock: ( slug ) => { const retryIfFailed = () => { removeNotice( INSTALL_ERROR_NOTICE_ID ); - installBlock( slug, retryIfFailed, removeIfFailed ); + installBlock( slug, () => {}, onError ); }; const removeIfFailed = () => { From 35444948919c848b60dda256e85e378c2653db1d Mon Sep 17 00:00:00 2001 From: CK Date: Fri, 9 Aug 2019 11:03:38 +1200 Subject: [PATCH 087/122] Only install block after download is successful. Add error handling of block has no assets in the metadata. --- .../downloadable-blocks-list/index.js | 63 +++++++++---------- packages/block-directory/src/store/actions.js | 4 ++ 2 files changed, 32 insertions(+), 35 deletions(-) diff --git a/packages/block-directory/src/components/downloadable-blocks-list/index.js b/packages/block-directory/src/components/downloadable-blocks-list/index.js index f501a6187b95b1..ff28df11f0bb74 100644 --- a/packages/block-directory/src/components/downloadable-blocks-list/index.js +++ b/packages/block-directory/src/components/downloadable-blocks-list/index.js @@ -14,7 +14,7 @@ import DownloadableBlockListItem from '../downloadable-block-list-item'; const DOWNLOAD_ERROR_NOTICE_ID = 'block-download-error'; const INSTALL_ERROR_NOTICE_ID = 'block-install-error'; -function DownloadableBlocksList( { items, onHover = () => {}, children, downloadBlock, installBlock } ) { +function DownloadableBlocksList( { items, onHover = () => {}, children, downloadAndInstallBlock } ) { return ( /* * Disable reason: The `list` ARIA role is redundant but @@ -28,8 +28,7 @@ function DownloadableBlocksList( { items, onHover = () => {}, children, download className={ getBlockMenuDefaultClassName( item.id ) } icons={ item.icons } onClick={ () => { - downloadBlock( item ); - installBlock( item.id ); + downloadAndInstallBlock( item ); onHover( null ); } } onFocus={ () => onHover( item ) } @@ -51,19 +50,27 @@ export default compose( const { installBlock, downloadBlock } = ownDispatch( 'core/block-directory' ); const { createErrorNotice, removeNotice } = ownDispatch( 'core/notices' ); const { onSelect } = props; - return { - installBlock: ( slug ) => { - const retryIfFailed = () => { - removeNotice( INSTALL_ERROR_NOTICE_ID ); - installBlock( slug, () => {}, onError ); - }; - const removeIfFailed = () => { - removeNotice( INSTALL_ERROR_NOTICE_ID ); - //TODO: remove block and unregister block type from editor; + return { + downloadAndInstallBlock: ( item ) => { + const onDownloadError = () => { + createErrorNotice( + __( 'Block previews can\'t load.' ), + { + id: DOWNLOAD_ERROR_NOTICE_ID, + actions: [ + { + label: __( 'Retry' ), + onClick: () => { + removeNotice( DOWNLOAD_ERROR_NOTICE_ID ); + downloadBlock( item, onSelect, onDownloadError ); + }, + }, + ], + } ); }; - const onError = () => { + const onInstallBlockError = () => { createErrorNotice( __( 'Block previews can\'t install.' ), { @@ -72,39 +79,25 @@ export default compose( { label: __( 'Retry' ), onClick: () => { - retryIfFailed(); + removeNotice( INSTALL_ERROR_NOTICE_ID ); + installBlock( item.id, () => {}, onInstallBlockError ); }, }, { label: __( 'Remove' ), onClick: () => { - removeIfFailed(); + removeNotice( INSTALL_ERROR_NOTICE_ID ); }, }, ], } ); }; - installBlock( slug, () => {}, onError ); - }, - downloadBlock: ( item ) => { - const onError = () => { - createErrorNotice( - __( 'Block previews can\'t load.' ), - { - id: DOWNLOAD_ERROR_NOTICE_ID, - actions: [ - { - label: __( 'Retry' ), - onClick: () => { - removeNotice( DOWNLOAD_ERROR_NOTICE_ID ); - downloadBlock( item, onSelect, onError ); - }, - }, - ], - } ); - }; - downloadBlock( item, onSelect, onError ); + + downloadBlock( item, () => { + onSelect(); + installBlock( item.id, () => {}, onInstallBlockError ); + }, onDownloadError ); }, }; } ), diff --git a/packages/block-directory/src/store/actions.js b/packages/block-directory/src/store/actions.js index 318bef393fe680..bd993df4089be5 100644 --- a/packages/block-directory/src/store/actions.js +++ b/packages/block-directory/src/store/actions.js @@ -44,6 +44,10 @@ export function setInstallBlocksPermission( hasPermission ) { */ export function* downloadBlock( item, onSuccess, onError ) { try { + if ( ! item.assets.length ) { + throw new Error( 'Block has no assets' ); + } + yield loadAssets( item.assets ); const registeredBlocks = getBlockTypes(); if ( registeredBlocks.length ) { From ed1bcb536633f35dd43a1c2042cac372bdf93e13 Mon Sep 17 00:00:00 2001 From: CK Date: Fri, 9 Aug 2019 11:22:15 +1200 Subject: [PATCH 088/122] Fix onSelect of item on success. --- .../downloadable-blocks-list/index.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/block-directory/src/components/downloadable-blocks-list/index.js b/packages/block-directory/src/components/downloadable-blocks-list/index.js index ff28df11f0bb74..59efa31f004713 100644 --- a/packages/block-directory/src/components/downloadable-blocks-list/index.js +++ b/packages/block-directory/src/components/downloadable-blocks-list/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import { noop } from 'lodash'; + /** * WordPress dependencies */ @@ -80,7 +85,7 @@ export default compose( label: __( 'Retry' ), onClick: () => { removeNotice( INSTALL_ERROR_NOTICE_ID ); - installBlock( item.id, () => {}, onInstallBlockError ); + installBlock( item.id, noop, onInstallBlockError ); }, }, { @@ -94,10 +99,12 @@ export default compose( ); }; - downloadBlock( item, () => { - onSelect(); - installBlock( item.id, () => {}, onInstallBlockError ); - }, onDownloadError ); + const onSuccess = () => { + onSelect( item ); + installBlock( item.id, noop, onInstallBlockError ); + }; + + downloadBlock( item, onSuccess, onDownloadError ); }, }; } ), From 36dd5a370ff502ffa996a0257c54753b57d7b95d Mon Sep 17 00:00:00 2001 From: CK Date: Fri, 9 Aug 2019 13:48:26 +1200 Subject: [PATCH 089/122] Remove block if failed to install block. --- .../downloadable-blocks-list/index.js | 60 ++++++++++--------- .../src/components/inserter/menu.js | 1 + 2 files changed, 33 insertions(+), 28 deletions(-) diff --git a/packages/block-directory/src/components/downloadable-blocks-list/index.js b/packages/block-directory/src/components/downloadable-blocks-list/index.js index 59efa31f004713..19ae34d5c2ef8c 100644 --- a/packages/block-directory/src/components/downloadable-blocks-list/index.js +++ b/packages/block-directory/src/components/downloadable-blocks-list/index.js @@ -6,7 +6,7 @@ import { noop } from 'lodash'; /** * WordPress dependencies */ -import { getBlockMenuDefaultClassName } from '@wordpress/blocks'; +import { getBlockMenuDefaultClassName, unregisterBlockType } from '@wordpress/blocks'; import { withDispatch } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; @@ -51,9 +51,10 @@ function DownloadableBlocksList( { items, onHover = () => {}, children, download } export default compose( - withDispatch( ( ownDispatch, props ) => { - const { installBlock, downloadBlock } = ownDispatch( 'core/block-directory' ); - const { createErrorNotice, removeNotice } = ownDispatch( 'core/notices' ); + withDispatch( ( dispatch, props ) => { + const { installBlock, downloadBlock } = dispatch( 'core/block-directory' ); + const { createErrorNotice, removeNotice } = dispatch( 'core/notices' ); + const { removeBlocks } = dispatch( 'core/block-editor' ); const { onSelect } = props; return { @@ -68,39 +69,42 @@ export default compose( label: __( 'Retry' ), onClick: () => { removeNotice( DOWNLOAD_ERROR_NOTICE_ID ); - downloadBlock( item, onSelect, onDownloadError ); + downloadBlock( item, onSuccess, onDownloadError ); }, }, ], } ); }; - const onInstallBlockError = () => { - createErrorNotice( - __( 'Block previews can\'t install.' ), - { - id: INSTALL_ERROR_NOTICE_ID, - actions: [ - { - label: __( 'Retry' ), - onClick: () => { - removeNotice( INSTALL_ERROR_NOTICE_ID ); - installBlock( item.id, noop, onInstallBlockError ); + const onSuccess = () => { + const createdBlock = onSelect( item ); + + const onInstallBlockError = () => { + createErrorNotice( + __( 'Block previews can\'t install.' ), + { + id: INSTALL_ERROR_NOTICE_ID, + actions: [ + { + label: __( 'Retry' ), + onClick: () => { + removeNotice( INSTALL_ERROR_NOTICE_ID ); + installBlock( item.id, noop, onInstallBlockError ); + }, }, - }, - { - label: __( 'Remove' ), - onClick: () => { - removeNotice( INSTALL_ERROR_NOTICE_ID ); + { + label: __( 'Remove' ), + onClick: () => { + removeNotice( INSTALL_ERROR_NOTICE_ID ); + removeBlocks( createdBlock.clientId ); + unregisterBlockType( item.name ); + }, }, - }, - ], - } - ); - }; + ], + } + ); + }; - const onSuccess = () => { - onSelect( item ); installBlock( item.id, noop, onInstallBlockError ); }; diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 23ab884796596a..e87c13d876ab62 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -475,6 +475,7 @@ export default compose( } ownProps.onSelect(); + return insertedBlock; }, }; } ), From df46fdc18a8253d0d02b55fd14509f5b67fff381 Mon Sep 17 00:00:00 2001 From: CK Date: Fri, 9 Aug 2019 14:12:21 +1200 Subject: [PATCH 090/122] Update documentation. --- .../developers/data/data-core-block-editor.md | 2 +- package-lock.json | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md index 2ba99f73210ca9..6c86b219dfc2a1 100644 --- a/docs/designers-developers/developers/data/data-core-block-editor.md +++ b/docs/designers-developers/developers/data/data-core-block-editor.md @@ -337,7 +337,7 @@ _Returns_ # **getIsDownloadableBlocksEnabled** -Returns true if the block editor can search and install uninstalled blocks. +Returns whether block editor can search and install uninstalled blocks. _Parameters_ diff --git a/package-lock.json b/package-lock.json index 2411a6d44af3a1..0588e58a634b87 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4602,6 +4602,12 @@ "@babel/runtime": "^7.4.4" } }, + "@wordpress/block-directory": { + "version": "file:packages/block-directory", + "requires": { + "@wordpress/components": "file:packages/components" + } + }, "@wordpress/block-editor": { "version": "file:packages/block-editor", "requires": { @@ -4834,12 +4840,6 @@ "@babel/runtime": "^7.4.4" } }, - "@wordpress/downloadable-blocks": { - "version": "file:packages/downloadable-blocks", - "requires": { - "@wordpress/components": "file:packages/components" - } - }, "@wordpress/e2e-test-utils": { "version": "file:packages/e2e-test-utils", "dev": true, @@ -4907,6 +4907,7 @@ "@babel/runtime": "^7.4.4", "@wordpress/api-fetch": "file:packages/api-fetch", "@wordpress/blob": "file:packages/blob", + "@wordpress/block-directory": "file:packages/block-directory", "@wordpress/block-editor": "file:packages/block-editor", "@wordpress/blocks": "file:packages/blocks", "@wordpress/components": "file:packages/components", @@ -4916,7 +4917,6 @@ "@wordpress/data-controls": "file:packages/data-controls", "@wordpress/date": "file:packages/date", "@wordpress/deprecated": "file:packages/deprecated", - "@wordpress/downloadable-blocks": "file:packages/downloadable-blocks", "@wordpress/element": "file:packages/element", "@wordpress/hooks": "file:packages/hooks", "@wordpress/html-entities": "file:packages/html-entities", From e90876fa54dd36738c261e9043caadc42f11ca93 Mon Sep 17 00:00:00 2001 From: CK Date: Fri, 9 Aug 2019 20:34:32 +1200 Subject: [PATCH 091/122] Check for permission before fetch. --- .../downloadable-blocks-panel/index.js | 16 ++++++++-------- packages/block-directory/src/store/resolvers.js | 12 ++++++++++++ 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/packages/block-directory/src/components/downloadable-blocks-panel/index.js b/packages/block-directory/src/components/downloadable-blocks-panel/index.js index 3001acdcfd2547..e361da72e70b50 100644 --- a/packages/block-directory/src/components/downloadable-blocks-panel/index.js +++ b/packages/block-directory/src/components/downloadable-blocks-panel/index.js @@ -13,20 +13,20 @@ import { Spinner } from '@wordpress/components'; import DownloadableBlocksList from '../downloadable-blocks-list'; function DownloadableBlocksPanel( { discoverItems, onSelect, onHover, hasPermission, isLoading } ) { - if ( isLoading ) { + if ( ! hasPermission ) { return (

          - + { __( 'No blocks found in your library.' ) } +
          + { __( 'Please contact your site administrator to install new blocks.' ) }

          ); } - if ( ! hasPermission ) { + if ( isLoading ) { return (

          - { __( 'No blocks found in your library.' ) } -
          - { __( 'Please contact your site administrator to install new blocks.' ) } +

          ); } @@ -57,9 +57,9 @@ export default compose( [ isRequestingDownloadableBlocks, } = select( 'core/block-directory' ); - const discoverItems = getDownloadableBlocks( filterValue ); const hasPermission = hasInstallBlocksPermission(); - const isLoading = isRequestingDownloadableBlocks(); + const discoverItems = hasPermission ? getDownloadableBlocks( filterValue ) : []; + const isLoading = hasPermission ? isRequestingDownloadableBlocks() : false; return { discoverItems, diff --git a/packages/block-directory/src/store/resolvers.js b/packages/block-directory/src/store/resolvers.js index 087c79f6e9c931..70479187f12857 100644 --- a/packages/block-directory/src/store/resolvers.js +++ b/packages/block-directory/src/store/resolvers.js @@ -31,4 +31,16 @@ export default { } } }, + * hasInstallBlocksPermission() { + try { + yield apiFetch( { + path: `__experimental/blocks?search=${ '' }`, + } ); + yield setInstallBlocksPermission( true ); + } catch ( error ) { + if ( error.code === 'rest_user_cannot_view' ) { + yield setInstallBlocksPermission( false ); + } + } + }, }; From 765571be2d7b8089099e5e30ab5772a2f09b5b18 Mon Sep 17 00:00:00 2001 From: CK Date: Fri, 9 Aug 2019 21:30:25 +1200 Subject: [PATCH 092/122] Fix unit test --- packages/block-editor/src/components/inserter/test/menu.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/inserter/test/menu.js b/packages/block-editor/src/components/inserter/test/menu.js index 4e77ef50df7cd2..ef9d2b10214a98 100644 --- a/packages/block-editor/src/components/inserter/test/menu.js +++ b/packages/block-editor/src/components/inserter/test/menu.js @@ -124,9 +124,9 @@ const initializeAllClosedMenuStateAndReturnElement = ( propOverrides ) => { const assertNoResultsMessageToBePresent = ( element ) => { const noResultsMessage = element.querySelector( - '.block-directory-downloadable-blocks-panel__description.has-no-results' + '.block-editor-inserter__no-results' ); - expect( noResultsMessage.textContent ).toContain( 'No blocks found' ); + expect( noResultsMessage.textContent ).toEqual( 'No blocks found.' ); }; const assertNoResultsMessageNotToBePresent = ( element ) => { From c0d17388dfde99e2d05d60070305acf2256470f8 Mon Sep 17 00:00:00 2001 From: CK Date: Mon, 12 Aug 2019 14:43:58 +1200 Subject: [PATCH 093/122] Uninstall new blocks if user has removed them. --- ...ass-wp-rest-block-directory-controller.php | 55 ++++++++++- .../downloadable-blocks-list/index.js | 4 +- packages/block-directory/src/store/actions.js | 91 ++++++++++++++++--- packages/block-directory/src/store/reducer.js | 19 +++- .../block-directory/src/store/selectors.js | 11 +++ .../editor/src/components/provider/index.js | 23 ++++- 6 files changed, 182 insertions(+), 21 deletions(-) diff --git a/lib/class-wp-rest-block-directory-controller.php b/lib/class-wp-rest-block-directory-controller.php index 9a7685e211d6a5..b3f5eed44d43d4 100644 --- a/lib/class-wp-rest-block-directory-controller.php +++ b/lib/class-wp-rest-block-directory-controller.php @@ -56,6 +56,18 @@ public function register_routes() { 'schema' => array( $this, 'get_item_schema' ), ) ); + register_rest_route( + $this->namespace, + '/' . $this->rest_base . '/uninstall', + array( + array( + 'methods' => WP_REST_Server::DELETABLE, + 'callback' => array( $this, 'uninstall_block' ), + 'permission_callback' => array( $this, 'get_items_permissions_check' ), + ), + 'schema' => array( $this, 'get_item_schema' ), + ) + ); } /** @@ -78,7 +90,7 @@ public function get_items_permissions_check( $request ) { } /** - * Install and activate a plugin + * Installs and activates a plugin * * @since 5.7.0 * @@ -105,7 +117,6 @@ public function install_block( $request ) { if ( is_wp_error( $api ) ) { return WP_Error( $api->get_error_code(), $api->get_error_message() ); } - $status['pluginName'] = $api->name; $skin = new WP_Ajax_Upgrader_Skin(); $upgrader = new Plugin_Upgrader( $skin ); @@ -119,7 +130,7 @@ public function install_block( $request ) { $result = $upgrader->install( $api->download_link ); if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) { - $status['debug'] = $skin->get_upgrade_messages(); + $status[ 'debug' ] = $skin->get_upgrade_messages(); } if ( is_wp_error( $result ) ) { @@ -150,6 +161,44 @@ public function install_block( $request ) { return rest_ensure_response( $status ); } + /** + * Deactivates and deletes a plugin + * + * @since 5.7.0 + * + * @param WP_REST_Request $request Full details about the request. + * @return WP_Error|WP_REST_Response Response object on success, or WP_Error object on failure. + */ + public function uninstall_block( $request ) { + + include_once( ABSPATH . 'wp-admin/includes/file.php' ); + include_once( ABSPATH . 'wp-admin/includes/plugin.php' ); + include_once( ABSPATH . 'wp-admin/includes/class-wp-upgrader.php' ); + include_once( ABSPATH . 'wp-admin/includes/plugin-install.php' ); + + $api = plugins_api( + 'plugin_information', + array( + 'slug' => $request->get_param( 'slug' ), + 'fields' => array( + 'sections' => false, + ), + ) + ); + + if ( is_wp_error( $api ) ) { + return WP_Error( $api->get_error_code(), $api->get_error_message() ); + } + + $install_status = install_plugin_install_status( $api ); + + deactivate_plugins( $install_status['file'] ); + + delete_plugins( array( $install_status['file'] ) ); + + return rest_ensure_response( $api ); + } + /** * Search and retrieve blocks metadata * diff --git a/packages/block-directory/src/components/downloadable-blocks-list/index.js b/packages/block-directory/src/components/downloadable-blocks-list/index.js index 19ae34d5c2ef8c..557ca54c857090 100644 --- a/packages/block-directory/src/components/downloadable-blocks-list/index.js +++ b/packages/block-directory/src/components/downloadable-blocks-list/index.js @@ -89,7 +89,7 @@ export default compose( label: __( 'Retry' ), onClick: () => { removeNotice( INSTALL_ERROR_NOTICE_ID ); - installBlock( item.id, noop, onInstallBlockError ); + installBlock( item, noop, onInstallBlockError ); }, }, { @@ -105,7 +105,7 @@ export default compose( ); }; - installBlock( item.id, noop, onInstallBlockError ); + installBlock( item, noop, onInstallBlockError ); }; downloadBlock( item, onSuccess, onDownloadError ); diff --git a/packages/block-directory/src/store/actions.js b/packages/block-directory/src/store/actions.js index bd993df4089be5..7aab27fc6c67a3 100644 --- a/packages/block-directory/src/store/actions.js +++ b/packages/block-directory/src/store/actions.js @@ -8,7 +8,8 @@ import { getBlockTypes } from '@wordpress/blocks'; */ import { apiFetch, loadAssets } from './controls'; -/** Returns an action object used in signalling that the discover blocks have been requested and is loading. +/** + * Returns an action object used in signalling that the discover blocks have been requested and is loading. * * @return {Object} Action object. */ @@ -16,7 +17,9 @@ export function fetchDownloadableBlocks() { return { type: 'FETCH_DISCOVER_BLOCKS' }; } -/** Returns an action object used in signalling that the discover blocks have been updated. +/** + * Returns an action object used in signalling that the discover blocks have been updated. + * * @param {Array} discoverBlocks Discoverable blocks. * @param {string} filterValue Search string. * @@ -26,11 +29,13 @@ export function receiveDownloadableBlocks( discoverBlocks, filterValue ) { return { type: 'RECEIVE_DISCOVER_BLOCKS', discoverBlocks, filterValue }; } -/** Returns an action object used in signalling that the user does not have permission to install blocks. -* @param {boolean} hasPermission User has permission to install blocks. -* -* @return {Object} Action object. -*/ +/** + * Returns an action object used in signalling that the user does not have permission to install blocks. + * + @param {boolean} hasPermission User has permission to install blocks. + * + * @return {Object} Action object. + */ export function setInstallBlocksPermission( hasPermission ) { return { type: 'SET_INSTALL_BLOCKS_PERMISSION', hasPermission }; } @@ -60,26 +65,84 @@ export function* downloadBlock( item, onSuccess, onError ) { } } -/** Action triggered to install a block plugin. -* @param {string} slug The plugin slug for block. -* @param {Function} onSuccess The callback function when the action has succeeded. -* @param {Function} onError The callback function when the action has failed. -* +/** + * Action triggered to install a block plugin. + * + * @param {string} item The block item returned by search. + * @param {Function} onSuccess The callback function when the action has succeeded. + * @param {Function} onError The callback function when the action has failed. + * */ -export function* installBlock( slug, onSuccess, onError ) { +export function* installBlock( { id, name }, onSuccess, onError ) { try { const response = yield apiFetch( { path: '__experimental/blocks/install', data: { - slug, + slug: id, }, method: 'POST', } ); if ( response.success === false ) { throw new Error( response.errorMessage ); } + yield addInstalledBlockType( { id, name } ); onSuccess(); } catch ( error ) { onError( error ); } } + +/** + * Action triggered to uninstall a block plugin. + * + * @param {string} item The block item returned by search. + * @param {Function} onSuccess The callback function when the action has succeeded. + * @param {Function} onError The callback function when the action has failed. + * + */ +export function* uninstallBlock( { id, name }, onSuccess, onError ) { + try { + const response = yield apiFetch( { + path: '__experimental/blocks/uninstall', + data: { + slug: id, + }, + method: 'DELETE', + } ); + if ( response.success === false ) { + throw new Error( response.errorMessage ); + } + yield removeInstalledBlockType( { id, name } ); + onSuccess(); + } catch ( error ) { + onError( error ); + } +} + +/** + * Returns an action object used to add a newly installed block type. + * + * @param {string} item The block item with the block id and name. + * + * @return {Object} Action object. + */ +export function addInstalledBlockType( item ) { + return { + type: 'ADD_INSTALLED_BLOCK_TYPE', + item, + }; +} + +/** + * Returns an action object used to remove a newly installed block type. + * + * @param {string} item The block item with the block id and name. + * + * @return {Object} Action object. + */ +export function removeInstalledBlockType( item ) { + return { + type: 'REMOVE_INSTALLED_BLOCK_TYPE', + item, + }; +} diff --git a/packages/block-directory/src/store/reducer.js b/packages/block-directory/src/store/reducer.js index aea55545b5f799..1d732cab77649e 100644 --- a/packages/block-directory/src/store/reducer.js +++ b/packages/block-directory/src/store/reducer.js @@ -11,7 +11,13 @@ import { combineReducers } from '@wordpress/data'; * * @return {Object} Updated state. */ -export const discoverBlocks = ( state = { results: {}, hasPermission: undefined, filterValue: undefined, isRequestingDownloadableBlocks: true }, action ) => { +export const discoverBlocks = ( state = { + results: {}, + hasPermission: undefined, + filterValue: undefined, + isRequestingDownloadableBlocks: true, + installedBlockTypes: [], +}, action ) => { switch ( action.type ) { case 'FETCH_DISCOVER_BLOCKS' : return { @@ -34,6 +40,17 @@ export const discoverBlocks = ( state = { results: {}, hasPermission: undefined, hasPermission: action.hasPermission, isRequestingDownloadableBlocks: false, }; + case 'ADD_INSTALLED_BLOCK_TYPE' : + return { + ...state, + installedBlockTypes: [ ...state.installedBlockTypes, action.item ], + }; + + case 'REMOVE_INSTALLED_BLOCK_TYPE' : + return { + ...state, + installedBlockTypes: state.installedBlockTypes.filter( ( blockType ) => blockType.name === action.item.name ), + }; } return state; }; diff --git a/packages/block-directory/src/store/selectors.js b/packages/block-directory/src/store/selectors.js index b7c7e21b095622..70a32535803fb1 100644 --- a/packages/block-directory/src/store/selectors.js +++ b/packages/block-directory/src/store/selectors.js @@ -50,3 +50,14 @@ export function hasInstallBlocksPermission( state ) { export function getIsDownloadableBlocksEnabled( state ) { return get( state, [ 'settings', '__experimentalIsDownloadableBlocksEnabled' ], false ); } + +/** + * Returns the block types that have been installed on the server. + * + * @param {Object} state Global application state. + * + * @return {Array} Block type items. + */ +export function getInstalledBlockTypes( state ) { + return get( state, [ 'discoverBlocks', 'installedBlockTypes' ], [] ); +} diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 32261be37842c6..6aad9cb28cec25 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { map, pick, defaultTo } from 'lodash'; +import { map, pick, defaultTo, differenceBy, isEqual, noop } from 'lodash'; import memize from 'memize'; /** @@ -15,6 +15,7 @@ import { BlockEditorProvider, transformStyles } from '@wordpress/block-editor'; import apiFetch from '@wordpress/api-fetch'; import { addQueryArgs } from '@wordpress/url'; import { decodeEntities } from '@wordpress/html-entities'; +import { unregisterBlockType } from '@wordpress/blocks'; /** * Internal dependencies @@ -41,6 +42,8 @@ const fetchLinkSuggestions = async ( search ) => { } ) ); }; +const UNINSTALL_ERROR_NOTICE_ID = 'block-uninstall-error'; + class EditorProvider extends Component { constructor( props ) { super( ...arguments ); @@ -133,6 +136,17 @@ class EditorProvider extends Component { if ( this.props.settings !== prevProps.settings ) { this.props.updateEditorSettings( this.props.settings ); } + if ( ! isEqual( this.props.downloadableBlocksToUninstall, prevProps.downloadableBlocksToUninstall ) ) { + this.props.downloadableBlocksToUninstall.forEach( ( blockType ) => { + this.props.uninstallBlock( blockType, noop, () => { + this.props.createWarningNotice( + __( 'Block previews can\'t uninstall.' ), { + id: UNINSTALL_ERROR_NOTICE_ID, + } ); + } ); + unregisterBlockType( blockType.name ); + } ); + } } componentWillUnmount() { @@ -190,6 +204,10 @@ export default compose( [ __experimentalGetReusableBlocks, } = select( 'core/editor' ); const { canUser } = select( 'core' ); + const { getInstalledBlockTypes } = select( 'core/block-directory' ); + const { getBlocks } = select( 'core/block-editor' ); + + const downloadableBlocksToUninstall = differenceBy( getInstalledBlockTypes(), getBlocks(), 'name' ); return { canUserUseUnfilteredHTML: canUserUseUnfilteredHTML(), @@ -197,6 +215,7 @@ export default compose( [ blocks: getEditorBlocks(), reusableBlocks: __experimentalGetReusableBlocks(), hasUploadPermissions: defaultTo( canUser( 'create', 'media' ), true ), + downloadableBlocksToUninstall, }; } ), withDispatch( ( dispatch ) => { @@ -208,6 +227,7 @@ export default compose( [ __experimentalTearDownEditor, } = dispatch( 'core/editor' ); const { createWarningNotice } = dispatch( 'core/notices' ); + const { uninstallBlock } = dispatch( 'core/block-directory' ); return { setupEditor, @@ -221,6 +241,7 @@ export default compose( [ } ); }, tearDownEditor: __experimentalTearDownEditor, + uninstallBlock, }; } ), ] )( EditorProvider ); From bc3f77ec5924369314831db778babac6a062e855 Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 13 Aug 2019 11:45:52 +1200 Subject: [PATCH 094/122] Remove debug messages from API. --- ...ass-wp-rest-block-directory-controller.php | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/lib/class-wp-rest-block-directory-controller.php b/lib/class-wp-rest-block-directory-controller.php index b3f5eed44d43d4..b58a83c7fa8cf4 100644 --- a/lib/class-wp-rest-block-directory-controller.php +++ b/lib/class-wp-rest-block-directory-controller.php @@ -129,10 +129,6 @@ public function install_block( $request ) { $result = $upgrader->install( $api->download_link ); - if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) { - $status[ 'debug' ] = $skin->get_upgrade_messages(); - } - if ( is_wp_error( $result ) ) { return WP_Error( $result->get_error_code(), $result->get_error_message() ); } @@ -156,9 +152,13 @@ public function install_block( $request ) { $install_status = install_plugin_install_status( $api ); - activate_plugin( $install_status['file'] ); + $activate_result = activate_plugin( $install_status['file'] ); + + if ( is_wp_error( $activate_result ) ) { + return WP_Error( $activate_result->get_error_code(), $activate_result->get_error_message() ); + } - return rest_ensure_response( $status ); + return rest_ensure_response( true ); } /** @@ -192,11 +192,19 @@ public function uninstall_block( $request ) { $install_status = install_plugin_install_status( $api ); - deactivate_plugins( $install_status['file'] ); + $deactivate_result = deactivate_plugins( $install_status['file'] ); - delete_plugins( array( $install_status['file'] ) ); + if ( is_wp_error( $deactivate_result ) ) { + return WP_Error( $deactivate_result->get_error_code(), $deactivate_result->get_error_message() ); + } + + $delete_result = delete_plugins( array( $install_status['file'] ) ); + + if ( is_wp_error( $delete_result ) ) { + return WP_Error( $delete_result->get_error_code(), $delete_result->get_error_message() ); + } - return rest_ensure_response( $api ); + return rest_ensure_response( true ); } /** From d5f1db833f3f097a27d00b49bd28d4c2601ebf84 Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 13 Aug 2019 11:47:30 +1200 Subject: [PATCH 095/122] Fix bug to filter installedBlockType after uninstall. --- packages/block-directory/src/store/reducer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-directory/src/store/reducer.js b/packages/block-directory/src/store/reducer.js index 1d732cab77649e..62e2a2918b344b 100644 --- a/packages/block-directory/src/store/reducer.js +++ b/packages/block-directory/src/store/reducer.js @@ -49,7 +49,7 @@ export const discoverBlocks = ( state = { case 'REMOVE_INSTALLED_BLOCK_TYPE' : return { ...state, - installedBlockTypes: state.installedBlockTypes.filter( ( blockType ) => blockType.name === action.item.name ), + installedBlockTypes: state.installedBlockTypes.filter( ( blockType ) => blockType.name !== action.item.name ), }; } return state; From e37c23d0606d1f0266da5f49ecd55cf5bf6d0926 Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 13 Aug 2019 12:31:37 +1200 Subject: [PATCH 096/122] Add dependencies into package.json --- packages/block-directory/package.json | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json index 59b0e23e96afdb..55701871c696aa 100644 --- a/packages/block-directory/package.json +++ b/packages/block-directory/package.json @@ -19,7 +19,14 @@ "main": "build/index.js", "module": "build-module/index.js", "dependencies": { - "@wordpress/components": "file:../components" + "@wordpress/block-editor": "file:../block-editor", + "@wordpress/blocks": "file:../blocks", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/data": "file:../data", + "@wordpress/element": "file:../element", + "@wordpress/i18n": "file:../i18n", + "lodash": "^4.17.14" }, "publishConfig": { "access": "public" From f65b493b21ad250484375ed08a395e9f038f2acc Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 13 Aug 2019 12:42:29 +1200 Subject: [PATCH 097/122] Update package-lock.json --- package-lock.json | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 19156ff1eb6d19..3874b929d33ee4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4605,7 +4605,14 @@ "@wordpress/block-directory": { "version": "file:packages/block-directory", "requires": { - "@wordpress/components": "file:packages/components" + "@wordpress/block-editor": "file:packages/block-editor", + "@wordpress/blocks": "file:packages/blocks", + "@wordpress/components": "file:packages/components", + "@wordpress/compose": "file:packages/compose", + "@wordpress/data": "file:packages/data", + "@wordpress/element": "file:packages/element", + "@wordpress/i18n": "file:packages/i18n", + "lodash": "^4.17.14" } }, "@wordpress/block-editor": { From d766d67f94e234440c6ce85085ab75fdcf58caa7 Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 13 Aug 2019 13:04:15 +1200 Subject: [PATCH 098/122] Fix flickering when search for blocks. --- .../src/components/downloadable-blocks-panel/index.js | 2 +- packages/block-directory/src/store/reducer.js | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/block-directory/src/components/downloadable-blocks-panel/index.js b/packages/block-directory/src/components/downloadable-blocks-panel/index.js index e361da72e70b50..ff0d42fa1288c3 100644 --- a/packages/block-directory/src/components/downloadable-blocks-panel/index.js +++ b/packages/block-directory/src/components/downloadable-blocks-panel/index.js @@ -59,7 +59,7 @@ export default compose( [ const hasPermission = hasInstallBlocksPermission(); const discoverItems = hasPermission ? getDownloadableBlocks( filterValue ) : []; - const isLoading = hasPermission ? isRequestingDownloadableBlocks() : false; + const isLoading = isRequestingDownloadableBlocks(); return { discoverItems, diff --git a/packages/block-directory/src/store/reducer.js b/packages/block-directory/src/store/reducer.js index 62e2a2918b344b..5b9b532577a440 100644 --- a/packages/block-directory/src/store/reducer.js +++ b/packages/block-directory/src/store/reducer.js @@ -13,7 +13,7 @@ import { combineReducers } from '@wordpress/data'; */ export const discoverBlocks = ( state = { results: {}, - hasPermission: undefined, + hasPermission: true, filterValue: undefined, isRequestingDownloadableBlocks: true, installedBlockTypes: [], @@ -38,7 +38,6 @@ export const discoverBlocks = ( state = { ...state, items: action.hasPermission ? state.items : [], hasPermission: action.hasPermission, - isRequestingDownloadableBlocks: false, }; case 'ADD_INSTALLED_BLOCK_TYPE' : return { From b265d938a00cebdc181eb0fa90d315d909b67ae3 Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 13 Aug 2019 13:04:54 +1200 Subject: [PATCH 099/122] Update package.json --- package.json | 2 +- packages/block-directory/package.json | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 1a2eedfe1e3ac3..917ac6de57f019 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@wordpress/api-fetch": "file:packages/api-fetch", "@wordpress/autop": "file:packages/autop", "@wordpress/blob": "file:packages/blob", + "@wordpress/block-directory": "file:packages/block-directory", "@wordpress/block-editor": "file:packages/block-editor", "@wordpress/block-library": "file:packages/block-library", "@wordpress/block-serialization-default-parser": "file:packages/block-serialization-default-parser", @@ -37,7 +38,6 @@ "@wordpress/deprecated": "file:packages/deprecated", "@wordpress/dom": "file:packages/dom", "@wordpress/dom-ready": "file:packages/dom-ready", - "@wordpress/block-directory": "file:packages/block-directory", "@wordpress/edit-post": "file:packages/edit-post", "@wordpress/edit-widgets": "file:packages/edit-widgets", "@wordpress/editor": "file:packages/editor", diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json index 55701871c696aa..e49c81cab5c1fd 100644 --- a/packages/block-directory/package.json +++ b/packages/block-directory/package.json @@ -19,6 +19,7 @@ "main": "build/index.js", "module": "build-module/index.js", "dependencies": { + "@wordpress/api-fetch": "file:../api-fetch", "@wordpress/block-editor": "file:../block-editor", "@wordpress/blocks": "file:../blocks", "@wordpress/components": "file:../components", From 78e4566bb869a71382abc17b13cb90ef6f82f33d Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 13 Aug 2019 13:09:43 +1200 Subject: [PATCH 100/122] Update package-lock.json --- package-lock.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package-lock.json b/package-lock.json index 3874b929d33ee4..dbdd108927e847 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4605,6 +4605,7 @@ "@wordpress/block-directory": { "version": "file:packages/block-directory", "requires": { + "@wordpress/api-fetch": "file:packages/api-fetch", "@wordpress/block-editor": "file:packages/block-editor", "@wordpress/blocks": "file:packages/blocks", "@wordpress/components": "file:packages/components", From e0772d0f96a9550f0150fdb77105ee1275d41662 Mon Sep 17 00:00:00 2001 From: CK Date: Thu, 15 Aug 2019 15:08:38 +1200 Subject: [PATCH 101/122] Fix the search results flickering. --- .../components/downloadable-blocks-panel/index.js | 4 ++-- .../index.js | 15 ++++++--------- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/block-directory/src/components/downloadable-blocks-panel/index.js b/packages/block-directory/src/components/downloadable-blocks-panel/index.js index ff0d42fa1288c3..aa6332bf6889ae 100644 --- a/packages/block-directory/src/components/downloadable-blocks-panel/index.js +++ b/packages/block-directory/src/components/downloadable-blocks-panel/index.js @@ -12,7 +12,7 @@ import { Spinner } from '@wordpress/components'; */ import DownloadableBlocksList from '../downloadable-blocks-list'; -function DownloadableBlocksPanel( { discoverItems, onSelect, onHover, hasPermission, isLoading } ) { +function DownloadableBlocksPanel( { discoverItems, onSelect, onHover, hasPermission, isLoading, isWaiting } ) { if ( ! hasPermission ) { return (

          @@ -23,7 +23,7 @@ function DownloadableBlocksPanel( { discoverItems, onSelect, onHover, hasPermiss ); } - if ( isLoading ) { + if ( isLoading || isWaiting ) { return (

          diff --git a/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js b/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js index 5ac9c6c54569c7..a53de233c1124c 100644 --- a/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js +++ b/packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js @@ -11,11 +11,9 @@ import { DownloadableBlocksPanel } from '@wordpress/block-directory'; import { useState } from '@wordpress/element'; function InserterMenuDownloadableBlocksPanel() { - const [ state, setState ] = useState( { - debouncedFilterValue: '', - } ); + const [ debouncedFilterValue, setFilterValue ] = useState( '' ); - const debouncedSetState = debounce( setState, 400 ); + const debouncedSetFilterValue = debounce( setFilterValue, 400 ); return ( <__experimentalInserterMenuExtension> @@ -25,17 +23,16 @@ function InserterMenuDownloadableBlocksPanel() { return null; } - if ( state.debouncedFilterValue !== filterValue ) { - debouncedSetState( { - debouncedFilterValue: filterValue, - } ); + if ( debouncedFilterValue !== filterValue ) { + debouncedSetFilterValue( filterValue ); } return ( ); } From 345a1db6024f8f1989528b9b8ad1385de564d052 Mon Sep 17 00:00:00 2001 From: CK Lee Date: Fri, 16 Aug 2019 11:44:49 +1200 Subject: [PATCH 102/122] Update packages/block-directory/package.json MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Grzegorz (Greg) Ziółkowski --- packages/block-directory/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json index e49c81cab5c1fd..da130a2a6edcee 100644 --- a/packages/block-directory/package.json +++ b/packages/block-directory/package.json @@ -5,6 +5,7 @@ "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", "keywords": [ + "wordpress", "block directory" ], "homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/block-directory/README.md", From 5b0b5c9e204a2f5576fea93b2eef1828d0636fe2 Mon Sep 17 00:00:00 2001 From: CK Lee Date: Fri, 16 Aug 2019 11:44:58 +1200 Subject: [PATCH 103/122] Update packages/block-directory/package.json MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Grzegorz (Greg) Ziółkowski --- packages/block-directory/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json index da130a2a6edcee..e16839c9ab31f3 100644 --- a/packages/block-directory/package.json +++ b/packages/block-directory/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/block-directory", - "version": "1.0.0", + "version": "1.0.0-alpha.0", "description": "Extend editor with block directory features to search, download and install blocks.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", From 78402219c8cae652e71b826a17529d9d2f09fe9c Mon Sep 17 00:00:00 2001 From: CK Lee Date: Fri, 16 Aug 2019 11:45:10 +1200 Subject: [PATCH 104/122] Update packages/block-directory/CHANGELOG.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Grzegorz (Greg) Ziółkowski --- packages/block-directory/CHANGELOG.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-directory/CHANGELOG.md b/packages/block-directory/CHANGELOG.md index 54d76ab8e592cc..7586a4a9c8d2c3 100644 --- a/packages/block-directory/CHANGELOG.md +++ b/packages/block-directory/CHANGELOG.md @@ -1,3 +1,3 @@ -## 1.0.0 (2019-08-01) +## Master -- Initial release. \ No newline at end of file +- Initial release. From 4b3c898ff5bc362ec8d7fff095f8c1e8c6f97810 Mon Sep 17 00:00:00 2001 From: CK Date: Fri, 16 Aug 2019 21:23:29 +1200 Subject: [PATCH 105/122] Improve accessibility. --- .../downloadable-block-header/index.js | 2 +- .../components/downloadable-block-info/index.js | 4 ++-- .../downloadable-block-list-item/index.js | 16 ++++++++-------- .../downloadable-blocks-panel/index.js | 15 ++++++++++++--- .../block-editor/src/components/inserter/menu.js | 7 +++++-- 5 files changed, 28 insertions(+), 16 deletions(-) diff --git a/packages/block-directory/src/components/downloadable-block-header/index.js b/packages/block-directory/src/components/downloadable-block-header/index.js index a7036d4015641a..e6923b34cbc9e8 100644 --- a/packages/block-directory/src/components/downloadable-block-header/index.js +++ b/packages/block-directory/src/components/downloadable-block-header/index.js @@ -24,7 +24,7 @@ function DownloadableBlockHeader( { icon, title, rating, ratingCount, onClick } }

          - + { title } diff --git a/packages/block-directory/src/components/downloadable-block-info/index.js b/packages/block-directory/src/components/downloadable-block-info/index.js index 611bc2c6e09c71..9ccc8aa4e4e673 100644 --- a/packages/block-directory/src/components/downloadable-block-info/index.js +++ b/packages/block-directory/src/components/downloadable-block-info/index.js @@ -3,7 +3,7 @@ */ import { Fragment } from '@wordpress/element'; import { Icon } from '@wordpress/components'; -import { _n, sprintf } from '@wordpress/i18n'; +import { __, _n, sprintf } from '@wordpress/i18n'; function DownloadableBlockInfo( { description, activeInstalls, humanizedUpdated } ) { return ( @@ -16,7 +16,7 @@ function DownloadableBlockInfo( { description, activeInstalls, humanizedUpdated { sprintf( _n( '%d active installation', '%d active installations', activeInstalls ), activeInstalls ) }
          - { humanizedUpdated } + { humanizedUpdated }
          diff --git a/packages/block-directory/src/components/downloadable-block-list-item/index.js b/packages/block-directory/src/components/downloadable-block-list-item/index.js index 1b607cf6f476c2..e048736697dd4a 100644 --- a/packages/block-directory/src/components/downloadable-block-list-item/index.js +++ b/packages/block-directory/src/components/downloadable-block-list-item/index.js @@ -22,8 +22,8 @@ function DownloadableBlockListItem( { return (
        • -
          -
          +
          +
          -
          -
          + +
          -
          -
          + +
          -
          -
          + +
          • ); } diff --git a/packages/block-directory/src/components/downloadable-blocks-panel/index.js b/packages/block-directory/src/components/downloadable-blocks-panel/index.js index aa6332bf6889ae..66af955299b4f0 100644 --- a/packages/block-directory/src/components/downloadable-blocks-panel/index.js +++ b/packages/block-directory/src/components/downloadable-blocks-panel/index.js @@ -4,16 +4,17 @@ import { Fragment } from '@wordpress/element'; import { compose } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; -import { __ } from '@wordpress/i18n'; -import { Spinner } from '@wordpress/components'; +import { __, _n, sprintf } from '@wordpress/i18n'; +import { Spinner, withSpokenMessages } from '@wordpress/components'; /** * Internal dependencies */ import DownloadableBlocksList from '../downloadable-blocks-list'; -function DownloadableBlocksPanel( { discoverItems, onSelect, onHover, hasPermission, isLoading, isWaiting } ) { +function DownloadableBlocksPanel( { discoverItems, onSelect, onHover, hasPermission, isLoading, isWaiting, debouncedSpeak } ) { if ( ! hasPermission ) { + debouncedSpeak( __( 'No blocks found in your library. Please contact your site administrator to install new blocks.' ) ); return (

          { __( 'No blocks found in your library.' ) } @@ -32,6 +33,7 @@ function DownloadableBlocksPanel( { discoverItems, onSelect, onHover, hasPermiss } if ( ! discoverItems.length ) { + debouncedSpeak( __( 'No blocks found in your library.' ) ); return (

          { __( 'No blocks found in your library.' ) } @@ -39,6 +41,12 @@ function DownloadableBlocksPanel( { discoverItems, onSelect, onHover, hasPermiss ); } + const resultsFoundMessage = sprintf( + _n( 'No blocks found in your library. We did find %d block available for download.', 'No blocks found in your library. We did find %d blocks available.', discoverItems.length ), + discoverItems.length + ); + + debouncedSpeak( resultsFoundMessage ); return (

          @@ -50,6 +58,7 @@ function DownloadableBlocksPanel( { discoverItems, onSelect, onHover, hasPermiss } export default compose( [ + withSpokenMessages, withSelect( ( select, { filterValue } ) => { const { getDownloadableBlocks, diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index effe38faf013eb..7e3e2cc23f242f 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -190,7 +190,7 @@ export class InserterMenu extends Component { } filter( filterValue = '' ) { - const { debouncedSpeak, items, rootChildBlocks } = this.props; + const { debouncedSpeak, items, rootChildBlocks, isDownloadableBlocksEnabled } = this.props; const filteredItems = searchItems( items, filterValue ); @@ -237,7 +237,10 @@ export class InserterMenu extends Component { resultCount ); - debouncedSpeak( resultsFoundMessage ); + // Downloadable blocks will display more results from block directory if no results are found. + if ( ! isDownloadableBlocksEnabled ) { + debouncedSpeak( resultsFoundMessage ); + } } onKeyDown( event ) { From 649982dccc6ca08bdbf608e7f54508c43ed01e01 Mon Sep 17 00:00:00 2001 From: CK Date: Mon, 19 Aug 2019 09:47:27 +1200 Subject: [PATCH 106/122] Remove redudant line. --- packages/block-directory/src/store/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-directory/src/store/index.js b/packages/block-directory/src/store/index.js index 4237813cb29eb9..96500088af06b2 100644 --- a/packages/block-directory/src/store/index.js +++ b/packages/block-directory/src/store/index.js @@ -34,7 +34,6 @@ export const storeConfig = { const store = registerStore( MODULE_KEY, { ...storeConfig, - persist: [ 'preferences' ], } ); export default store; From e47e214897fe4f79073b031e813600885f081334 Mon Sep 17 00:00:00 2001 From: CK Date: Mon, 19 Aug 2019 09:55:18 +1200 Subject: [PATCH 107/122] Rename the selector method. --- packages/block-directory/src/store/selectors.js | 2 +- packages/block-editor/src/components/inserter/menu.js | 4 ++-- packages/block-editor/src/store/selectors.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-directory/src/store/selectors.js b/packages/block-directory/src/store/selectors.js index 70a32535803fb1..fa273877d01b82 100644 --- a/packages/block-directory/src/store/selectors.js +++ b/packages/block-directory/src/store/selectors.js @@ -47,7 +47,7 @@ export function hasInstallBlocksPermission( state ) { * * @return {boolean} Whether the downloadable blocks feature is enabled. */ -export function getIsDownloadableBlocksEnabled( state ) { +export function isDownloadableBlocksEnabled( state ) { return get( state, [ 'settings', '__experimentalIsDownloadableBlocksEnabled' ], false ); } diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 7e3e2cc23f242f..e83b91572058c3 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -390,7 +390,7 @@ export default compose( getBlockName, getBlockRootClientId, getBlockSelectionEnd, - getIsDownloadableBlocksEnabled, + isDownloadableBlocksEnabled, } = select( 'core/block-editor' ); const { getChildBlockNames, @@ -411,7 +411,7 @@ export default compose( rootChildBlocks: getChildBlockNames( destinationRootBlockName ), items, destinationRootClientId, - isDownloadableBlocksEnabled: getIsDownloadableBlocksEnabled(), + isDownloadableBlocksEnabled: isDownloadableBlocksEnabled(), }; } ), withDispatch( ( dispatch, ownProps, { select } ) => { diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 22cca0422212d2..6cbdf804878730 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1425,6 +1425,6 @@ export function isNavigationMode( state ) { * * @return {boolean} Whether the downloadable blocks feature is enabled. */ -export function getIsDownloadableBlocksEnabled( state ) { +export function isDownloadableBlocksEnabled( state ) { return get( state, [ 'settings', '__experimentalIsDownloadableBlocksEnabled' ], false ); } From e3bc38cc7c2477df3d1a3ee24a9f1120911b6aa0 Mon Sep 17 00:00:00 2001 From: CK Date: Mon, 19 Aug 2019 11:21:02 +1200 Subject: [PATCH 108/122] Remove isDownloadableBlocksEnabled settings. If no fills registered for the slot, default to original behaviour. --- .../downloadable-blocks-panel/index.js | 5 +- .../block-directory/src/store/selectors.js | 11 ----- .../src/components/inserter/menu.js | 49 ++++++++++--------- packages/block-editor/src/store/selectors.js | 11 ----- .../editor/src/components/provider/index.js | 1 - 5 files changed, 27 insertions(+), 50 deletions(-) diff --git a/packages/block-directory/src/components/downloadable-blocks-panel/index.js b/packages/block-directory/src/components/downloadable-blocks-panel/index.js index 66af955299b4f0..180df43fd3b88c 100644 --- a/packages/block-directory/src/components/downloadable-blocks-panel/index.js +++ b/packages/block-directory/src/components/downloadable-blocks-panel/index.js @@ -14,7 +14,7 @@ import DownloadableBlocksList from '../downloadable-blocks-list'; function DownloadableBlocksPanel( { discoverItems, onSelect, onHover, hasPermission, isLoading, isWaiting, debouncedSpeak } ) { if ( ! hasPermission ) { - debouncedSpeak( __( 'No blocks found in your library. Please contact your site administrator to install new blocks.' ) ); + debouncedSpeak( __( 'Please contact your site administrator to install new blocks.' ) ); return (

          { __( 'No blocks found in your library.' ) } @@ -33,7 +33,6 @@ function DownloadableBlocksPanel( { discoverItems, onSelect, onHover, hasPermiss } if ( ! discoverItems.length ) { - debouncedSpeak( __( 'No blocks found in your library.' ) ); return (

          { __( 'No blocks found in your library.' ) } @@ -42,7 +41,7 @@ function DownloadableBlocksPanel( { discoverItems, onSelect, onHover, hasPermiss } const resultsFoundMessage = sprintf( - _n( 'No blocks found in your library. We did find %d block available for download.', 'No blocks found in your library. We did find %d blocks available.', discoverItems.length ), + _n( 'We did find %d block available for download.', 'We did find %d blocks available.', discoverItems.length ), discoverItems.length ); diff --git a/packages/block-directory/src/store/selectors.js b/packages/block-directory/src/store/selectors.js index fa273877d01b82..66989dc478a022 100644 --- a/packages/block-directory/src/store/selectors.js +++ b/packages/block-directory/src/store/selectors.js @@ -40,17 +40,6 @@ export function hasInstallBlocksPermission( state ) { return state.discoverBlocks.hasPermission; } -/** - * Returns true if the block editor can search and install uninstalled blocks. - * - * @param {Object} state Global application state. - * - * @return {boolean} Whether the downloadable blocks feature is enabled. - */ -export function isDownloadableBlocksEnabled( state ) { - return get( state, [ 'settings', '__experimentalIsDownloadableBlocksEnabled' ], false ); -} - /** * Returns the block types that have been installed on the server. * diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index e83b91572058c3..539c9ec6bd0e3d 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -190,7 +190,7 @@ export class InserterMenu extends Component { } filter( filterValue = '' ) { - const { debouncedSpeak, items, rootChildBlocks, isDownloadableBlocksEnabled } = this.props; + const { debouncedSpeak, items, rootChildBlocks } = this.props; const filteredItems = searchItems( items, filterValue ); @@ -236,11 +236,7 @@ export class InserterMenu extends Component { _n( '%d result found.', '%d results found.', resultCount ), resultCount ); - - // Downloadable blocks will display more results from block directory if no results are found. - if ( ! isDownloadableBlocksEnabled ) { - debouncedSpeak( resultsFoundMessage ); - } + debouncedSpeak( resultsFoundMessage ); } onKeyDown( event ) { @@ -251,7 +247,7 @@ export class InserterMenu extends Component { } render() { - const { instanceId, onSelect, rootClientId, isDownloadableBlocksEnabled } = this.props; + const { instanceId, onSelect, rootClientId } = this.props; const { childItems, @@ -351,21 +347,28 @@ export class InserterMenu extends Component { ) } - { - ! isDownloadableBlocksEnabled && isMenuEmpty && ( -

          { __( 'No blocks found.' ) }

          - ) - } - { - <__experimentalInserterMenuExtension.Slot - fillProps={ { - onSelect, - onHover: this.onHover, - filterValue: this.state.filterValue, - isMenuEmpty, - } } - /> - } + + <__experimentalInserterMenuExtension.Slot + fillProps={ { + onSelect, + onHover: this.onHover, + filterValue: this.state.filterValue, + isMenuEmpty, + } } + > + { ( fills ) => { + // __experimentalInserterMenuExtension should also handle when isMenuEmpty is true ( no installed block type results are found ). + if ( fills.length ) { + return fills; + } + if ( isMenuEmpty ) { + return ( +

          { __( 'No blocks found.' ) }

          + ); + } + return null; + } } +
          { hoveredItem && isReusableBlock( hoveredItem ) && @@ -390,7 +393,6 @@ export default compose( getBlockName, getBlockRootClientId, getBlockSelectionEnd, - isDownloadableBlocksEnabled, } = select( 'core/block-editor' ); const { getChildBlockNames, @@ -411,7 +413,6 @@ export default compose( rootChildBlocks: getChildBlockNames( destinationRootBlockName ), items, destinationRootClientId, - isDownloadableBlocksEnabled: isDownloadableBlocksEnabled(), }; } ), withDispatch( ( dispatch, ownProps, { select } ) => { diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 6cbdf804878730..462cf8cda1b8c9 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1417,14 +1417,3 @@ function getReusableBlocks( state ) { export function isNavigationMode( state ) { return state.isNavigationMode; } - -/** - * Returns whether block editor can search and install uninstalled blocks. - * - * @param {Object} state Global application state. - * - * @return {boolean} Whether the downloadable blocks feature is enabled. - */ -export function isDownloadableBlocksEnabled( state ) { - return get( state, [ 'settings', '__experimentalIsDownloadableBlocksEnabled' ], false ); -} diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 6aad9cb28cec25..524627d9b0abf2 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -110,7 +110,6 @@ class EditorProvider extends Component { __experimentalMediaUpload: hasUploadPermissions ? mediaUpload : undefined, __experimentalFetchLinkSuggestions: fetchLinkSuggestions, __experimentalCanUserUseUnfilteredHTML: canUserUseUnfilteredHTML, - __experimentalIsDownloadableBlocksEnabled: true, }; } From dad8d44696bdf7b9f063032745b07a631a92ace1 Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 20 Aug 2019 11:42:05 +1200 Subject: [PATCH 109/122] Update data-core-block-editor.md --- .../developers/data/data-core-block-editor.md | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md index 6c86b219dfc2a1..f4a9d048f5e5bb 100644 --- a/docs/designers-developers/developers/data/data-core-block-editor.md +++ b/docs/designers-developers/developers/data/data-core-block-editor.md @@ -335,18 +335,6 @@ _Returns_ - `Array`: Items that appear in inserter. -# **getIsDownloadableBlocksEnabled** - -Returns whether block editor can search and install uninstalled blocks. - -_Parameters_ - -- _state_ `Object`: Global application state. - -_Returns_ - -- `boolean`: Whether the downloadable blocks feature is enabled. - # **getLastMultiSelectedBlockClientId** Returns the client ID of the last block in the multi-selection set, or null From c877957771e8eb040366181f828dab29022d5926 Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 20 Aug 2019 16:07:36 +1200 Subject: [PATCH 110/122] Added feature toggle for block directory in the experiment settings page. --- lib/experiments-page.php | 17 +++++++++++++++-- packages/block-editor/src/store/defaults.js | 2 ++ .../editor/src/components/provider/index.js | 5 +++-- 3 files changed, 20 insertions(+), 4 deletions(-) diff --git a/lib/experiments-page.php b/lib/experiments-page.php index 0ca203444dc81f..1540584c228e70 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -22,7 +22,7 @@ class="wrap"
          - +
        @@ -64,9 +64,20 @@ function gutenberg_initialize_experiments_settings() { 'id' => 'gutenberg-menu-block', ) ); + add_settings_field( + 'gutenberg-block-directory', + __( 'Block Directory', 'gutenberg' ), + 'gutenberg_display_experiment_field', + 'gutenberg-experiments', + 'gutenberg_experiments_section', + array( + 'label' => __( 'Enable Block Directory search', 'gutenberg' ), + 'id' => 'gutenberg-block-directory', + ) + ); register_setting( 'gutenberg-experiments', - 'gutenberg-experiments' + 'gutenberg-experiments', ); } @@ -114,6 +125,8 @@ function gutenberg_experiments_editor_settings( $settings ) { $experiments_settings = array( '__experimentalEnableLegacyWidgetBlock' => $experiments_exist ? array_key_exists( 'gutenberg-widget-experiments', get_option( 'gutenberg-experiments' ) ) : false, '__experimentalEnableMenuBlock' => $experiments_exist ? array_key_exists( 'gutenberg-menu-block', get_option( 'gutenberg-experiments' ) ) : false, + '__experimentalBlockDirectory' => $experiments_exist ? array_key_exists( 'gutenberg-block-directory', get_option( 'gutenberg-experiments' ) ) : false, + ); return array_merge( $settings, $experiments_settings ); } diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js index 2e7cb1f59cb78e..f7076f28c27570 100644 --- a/packages/block-editor/src/store/defaults.js +++ b/packages/block-editor/src/store/defaults.js @@ -31,6 +31,7 @@ export const PREFERENCES_DEFAULTS = { * __experimentalCanUserUseUnfilteredHTML string Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes. * __experimentalEnableLegacyWidgetBlock boolean Whether the user has enabled the Legacy Widget Block * __experimentalEnableMenuBlock boolean Whether the user has enabled the Menu Block + * __experimentalBlockDirectory boolean Whether the user has enabled the Block Directory */ export const SETTINGS_DEFAULTS = { alignWide: false, @@ -150,5 +151,6 @@ export const SETTINGS_DEFAULTS = { __experimentalCanUserUseUnfilteredHTML: false, __experimentalEnableLegacyWidgetBlock: false, __experimentalEnableMenuBlock: false, + __experimentalBlockDirectory: false, }; diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index cef0de695d5e06..54194ad21f8a22 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -105,6 +105,7 @@ class EditorProvider extends Component { 'titlePlaceholder', '__experimentalEnableLegacyWidgetBlock', '__experimentalEnableMenuBlock', + '__experimentalBlockDirectory', 'showInserterHelpPanel', ] ), __experimentalReusableBlocks: reusableBlocks, @@ -174,7 +175,7 @@ class EditorProvider extends Component { settings, reusableBlocks, hasUploadPermissions, - canUserUseUnfilteredHTML + canUserUseUnfilteredHTML, ); return ( @@ -188,7 +189,7 @@ class EditorProvider extends Component { { children } - + { editorSettings.__experimentalBlockDirectory && } ); } From d1f86f5c715b08699051463ed4755fb962f8a091 Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 20 Aug 2019 16:08:09 +1200 Subject: [PATCH 111/122] Update README.md --- packages/block-editor/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index a5a5ed24f0014f..adb9f24337fb74 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -390,7 +390,8 @@ The default editor settings showInserterHelpPanel boolean Whether or not the inserter help panel is shown **experimentalCanUserUseUnfilteredHTML string Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes. **experimentalEnableLegacyWidgetBlock boolean Whether the user has enabled the Legacy Widget Block - \_\_experimentalEnableMenuBlock boolean Whether the user has enabled the Menu Block + **experimentalEnableMenuBlock boolean Whether the user has enabled the Menu Block + **experimentalBlockDirectory boolean Whether the user has enabled the Block Directory # **SkipToSelectedBlock** From d1faced701eb06d9b29ebd2a7e8623e5f25545d2 Mon Sep 17 00:00:00 2001 From: CK Date: Tue, 20 Aug 2019 16:30:03 +1200 Subject: [PATCH 112/122] Fix typo --- lib/experiments-page.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/experiments-page.php b/lib/experiments-page.php index 1540584c228e70..a0db70232f2c20 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -77,7 +77,7 @@ function gutenberg_initialize_experiments_settings() { ); register_setting( 'gutenberg-experiments', - 'gutenberg-experiments', + 'gutenberg-experiments' ); } From f2bd345fe0bfa620efceb0afa919eb4158f7ac92 Mon Sep 17 00:00:00 2001 From: CK Date: Wed, 21 Aug 2019 15:12:01 +1200 Subject: [PATCH 113/122] Fixed phpcs errors. --- ...ass-wp-rest-block-directory-controller.php | 79 +++++++++++-------- lib/rest-api.php | 9 ++- 2 files changed, 53 insertions(+), 35 deletions(-) diff --git a/lib/class-wp-rest-block-directory-controller.php b/lib/class-wp-rest-block-directory-controller.php index b58a83c7fa8cf4..f7639a5a5a7197 100644 --- a/lib/class-wp-rest-block-directory-controller.php +++ b/lib/class-wp-rest-block-directory-controller.php @@ -123,16 +123,16 @@ public function install_block( $request ) { $filesystem_method = get_filesystem_method(); - if ( $filesystem_method !== 'direct' ) { + if ( 'direct' !== $filesystem_method ) { return WP_Error( null, 'Only direct FS_METHOD is supported.' ); } - $result = $upgrader->install( $api->download_link ); + $result = $upgrader->install( $api->download_link ); if ( is_wp_error( $result ) ) { return WP_Error( $result->get_error_code(), $result->get_error_message() ); - } - + } + if ( is_wp_error( $skin->result ) ) { return WP_Error( $skin->$result->get_error_code(), $skin->$result->get_error_message() ); } @@ -219,19 +219,19 @@ public function get_items( $request ) { $search_string = $request->get_param( 'search' ); - if ( empty( $search_string ) ){ + if ( empty( $search_string ) ) { return rest_ensure_response( array() ); } include( ABSPATH . WPINC . '/version.php' ); - $url = 'http://api.wordpress.org/plugins/info/1.2/'; - $url = add_query_arg( + $url = 'http://api.wordpress.org/plugins/info/1.2/'; + $url = add_query_arg( array( - 'action' => 'query_plugins', - 'request[block]' => $search_string, + 'action' => 'query_plugins', + 'request[block]' => $search_string, 'request[wp_version]' => '5.3', - 'request[per_page]' => '3' + 'request[per_page]' => '3', ), $url ); @@ -248,15 +248,14 @@ public function get_items( $request ) { $request = wp_remote_get( $url, $http_args ); $response = json_decode( wp_remote_retrieve_body( $request ), true ); - if ( ! function_exists( 'get_plugins' ) ) { require_once ABSPATH . 'wp-admin/includes/plugin.php'; } $result = array(); - foreach ( $response[ 'plugins' ] as $plugin ) { - $installed_plugins = get_plugins( '/' . $plugin[ 'slug' ] ); + foreach ( $response['plugins'] as $plugin ) { + $installed_plugins = get_plugins( '/' . $plugin['slug'] ); // Only show uninstalled blocks. if ( empty( $installed_plugins ) ) { @@ -268,34 +267,52 @@ public function get_items( $request ) { } } + /** + * Parse block metadata for a block + * + * @since 5.7.0 + * + * @param WP_Object $plugin The plugin metadata. + * @return WP_Error|WP_REST_Response Response object on success, or WP_Error object on failure. + */ function parse_block_metadata( $plugin ) { $block = new stdClass(); - $block->id = $plugin[ 'slug' ]; + $block->id = $plugin['slug']; + + // AMBIGUOUS: There might be multiple blocks. Only the first element in blocks is mapped. + $block->name = reset( $plugin['blocks'] )['name']; + $block->title = reset( $plugin['blocks'] )['title']; - // AMBIGUOUS: There might be multiple blocks. Only the first element in blocks is mapped - $block->name = reset( $plugin[ 'blocks' ] )[ 'name' ]; - $block->title = reset( $plugin[ 'blocks' ] )[ 'title' ]; + // AMBIGUOUS: Plugin's description, not description in block.json. + $block->description = wp_trim_words( wp_strip_all_tags( $plugin['description'] ), 30, '...' ); - // AMBIGUOUS: Plugin's description, not description in block.json - $block->description = wp_trim_words( wp_strip_all_tags( $plugin[ 'description' ] ), 30, '...' ); + $block->rating = $plugin['rating']; + $block->rating_count = $plugin['num_ratings']; + $block->active_installs = $plugin['active_installs']; - $block->rating = $plugin[ 'rating' ]; - $block->rating_count = $plugin[ 'num_ratings' ]; - $block->active_installs = $plugin[ 'active_installs' ]; + // AMBIGUOUS: Plugin's author, not author in block.json. + $block->author = wp_strip_all_tags( $plugin['author'] ); - // AMBIGUOUS: Plugin's author, not author in block.json - $block->author = wp_strip_all_tags( $plugin[ 'author' ] ); + // AMBIGUOUS: Plugin's icons or icon in block.json. + $block->icon = isset( $plugin['icons']['1x'] ) ? $plugin['icons']['1x'] : 'block-default'; - // AMBIGUOUS: Plugin's icons or icon in block.json - $block->icon = isset( $plugin[ 'icons' ][ '1x' ] ) ? $plugin[ 'icons' ][ '1x' ] : 'block-default'; + /** + * Get block asset url + * + * @since 5.7.0 + * + * @param WP_Object $asset The plugin asset. + * @return String The URL for the block asset. + */ + function get_block_asset_url( $asset ) { + return 'https://plugins.svn.wordpress.org/' . $plugin['slug'] . $asset; + } - $block->assets = array_map( function( $asset ) use ( $plugin ) { - return 'https://plugins.svn.wordpress.org/' . $plugin[ 'slug' ] . $asset; - }, $plugin[ 'block_assets' ] ); + $block->assets = array_map( 'get_block_asset_url', $plugin['block_assets'] ); - $block->humanized_updated = human_time_diff( strtotime( $plugin[ 'last_updated' ] ), current_time( 'timestamp' ) ) . __( ' ago' ); + $block->humanized_updated = human_time_diff( strtotime( $plugin['last_updated'] ), current_time( 'timestamp' ) ) . __( ' ago' ); - // TODO: calculate these values + // TODO: calculate these values. $block->author_average_rating = null; $block->author_blocks_count = null; $block->author_support_time = null; diff --git a/lib/rest-api.php b/lib/rest-api.php index 48d3cf98e85851..0f7a1c59494199 100644 --- a/lib/rest-api.php +++ b/lib/rest-api.php @@ -78,13 +78,14 @@ function gutenberg_register_rest_widget_areas() { $widget_areas_controller->register_routes(); } add_action( 'rest_api_init', 'gutenberg_register_rest_widget_areas' ); + /** - * End: Include for phase 2 + * Registers the block directory. + * + * @since 5.7.0 */ - - function gutenberg_register_rest_block_directory() { $block_directory_controller = new WP_REST_Block_Directory_Controller(); $block_directory_controller->register_routes(); } -add_filter( 'rest_api_init', 'gutenberg_register_rest_block_directory' ); +add_filter( 'rest_api_init', 'gutenberg_register_rest_block_directory' ); From d18469307feebd94ab91f7f30b4c732c15c936e7 Mon Sep 17 00:00:00 2001 From: CK Date: Fri, 23 Aug 2019 11:09:27 +1200 Subject: [PATCH 114/122] Fix phpcs warning. --- ...ass-wp-rest-block-directory-controller.php | 21 +++++++------------ 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/lib/class-wp-rest-block-directory-controller.php b/lib/class-wp-rest-block-directory-controller.php index f7639a5a5a7197..c3af32f340f522 100644 --- a/lib/class-wp-rest-block-directory-controller.php +++ b/lib/class-wp-rest-block-directory-controller.php @@ -280,8 +280,9 @@ function parse_block_metadata( $plugin ) { $block->id = $plugin['slug']; // AMBIGUOUS: There might be multiple blocks. Only the first element in blocks is mapped. - $block->name = reset( $plugin['blocks'] )['name']; - $block->title = reset( $plugin['blocks'] )['title']; + $block_data = reset( $plugin['blocks'] ); + $block->name = $block_data['name']; + $block->title = $block_data['title']; // AMBIGUOUS: Plugin's description, not description in block.json. $block->description = wp_trim_words( wp_strip_all_tags( $plugin['description'] ), 30, '...' ); @@ -296,19 +297,11 @@ function parse_block_metadata( $plugin ) { // AMBIGUOUS: Plugin's icons or icon in block.json. $block->icon = isset( $plugin['icons']['1x'] ) ? $plugin['icons']['1x'] : 'block-default'; - /** - * Get block asset url - * - * @since 5.7.0 - * - * @param WP_Object $asset The plugin asset. - * @return String The URL for the block asset. - */ - function get_block_asset_url( $asset ) { - return 'https://plugins.svn.wordpress.org/' . $plugin['slug'] . $asset; - } + $block->assets = array(); - $block->assets = array_map( 'get_block_asset_url', $plugin['block_assets'] ); + foreach ( $plugin['block_assets'] as $asset ) { + $block->assets[] = 'https://plugins.svn.wordpress.org/' . $plugin['slug'] . $asset; + } $block->humanized_updated = human_time_diff( strtotime( $plugin['last_updated'] ), current_time( 'timestamp' ) ) . __( ' ago' ); From d0d832a3993894d38e05373fd0f4aefcaad3f2ff Mon Sep 17 00:00:00 2001 From: CK Date: Fri, 23 Aug 2019 11:32:01 +1200 Subject: [PATCH 115/122] Rename REST base endpoint to block-directory. --- lib/class-wp-rest-block-directory-controller.php | 6 +++--- packages/block-directory/src/store/actions.js | 4 ++-- packages/block-directory/src/store/resolvers.js | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/lib/class-wp-rest-block-directory-controller.php b/lib/class-wp-rest-block-directory-controller.php index c3af32f340f522..f96d4cf89c471a 100644 --- a/lib/class-wp-rest-block-directory-controller.php +++ b/lib/class-wp-rest-block-directory-controller.php @@ -23,7 +23,7 @@ class WP_REST_Block_Directory_Controller extends WP_REST_Controller { */ public function __construct() { $this->namespace = '__experimental'; - $this->rest_base = 'blocks'; + $this->rest_base = 'block-directory'; } /** @@ -34,7 +34,7 @@ public function __construct() { public function register_routes() { register_rest_route( $this->namespace, - '/' . $this->rest_base, + '/' . $this->rest_base . '/search', array( array( 'methods' => WP_REST_Server::READABLE, @@ -217,7 +217,7 @@ public function uninstall_block( $request ) { */ public function get_items( $request ) { - $search_string = $request->get_param( 'search' ); + $search_string = $request->get_param( 'term' ); if ( empty( $search_string ) ) { return rest_ensure_response( array() ); diff --git a/packages/block-directory/src/store/actions.js b/packages/block-directory/src/store/actions.js index 7aab27fc6c67a3..77839b02739170 100644 --- a/packages/block-directory/src/store/actions.js +++ b/packages/block-directory/src/store/actions.js @@ -76,7 +76,7 @@ export function* downloadBlock( item, onSuccess, onError ) { export function* installBlock( { id, name }, onSuccess, onError ) { try { const response = yield apiFetch( { - path: '__experimental/blocks/install', + path: '__experimental/block-directory/install', data: { slug: id, }, @@ -103,7 +103,7 @@ export function* installBlock( { id, name }, onSuccess, onError ) { export function* uninstallBlock( { id, name }, onSuccess, onError ) { try { const response = yield apiFetch( { - path: '__experimental/blocks/uninstall', + path: '__experimental/block-directory/uninstall', data: { slug: id, }, diff --git a/packages/block-directory/src/store/resolvers.js b/packages/block-directory/src/store/resolvers.js index 70479187f12857..626ab64bb0b413 100644 --- a/packages/block-directory/src/store/resolvers.js +++ b/packages/block-directory/src/store/resolvers.js @@ -18,7 +18,7 @@ export default { try { yield fetchDownloadableBlocks( filterValue ); const results = yield apiFetch( { - path: `__experimental/blocks?search=${ filterValue }`, + path: `__experimental/block-directory/search?term=${ filterValue }`, } ); const blocks = results.map( ( result ) => mapKeys( result, ( value, key ) => { return camelCase( key ); @@ -34,7 +34,7 @@ export default { * hasInstallBlocksPermission() { try { yield apiFetch( { - path: `__experimental/blocks?search=${ '' }`, + path: `__experimental/block-directory/search?term=${ '' }`, } ); yield setInstallBlocksPermission( true ); } catch ( error ) { From 711d90858b57ef69a564b2b07ec4dd759fd14544 Mon Sep 17 00:00:00 2001 From: CK Date: Fri, 23 Aug 2019 11:40:54 +1200 Subject: [PATCH 116/122] Update comment for class. --- lib/class-wp-rest-block-directory-controller.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/class-wp-rest-block-directory-controller.php b/lib/class-wp-rest-block-directory-controller.php index f96d4cf89c471a..e9b55f3d6bd94d 100644 --- a/lib/class-wp-rest-block-directory-controller.php +++ b/lib/class-wp-rest-block-directory-controller.php @@ -1,7 +1,7 @@ Date: Fri, 23 Aug 2019 11:42:19 +1200 Subject: [PATCH 117/122] Use noop instead of empty function. --- .../src/components/downloadable-blocks-list/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-directory/src/components/downloadable-blocks-list/index.js b/packages/block-directory/src/components/downloadable-blocks-list/index.js index 557ca54c857090..769cb25ae85cbb 100644 --- a/packages/block-directory/src/components/downloadable-blocks-list/index.js +++ b/packages/block-directory/src/components/downloadable-blocks-list/index.js @@ -19,7 +19,7 @@ import DownloadableBlockListItem from '../downloadable-block-list-item'; const DOWNLOAD_ERROR_NOTICE_ID = 'block-download-error'; const INSTALL_ERROR_NOTICE_ID = 'block-install-error'; -function DownloadableBlocksList( { items, onHover = () => {}, children, downloadAndInstallBlock } ) { +function DownloadableBlocksList( { items, onHover = noop, children, downloadAndInstallBlock } ) { return ( /* * Disable reason: The `list` ARIA role is redundant but From 1f4ad26d4fbb3b97e64c404e44ab49d27625c7de Mon Sep 17 00:00:00 2001 From: CK Date: Fri, 23 Aug 2019 11:48:29 +1200 Subject: [PATCH 118/122] Rename discover blocks to downloadable blocks. --- .../downloadable-blocks-panel/index.js | 14 +++++++------- packages/block-directory/src/store/actions.js | 12 ++++++------ packages/block-directory/src/store/reducer.js | 12 ++++++------ packages/block-directory/src/store/selectors.js | 16 ++++++++-------- 4 files changed, 27 insertions(+), 27 deletions(-) diff --git a/packages/block-directory/src/components/downloadable-blocks-panel/index.js b/packages/block-directory/src/components/downloadable-blocks-panel/index.js index 180df43fd3b88c..87a39c64a74ec5 100644 --- a/packages/block-directory/src/components/downloadable-blocks-panel/index.js +++ b/packages/block-directory/src/components/downloadable-blocks-panel/index.js @@ -12,7 +12,7 @@ import { Spinner, withSpokenMessages } from '@wordpress/components'; */ import DownloadableBlocksList from '../downloadable-blocks-list'; -function DownloadableBlocksPanel( { discoverItems, onSelect, onHover, hasPermission, isLoading, isWaiting, debouncedSpeak } ) { +function DownloadableBlocksPanel( { downloadableItems, onSelect, onHover, hasPermission, isLoading, isWaiting, debouncedSpeak } ) { if ( ! hasPermission ) { debouncedSpeak( __( 'Please contact your site administrator to install new blocks.' ) ); return ( @@ -32,7 +32,7 @@ function DownloadableBlocksPanel( { discoverItems, onSelect, onHover, hasPermiss ); } - if ( ! discoverItems.length ) { + if ( ! downloadableItems.length ) { return (

        { __( 'No blocks found in your library.' ) } @@ -41,8 +41,8 @@ function DownloadableBlocksPanel( { discoverItems, onSelect, onHover, hasPermiss } const resultsFoundMessage = sprintf( - _n( 'We did find %d block available for download.', 'We did find %d blocks available.', discoverItems.length ), - discoverItems.length + _n( 'We did find %d block available for download.', 'We did find %d blocks available.', downloadableItems.length ), + downloadableItems.length ); debouncedSpeak( resultsFoundMessage ); @@ -51,7 +51,7 @@ function DownloadableBlocksPanel( { discoverItems, onSelect, onHover, hasPermiss

        { __( 'No blocks found in your library. We did find these blocks available for download:' ) }

        - + ); } @@ -66,11 +66,11 @@ export default compose( [ } = select( 'core/block-directory' ); const hasPermission = hasInstallBlocksPermission(); - const discoverItems = hasPermission ? getDownloadableBlocks( filterValue ) : []; + const downloadableItems = hasPermission ? getDownloadableBlocks( filterValue ) : []; const isLoading = isRequestingDownloadableBlocks(); return { - discoverItems, + downloadableItems, hasPermission, isLoading, }; diff --git a/packages/block-directory/src/store/actions.js b/packages/block-directory/src/store/actions.js index 77839b02739170..46bce90d2f7cb8 100644 --- a/packages/block-directory/src/store/actions.js +++ b/packages/block-directory/src/store/actions.js @@ -9,24 +9,24 @@ import { getBlockTypes } from '@wordpress/blocks'; import { apiFetch, loadAssets } from './controls'; /** - * Returns an action object used in signalling that the discover blocks have been requested and is loading. + * Returns an action object used in signalling that the downloadable blocks have been requested and is loading. * * @return {Object} Action object. */ export function fetchDownloadableBlocks() { - return { type: 'FETCH_DISCOVER_BLOCKS' }; + return { type: 'FETCH_DOWNLOADABLE_BLOCKS' }; } /** - * Returns an action object used in signalling that the discover blocks have been updated. + * Returns an action object used in signalling that the downloadable blocks have been updated. * - * @param {Array} discoverBlocks Discoverable blocks. + * @param {Array} downloadableBlocks Downloadable blocks. * @param {string} filterValue Search string. * * @return {Object} Action object. */ -export function receiveDownloadableBlocks( discoverBlocks, filterValue ) { - return { type: 'RECEIVE_DISCOVER_BLOCKS', discoverBlocks, filterValue }; +export function receiveDownloadableBlocks( downloadableBlocks, filterValue ) { + return { type: 'RECEIVE_DOWNLOADABLE_BLOCKS', downloadableBlocks, filterValue }; } /** diff --git a/packages/block-directory/src/store/reducer.js b/packages/block-directory/src/store/reducer.js index 5b9b532577a440..8dc4f3438c318f 100644 --- a/packages/block-directory/src/store/reducer.js +++ b/packages/block-directory/src/store/reducer.js @@ -4,14 +4,14 @@ import { combineReducers } from '@wordpress/data'; /** - * Reducer returning an array of discover blocks. + * Reducer returning an array of downloadable blocks. * * @param {Object} state Current state. * @param {Object} action Dispatched action. * * @return {Object} Updated state. */ -export const discoverBlocks = ( state = { +export const downloadableBlocks = ( state = { results: {}, hasPermission: true, filterValue: undefined, @@ -19,16 +19,16 @@ export const discoverBlocks = ( state = { installedBlockTypes: [], }, action ) => { switch ( action.type ) { - case 'FETCH_DISCOVER_BLOCKS' : + case 'FETCH_DOWNLOADABLE_BLOCKS' : return { ...state, isRequestingDownloadableBlocks: true, }; - case 'RECEIVE_DISCOVER_BLOCKS' : + case 'RECEIVE_DOWNLOADABLE_BLOCKS' : return { ...state, results: Object.assign( {}, state.results, { - [ action.filterValue ]: action.discoverBlocks, + [ action.filterValue ]: action.downloadableBlocks, } ), hasPermission: true, isRequestingDownloadableBlocks: false, @@ -55,5 +55,5 @@ export const discoverBlocks = ( state = { }; export default combineReducers( { - discoverBlocks, + downloadableBlocks, } ); diff --git a/packages/block-directory/src/store/selectors.js b/packages/block-directory/src/store/selectors.js index 66989dc478a022..daa8384daff758 100644 --- a/packages/block-directory/src/store/selectors.js +++ b/packages/block-directory/src/store/selectors.js @@ -4,14 +4,14 @@ import { get } from 'lodash'; /** - * Returns true if application is requesting for discover blocks. + * Returns true if application is requesting for downloable blocks. * * @param {Object} state Global application state. * - * @return {Array} Discoverable blocks + * @return {Array} Downloadable blocks */ export function isRequestingDownloadableBlocks( state ) { - return state.discoverBlocks.isRequestingDownloadableBlocks; + return state.downloadableBlocks.isRequestingDownloadableBlocks; } /** @@ -20,13 +20,13 @@ export function isRequestingDownloadableBlocks( state ) { * @param {Object} state Global application state. * @param {string} filterValue Search string. * - * @return {Array} Discoverable blocks + * @return {Array} Downloadable blocks */ export function getDownloadableBlocks( state, filterValue ) { - if ( ! state.discoverBlocks.results[ filterValue ] ) { + if ( ! state.downloadableBlocks.results[ filterValue ] ) { return []; } - return state.discoverBlocks.results[ filterValue ]; + return state.downloadableBlocks.results[ filterValue ]; } /** @@ -37,7 +37,7 @@ export function getDownloadableBlocks( state, filterValue ) { * @return {boolean} User has permission to install blocks. */ export function hasInstallBlocksPermission( state ) { - return state.discoverBlocks.hasPermission; + return state.downloadableBlocks.hasPermission; } /** @@ -48,5 +48,5 @@ export function hasInstallBlocksPermission( state ) { * @return {Array} Block type items. */ export function getInstalledBlockTypes( state ) { - return get( state, [ 'discoverBlocks', 'installedBlockTypes' ], [] ); + return get( state, [ 'downloadableBlocks', 'installedBlockTypes' ], [] ); } From 54a891c6a8367040565410d9d4ae56e93875b382 Mon Sep 17 00:00:00 2001 From: CK Date: Fri, 23 Aug 2019 11:53:06 +1200 Subject: [PATCH 119/122] Tidy up code. --- .../downloadable-block-header/index.js | 49 +++++++++---------- .../src/components/inserter/menu.js | 3 +- 2 files changed, 24 insertions(+), 28 deletions(-) diff --git a/packages/block-directory/src/components/downloadable-block-header/index.js b/packages/block-directory/src/components/downloadable-block-header/index.js index e6923b34cbc9e8..c660db683eb939 100644 --- a/packages/block-directory/src/components/downloadable-block-header/index.js +++ b/packages/block-directory/src/components/downloadable-block-header/index.js @@ -3,7 +3,6 @@ */ import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { Fragment } from '@wordpress/element'; /** * Internal dependencies @@ -13,33 +12,31 @@ import BlockRatings from '../block-ratings'; function DownloadableBlockHeader( { icon, title, rating, ratingCount, onClick } ) { return ( - -
        - { - icon.match( /\.(jpeg|jpg|gif|png)/ ) !== null ? - block icon : - - - - } - -
        - - { title } +
        + { + icon.match( /\.(jpeg|jpg|gif|png)/ ) !== null ? + block icon : + + - -
        - + } + +
        + + { title } + +
        - + +
        ); } diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 8693551975f1bb..78c489119ff10f 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -231,7 +231,7 @@ export class InserterMenu extends Component { filterValue, itemsPerCategory, filteredItems, - reusableItems, + reusableItems ), } ); @@ -365,7 +365,6 @@ export class InserterMenu extends Component { } } > { ( fills ) => { - // __experimentalInserterMenuExtension should also handle when isMenuEmpty is true ( no installed block type results are found ). if ( fills.length ) { return fills; } From 2bab6503635a7c47429b440509db91ba67b7f843 Mon Sep 17 00:00:00 2001 From: CK Date: Fri, 23 Aug 2019 11:54:51 +1200 Subject: [PATCH 120/122] Update bottom section to be footer in an article. --- .../src/components/downloadable-block-list-item/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-directory/src/components/downloadable-block-list-item/index.js b/packages/block-directory/src/components/downloadable-block-list-item/index.js index e048736697dd4a..8ba9d82ea04726 100644 --- a/packages/block-directory/src/components/downloadable-block-list-item/index.js +++ b/packages/block-directory/src/components/downloadable-block-list-item/index.js @@ -39,11 +39,11 @@ function DownloadableBlockListItem( { humanizedUpdated={ humanizedUpdated } /> -
        +
        -
        +
        • ); From 4a9c324d2c4b0ee2ada438ba5f3999f0d67fdcdf Mon Sep 17 00:00:00 2001 From: CK Date: Mon, 26 Aug 2019 13:40:22 +1200 Subject: [PATCH 121/122] Fix phpcs warning. --- lib/class-wp-rest-block-directory-controller.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/class-wp-rest-block-directory-controller.php b/lib/class-wp-rest-block-directory-controller.php index e9b55f3d6bd94d..8f65c07302fc92 100644 --- a/lib/class-wp-rest-block-directory-controller.php +++ b/lib/class-wp-rest-block-directory-controller.php @@ -147,7 +147,7 @@ public function install_block( $request ) { if ( $wp_filesystem instanceof WP_Filesystem_Base && is_wp_error( $wp_filesystem->errors ) && $wp_filesystem->errors->has_errors() ) { return WP_Error( 'unable_to_connect_to_filesystem', esc_html( $wp_filesystem->errors->get_error_message() ) ); } - return WP_Error( 'unable_to_connect_to_filesystem', __( 'Unable to connect to the filesystem. Please confirm your credentials.' ) ); + return WP_Error( 'unable_to_connect_to_filesystem', __( 'Unable to connect to the filesystem. Please confirm your credentials.', 'gutenberg' ) ); } $install_status = install_plugin_install_status( $api ); @@ -303,7 +303,7 @@ function parse_block_metadata( $plugin ) { $block->assets[] = 'https://plugins.svn.wordpress.org/' . $plugin['slug'] . $asset; } - $block->humanized_updated = human_time_diff( strtotime( $plugin['last_updated'] ), current_time( 'timestamp' ) ) . __( ' ago' ); + $block->humanized_updated = human_time_diff( strtotime( $plugin['last_updated'] ), current_time( 'timestamp' ) ) . __( ' ago', 'gutenberg' ); // TODO: calculate these values. $block->author_average_rating = null; From d1687ad3fa41ed76ebfb640a53b7a561f33fdf8c Mon Sep 17 00:00:00 2001 From: CK Date: Thu, 29 Aug 2019 10:26:48 +1200 Subject: [PATCH 122/122] Mapped author information for block directory --- ...ass-wp-rest-block-directory-controller.php | 28 +++++++++---------- .../downloadable-block-author-info/index.js | 10 +++---- .../downloadable-block-list-item/index.js | 4 +++ 3 files changed, 21 insertions(+), 21 deletions(-) diff --git a/lib/class-wp-rest-block-directory-controller.php b/lib/class-wp-rest-block-directory-controller.php index e9b55f3d6bd94d..a756283b751c74 100644 --- a/lib/class-wp-rest-block-directory-controller.php +++ b/lib/class-wp-rest-block-directory-controller.php @@ -276,25 +276,28 @@ public function get_items( $request ) { * @return WP_Error|WP_REST_Response Response object on success, or WP_Error object on failure. */ function parse_block_metadata( $plugin ) { - $block = new stdClass(); - $block->id = $plugin['slug']; + $block = new stdClass(); - // AMBIGUOUS: There might be multiple blocks. Only the first element in blocks is mapped. + // There might be multiple blocks in a plugin. Only the first block is mapped. $block_data = reset( $plugin['blocks'] ); $block->name = $block_data['name']; $block->title = $block_data['title']; - // AMBIGUOUS: Plugin's description, not description in block.json. + // Plugin's description, not description in block.json. $block->description = wp_trim_words( wp_strip_all_tags( $plugin['description'] ), 30, '...' ); - $block->rating = $plugin['rating']; - $block->rating_count = $plugin['num_ratings']; - $block->active_installs = $plugin['active_installs']; + $block->id = $plugin['slug']; + $block->rating = $plugin['rating']; + $block->rating_count = $plugin['num_ratings']; + $block->active_installs = $plugin['active_installs']; + $block->author_block_rating = $plugin['author_block_rating']; + $block->author_block_count = $plugin['author_block_count']; - // AMBIGUOUS: Plugin's author, not author in block.json. + + // Plugin's author, not author in block.json. $block->author = wp_strip_all_tags( $plugin['author'] ); - // AMBIGUOUS: Plugin's icons or icon in block.json. + // Plugin's icons or icon in block.json. $block->icon = isset( $plugin['icons']['1x'] ) ? $plugin['icons']['1x'] : 'block-default'; $block->assets = array(); @@ -303,12 +306,7 @@ function parse_block_metadata( $plugin ) { $block->assets[] = 'https://plugins.svn.wordpress.org/' . $plugin['slug'] . $asset; } - $block->humanized_updated = human_time_diff( strtotime( $plugin['last_updated'] ), current_time( 'timestamp' ) ) . __( ' ago' ); - - // TODO: calculate these values. - $block->author_average_rating = null; - $block->author_blocks_count = null; - $block->author_support_time = null; + $block->humanized_updated = human_time_diff( strtotime( $plugin['last_updated'] ), current_time( 'timestamp' ) ) . __( ' ago', 'gutenberg' ); return $block; } diff --git a/packages/block-directory/src/components/downloadable-block-author-info/index.js b/packages/block-directory/src/components/downloadable-block-author-info/index.js index 4cc76ffa9cd3b9..0761aeae67cd9a 100644 --- a/packages/block-directory/src/components/downloadable-block-author-info/index.js +++ b/packages/block-directory/src/components/downloadable-block-author-info/index.js @@ -2,18 +2,16 @@ * WordPress dependencies */ import { Fragment } from '@wordpress/element'; +import { __, _n, sprintf } from '@wordpress/i18n'; -function DownloadableBlockAuthorInfo( { author } ) { +function DownloadableBlockAuthorInfo( { author, authorBlockCount, authorBlockRating } ) { return ( - Authored by { author } + { sprintf( __( 'Authored by %s' ), author ) } - This author has X blocks, with an average rating of X.X. - - - They have an average support time of X days. + { sprintf( _n( 'This author has %d block, with an average rating of %d.', 'This author has %d blocks, with an average rating of %d.', authorBlockCount, authorBlockRating ), authorBlockCount, authorBlockRating ) } ); diff --git a/packages/block-directory/src/components/downloadable-block-list-item/index.js b/packages/block-directory/src/components/downloadable-block-list-item/index.js index 8ba9d82ea04726..c5bd8b8f0244e0 100644 --- a/packages/block-directory/src/components/downloadable-block-list-item/index.js +++ b/packages/block-directory/src/components/downloadable-block-list-item/index.js @@ -18,6 +18,8 @@ function DownloadableBlockListItem( { ratingCount, author, humanizedUpdated, + authorBlockCount, + authorBlockRating, } = item; return ( @@ -42,6 +44,8 @@ function DownloadableBlockListItem( {