From 456c7a207d15085315edd05695ccf96643e212e8 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 28 May 2020 17:07:54 -0400 Subject: [PATCH 1/6] Block Directory: Pull block icon into a separate component --- .../downloadable-block-header/index.js | 19 ++------- .../downloadable-block-header/style.scss | 12 ------ .../test/fixtures/index.js | 4 -- .../downloadable-block-header/test/index.js | 27 +----------- .../downloadable-block-icon/index.js | 26 ++++++++++++ .../downloadable-block-icon/style.scss | 11 +++++ .../test/__snapshots__/index.js.snap | 34 +++++++++++++++ .../downloadable-block-icon/test/index.js | 41 +++++++++++++++++++ packages/block-directory/src/style.scss | 1 + 9 files changed, 117 insertions(+), 58 deletions(-) create mode 100644 packages/block-directory/src/components/downloadable-block-icon/index.js create mode 100644 packages/block-directory/src/components/downloadable-block-icon/style.scss create mode 100644 packages/block-directory/src/components/downloadable-block-icon/test/__snapshots__/index.js.snap create mode 100644 packages/block-directory/src/components/downloadable-block-icon/test/index.js 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 a99220f729bf94..b392eda099f190 100644 --- a/packages/block-directory/src/components/downloadable-block-header/index.js +++ b/packages/block-directory/src/components/downloadable-block-header/index.js @@ -1,15 +1,15 @@ /** * WordPress dependencies */ -import { __, sprintf } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; /** * Internal dependencies */ -import { BlockIcon } from '@wordpress/block-editor'; import BlockRatings from '../block-ratings'; +import DownloadableBlockIcon from '../downloadable-block-icon'; export function DownloadableBlockHeader( { icon, @@ -21,20 +21,7 @@ export function DownloadableBlockHeader( { } ) { return (
- { icon.match( /\.(jpeg|jpg|gif|png)(?:\?.*)?$/ ) !== null ? ( - { - ) : ( - - - - ) } +

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 e073ef1c5472a2..37fe76f2183195 100644 --- a/packages/block-directory/src/components/downloadable-block-header/style.scss +++ b/packages/block-directory/src/components/downloadable-block-header/style.scss @@ -2,18 +2,6 @@ display: flex; flex-grow: 1; - .block-editor-block-icon { - width: $button-size; - height: $button-size; - font-size: $button-size; - background-color: $light-gray-300; - } - - img { - width: $button-size; - height: $button-size; - } - .block-directory-downloadable-block-header__column { display: flex; flex-direction: column; diff --git a/packages/block-directory/src/components/downloadable-block-header/test/fixtures/index.js b/packages/block-directory/src/components/downloadable-block-header/test/fixtures/index.js index db09e7df68d30a..5c3f6cc9f234ab 100644 --- a/packages/block-directory/src/components/downloadable-block-header/test/fixtures/index.js +++ b/packages/block-directory/src/components/downloadable-block-header/test/fixtures/index.js @@ -18,7 +18,3 @@ const pluginBase = { }; export const pluginWithIcon = { ...pluginBase, icon: 'block-default' }; -export const pluginWithImg = { - ...pluginBase, - icon: 'https://ps.w.org/listicles/assets/icon-128x128.png', -}; diff --git a/packages/block-directory/src/components/downloadable-block-header/test/index.js b/packages/block-directory/src/components/downloadable-block-header/test/index.js index 3bc26f312e9bc5..e23db4dfe84169 100644 --- a/packages/block-directory/src/components/downloadable-block-header/test/index.js +++ b/packages/block-directory/src/components/downloadable-block-header/test/index.js @@ -6,14 +6,13 @@ import { shallow } from 'enzyme'; /** * WordPress dependencies */ -import { BlockIcon } from '@wordpress/block-editor'; import { Button } from '@wordpress/components'; /** * Internal dependencies */ import { DownloadableBlockHeader } from '../index'; -import { pluginWithImg, pluginWithIcon } from './fixtures'; +import { pluginWithIcon } from './fixtures'; const getContainer = ( { icon, title, rating, ratingCount }, @@ -33,30 +32,6 @@ const getContainer = ( }; describe( 'DownloadableBlockHeader', () => { - describe( 'icon rendering', () => { - test( 'should render an tag', () => { - const wrapper = getContainer( pluginWithImg ); - expect( wrapper.find( 'img' ).prop( 'src' ) ).toEqual( - pluginWithImg.icon - ); - } ); - - test( 'should render an tag if icon URL has query string', () => { - const iconURLwithQueryString = - pluginWithImg.icon + '?rev=2011672&test=234234'; - const plugin = { ...pluginWithImg, icon: iconURLwithQueryString }; - const wrapper = getContainer( plugin ); - expect( wrapper.find( 'img' ).prop( 'src' ) ).toEqual( - plugin.icon - ); - } ); - - test( 'should render a component', () => { - const wrapper = getContainer( pluginWithIcon ); - expect( wrapper.find( BlockIcon ) ).toHaveLength( 1 ); - } ); - } ); - describe( 'user interaction', () => { test( 'should trigger the onClick function', () => { const onClickMock = jest.fn(); diff --git a/packages/block-directory/src/components/downloadable-block-icon/index.js b/packages/block-directory/src/components/downloadable-block-icon/index.js new file mode 100644 index 00000000000000..e2ca57c735977d --- /dev/null +++ b/packages/block-directory/src/components/downloadable-block-icon/index.js @@ -0,0 +1,26 @@ +/** + * WordPress dependencies + */ +import { __, sprintf } from '@wordpress/i18n'; +import { BlockIcon } from '@wordpress/block-editor'; + +function DownloadableBlockIcon( { icon, title } ) { + return ( +
+ { icon.match( /\.(jpeg|jpg|gif|png)(?:\?.*)?$/ ) !== null ? ( + { + ) : ( + + ) } +
+ ); +} + +export default DownloadableBlockIcon; diff --git a/packages/block-directory/src/components/downloadable-block-icon/style.scss b/packages/block-directory/src/components/downloadable-block-icon/style.scss new file mode 100644 index 00000000000000..12dad759e8603b --- /dev/null +++ b/packages/block-directory/src/components/downloadable-block-icon/style.scss @@ -0,0 +1,11 @@ +.block-directory-downloadable-block-icon { + width: $button-size; + height: $button-size; + + .block-editor-block-icon { + width: $button-size; + height: $button-size; + font-size: $button-size; + background-color: $light-gray-300; + } +} diff --git a/packages/block-directory/src/components/downloadable-block-icon/test/__snapshots__/index.js.snap b/packages/block-directory/src/components/downloadable-block-icon/test/__snapshots__/index.js.snap new file mode 100644 index 00000000000000..00929ab18290d1 --- /dev/null +++ b/packages/block-directory/src/components/downloadable-block-icon/test/__snapshots__/index.js.snap @@ -0,0 +1,34 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Downloadable Block Icon icon rendering should render a component 1`] = ` +
+ +
+`; + +exports[`Downloadable Block Icon icon rendering should render an tag 1`] = ` +
+ Block Name block icon +
+`; + +exports[`Downloadable Block Icon icon rendering should render an tag if icon URL has query string 1`] = ` +
+ Block Name block icon +
+`; diff --git a/packages/block-directory/src/components/downloadable-block-icon/test/index.js b/packages/block-directory/src/components/downloadable-block-icon/test/index.js new file mode 100644 index 00000000000000..063f4a49fddab9 --- /dev/null +++ b/packages/block-directory/src/components/downloadable-block-icon/test/index.js @@ -0,0 +1,41 @@ +/** + * External dependencies + */ +import { shallow } from 'enzyme'; + +/** + * Internal dependencies + */ +import DownloadableBlockIcon from '../index'; + +const IMAGE_URL = 'https://ps.w.org/listicles/assets/icon-128x128.png'; + +describe( 'Downloadable Block Icon', () => { + describe( 'icon rendering', () => { + test( 'should render an tag', () => { + const wrapper = shallow( + + ); + expect( wrapper ).toMatchSnapshot(); + } ); + + test( 'should render an tag if icon URL has query string', () => { + const wrapper = shallow( + + ); + + expect( wrapper ).toMatchSnapshot(); + } ); + + test( 'should render a component', () => { + const wrapper = shallow( + + ); + + expect( wrapper ).toMatchSnapshot(); + } ); + } ); +} ); diff --git a/packages/block-directory/src/style.scss b/packages/block-directory/src/style.scss index e0286f8fc42ae0..b529541bc40649 100644 --- a/packages/block-directory/src/style.scss +++ b/packages/block-directory/src/style.scss @@ -1,4 +1,5 @@ @import "./components/downloadable-block-header/style.scss"; +@import "./components/downloadable-block-icon/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"; From a94bc1a1ab6c401b48e6b1d04c9f08f839986c5e Mon Sep 17 00:00:00 2001 From: dufresnesteven Date: Fri, 15 May 2020 14:12:45 +0900 Subject: [PATCH 2/6] Add a list of installed blocks to the pre-publish sidebar --- packages/block-directory/package.json | 1 + .../src/components/compact-list/index.js | 35 ++++++++++++++ .../src/components/compact-list/style.scss | 28 +++++++++++ .../index.js | 46 +++++++++++++++++++ .../style.scss | 3 ++ packages/block-directory/src/plugins/index.js | 8 +++- packages/block-directory/src/store/actions.js | 9 ++-- .../block-directory/src/store/test/actions.js | 5 +- packages/block-directory/src/style.scss | 8 ++-- 9 files changed, 131 insertions(+), 12 deletions(-) create mode 100644 packages/block-directory/src/components/compact-list/index.js create mode 100644 packages/block-directory/src/components/compact-list/style.scss create mode 100644 packages/block-directory/src/plugins/downloadable-block-pre-publish-panel/index.js create mode 100644 packages/block-directory/src/plugins/downloadable-block-pre-publish-panel/style.scss diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json index d36ed1b6de3e40..0bb35a3cda8e51 100644 --- a/packages/block-directory/package.json +++ b/packages/block-directory/package.json @@ -32,6 +32,7 @@ "@wordpress/compose": "file:../compose", "@wordpress/data": "file:../data", "@wordpress/data-controls": "file:../data-controls", + "@wordpress/edit-post": "file:../edit-post", "@wordpress/element": "file:../element", "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", diff --git a/packages/block-directory/src/components/compact-list/index.js b/packages/block-directory/src/components/compact-list/index.js new file mode 100644 index 00000000000000..cffa1287cd8455 --- /dev/null +++ b/packages/block-directory/src/components/compact-list/index.js @@ -0,0 +1,35 @@ +/** + * WordPress dependencies + */ +import { __, sprintf } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import DownloadableBlockIcon from '../downloadable-block-icon'; + +export default function CompactList( { items } ) { + if ( ! items.length ) { + return null; + } + + return ( +
    + { items.map( ( { icon, id, title, author } ) => ( +
  • + + +
    +
    + { title } +
    +
    + { /* translators: %s: Name of the block author. */ + sprintf( __( 'By %s' ), author ) } +
    +
    +
    • + ) ) } +
+ ); +} diff --git a/packages/block-directory/src/components/compact-list/style.scss b/packages/block-directory/src/components/compact-list/style.scss new file mode 100644 index 00000000000000..4d017604af009a --- /dev/null +++ b/packages/block-directory/src/components/compact-list/style.scss @@ -0,0 +1,28 @@ +.block-directory-compact-list { + margin: 0; + list-style: none; +} + +.block-directory-compact-list__item { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: $grid-unit-20; + + &:last-child { + margin-bottom: 0; + } +} + +.block-directory-compact-list__item-details { + margin-left: $grid-unit-10; +} + +.block-directory-compact-list__item-title { + font-weight: 500; +} + +.block-directory-compact-list__item-author { + color: $dark-gray-500; + font-size: 11px; +} diff --git a/packages/block-directory/src/plugins/downloadable-block-pre-publish-panel/index.js b/packages/block-directory/src/plugins/downloadable-block-pre-publish-panel/index.js new file mode 100644 index 00000000000000..dd55284463e2a1 --- /dev/null +++ b/packages/block-directory/src/plugins/downloadable-block-pre-publish-panel/index.js @@ -0,0 +1,46 @@ +/** + * WordPress dependencies + */ +import { _n, sprintf } from '@wordpress/i18n'; +import { PluginPrePublishPanel } from '@wordpress/edit-post'; +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import CompactList from '../../components/compact-list'; + +export default function DownloadableBlockPrePublishPanel() { + const newBlockTypes = useSelect( ( select ) => + select( 'core/block-directory' ).getInstalledBlockTypes() + ); + + if ( ! newBlockTypes.length ) { + return null; + } + + return ( + +

+ { _n( + 'The following block has been added to your site.', + 'The following blocks have been added to your site.', + newBlockTypes.length + ) } +

+ + + ); +} diff --git a/packages/block-directory/src/plugins/downloadable-block-pre-publish-panel/style.scss b/packages/block-directory/src/plugins/downloadable-block-pre-publish-panel/style.scss new file mode 100644 index 00000000000000..ad8df4ff4c627b --- /dev/null +++ b/packages/block-directory/src/plugins/downloadable-block-pre-publish-panel/style.scss @@ -0,0 +1,3 @@ +.downloadable-block-pre-publish-panel__copy { + margin-top: 0; +} diff --git a/packages/block-directory/src/plugins/index.js b/packages/block-directory/src/plugins/index.js index 917b8567c2d87f..b02ae5f0151584 100644 --- a/packages/block-directory/src/plugins/index.js +++ b/packages/block-directory/src/plugins/index.js @@ -7,9 +7,15 @@ import { registerPlugin } from '@wordpress/plugins'; * Internal dependencies */ import InserterMenuDownloadableBlocksPanel from './inserter-menu-downloadable-blocks-panel'; +import DownloadableBlockPrePublishPanel from './downloadable-block-pre-publish-panel'; registerPlugin( 'block-directory', { render() { - return ; + return ( + <> + + + + ); }, } ); diff --git a/packages/block-directory/src/store/actions.js b/packages/block-directory/src/store/actions.js index d5c0f7c2b9dfa2..8145ef29562798 100644 --- a/packages/block-directory/src/store/actions.js +++ b/packages/block-directory/src/store/actions.js @@ -53,11 +53,12 @@ export function setInstallBlocksPermission( hasPermission ) { /** * Action triggered to install a block plugin. * - * @param {Object} item The block item returned by search. + * @param {Object} block The block item returned by search. * * @return {boolean} Whether the block was successfully installed & loaded. */ -export function* installBlockType( { id, name, assets } ) { +export function* installBlockType( block ) { + const { id, assets } = block; let success = false; yield clearErrorNotice( id ); try { @@ -68,14 +69,14 @@ export function* installBlockType( { id, name, assets } ) { const response = yield apiFetch( { path: '__experimental/block-directory/install', data: { - slug: id, + slug: block.id, }, method: 'POST', } ); if ( response.success !== true ) { throw new Error( __( 'Unable to install this block.' ) ); } - yield addInstalledBlockType( { id, name } ); + yield addInstalledBlockType( block ); yield loadAssets( assets ); const registeredBlocks = yield select( 'core/blocks', 'getBlockTypes' ); diff --git a/packages/block-directory/src/store/test/actions.js b/packages/block-directory/src/store/test/actions.js index ce5f5c1eae2811..dc2789d955f6f7 100644 --- a/packages/block-directory/src/store/test/actions.js +++ b/packages/block-directory/src/store/test/actions.js @@ -31,10 +31,7 @@ describe( 'actions', () => { expect( generator.next( { success: true } ).value ).toEqual( { type: 'ADD_INSTALLED_BLOCK_TYPE', - item: { - id: item.id, - name: item.name, - }, + item, } ); expect( generator.next().value ).toEqual( { diff --git a/packages/block-directory/src/style.scss b/packages/block-directory/src/style.scss index b529541bc40649..23dd94de9ec485 100644 --- a/packages/block-directory/src/style.scss +++ b/packages/block-directory/src/style.scss @@ -1,9 +1,11 @@ +@import "./components/block-ratings/style.scss"; +@import "./components/compact-list/style.scss"; +@import "./components/downloadable-block-author-info/style.scss"; @import "./components/downloadable-block-header/style.scss"; @import "./components/downloadable-block-icon/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-block-notice/style.scss"; @import "./components/downloadable-blocks-list/style.scss"; @import "./components/downloadable-blocks-panel/style.scss"; -@import "./components/block-ratings/style.scss"; -@import "./components/downloadable-block-notice/style.scss"; +@import "./plugins/downloadable-block-pre-publish-panel/style.scss"; From 79a5dfbc165e79053602b4e16d14b74e12fc1972 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Fri, 29 May 2020 11:59:00 -0400 Subject: [PATCH 3/6] Update package-lock --- package-lock.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package-lock.json b/package-lock.json index de73f17229c637..81b3bbec540f92 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9859,6 +9859,7 @@ "@wordpress/compose": "file:packages/compose", "@wordpress/data": "file:packages/data", "@wordpress/data-controls": "file:packages/data-controls", + "@wordpress/edit-post": "file:packages/edit-post", "@wordpress/element": "file:packages/element", "@wordpress/i18n": "file:packages/i18n", "@wordpress/icons": "file:packages/icons", From c064caff5458ddb5f655211e14fa082487526e5c Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Fri, 29 May 2020 12:00:34 -0400 Subject: [PATCH 4/6] Rename panel --- .../plugins/downloadable-block-pre-publish-panel/style.scss | 3 --- packages/block-directory/src/plugins/index.js | 4 ++-- .../index.js | 4 ++-- .../src/plugins/installed-blocks-pre-publish-panel/style.scss | 3 +++ 4 files changed, 7 insertions(+), 7 deletions(-) delete mode 100644 packages/block-directory/src/plugins/downloadable-block-pre-publish-panel/style.scss rename packages/block-directory/src/plugins/{downloadable-block-pre-publish-panel => installed-blocks-pre-publish-panel}/index.js (88%) create mode 100644 packages/block-directory/src/plugins/installed-blocks-pre-publish-panel/style.scss diff --git a/packages/block-directory/src/plugins/downloadable-block-pre-publish-panel/style.scss b/packages/block-directory/src/plugins/downloadable-block-pre-publish-panel/style.scss deleted file mode 100644 index ad8df4ff4c627b..00000000000000 --- a/packages/block-directory/src/plugins/downloadable-block-pre-publish-panel/style.scss +++ /dev/null @@ -1,3 +0,0 @@ -.downloadable-block-pre-publish-panel__copy { - margin-top: 0; -} diff --git a/packages/block-directory/src/plugins/index.js b/packages/block-directory/src/plugins/index.js index b02ae5f0151584..f1e013a8d0ddee 100644 --- a/packages/block-directory/src/plugins/index.js +++ b/packages/block-directory/src/plugins/index.js @@ -7,14 +7,14 @@ import { registerPlugin } from '@wordpress/plugins'; * Internal dependencies */ import InserterMenuDownloadableBlocksPanel from './inserter-menu-downloadable-blocks-panel'; -import DownloadableBlockPrePublishPanel from './downloadable-block-pre-publish-panel'; +import InstalledBlocksPrePublishPanel from './installed-blocks-pre-publish-panel'; registerPlugin( 'block-directory', { render() { return ( <> - + ); }, diff --git a/packages/block-directory/src/plugins/downloadable-block-pre-publish-panel/index.js b/packages/block-directory/src/plugins/installed-blocks-pre-publish-panel/index.js similarity index 88% rename from packages/block-directory/src/plugins/downloadable-block-pre-publish-panel/index.js rename to packages/block-directory/src/plugins/installed-blocks-pre-publish-panel/index.js index dd55284463e2a1..0b32c1ee29bc62 100644 --- a/packages/block-directory/src/plugins/downloadable-block-pre-publish-panel/index.js +++ b/packages/block-directory/src/plugins/installed-blocks-pre-publish-panel/index.js @@ -10,7 +10,7 @@ import { useSelect } from '@wordpress/data'; */ import CompactList from '../../components/compact-list'; -export default function DownloadableBlockPrePublishPanel() { +export default function InstalledBlocksPrePublishPanel() { const newBlockTypes = useSelect( ( select ) => select( 'core/block-directory' ).getInstalledBlockTypes() ); @@ -33,7 +33,7 @@ export default function DownloadableBlockPrePublishPanel() { ) } initialOpen={ true } > -

+

{ _n( 'The following block has been added to your site.', 'The following blocks have been added to your site.', diff --git a/packages/block-directory/src/plugins/installed-blocks-pre-publish-panel/style.scss b/packages/block-directory/src/plugins/installed-blocks-pre-publish-panel/style.scss new file mode 100644 index 00000000000000..3b3e701f9ce53e --- /dev/null +++ b/packages/block-directory/src/plugins/installed-blocks-pre-publish-panel/style.scss @@ -0,0 +1,3 @@ +.installed-blocks-pre-publish-panel__copy { + margin-top: 0; +} From c3314db373d0057518bf5e71ff28ec0046d51172 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Fri, 29 May 2020 12:20:16 -0400 Subject: [PATCH 5/6] Fix style import --- packages/block-directory/src/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-directory/src/style.scss b/packages/block-directory/src/style.scss index 23dd94de9ec485..82cc67442872a4 100644 --- a/packages/block-directory/src/style.scss +++ b/packages/block-directory/src/style.scss @@ -8,4 +8,4 @@ @import "./components/downloadable-block-notice/style.scss"; @import "./components/downloadable-blocks-list/style.scss"; @import "./components/downloadable-blocks-panel/style.scss"; -@import "./plugins/downloadable-block-pre-publish-panel/style.scss"; +@import "./plugins/installed-blocks-pre-publish-panel/style.scss"; From b4d338bb39ed98daf7088418cda9fad8120d33f4 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Fri, 29 May 2020 12:57:01 -0400 Subject: [PATCH 6/6] Fix lint issue --- .../block-directory/src/components/compact-list/index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/block-directory/src/components/compact-list/index.js b/packages/block-directory/src/components/compact-list/index.js index cffa1287cd8455..e3ef3b2ba797d1 100644 --- a/packages/block-directory/src/components/compact-list/index.js +++ b/packages/block-directory/src/components/compact-list/index.js @@ -24,8 +24,11 @@ export default function CompactList( { items } ) { { title }

- { /* translators: %s: Name of the block author. */ - sprintf( __( 'By %s' ), author ) } + { sprintf( + /* translators: %s: Name of the block author. */ + __( 'By %s' ), + author + ) }