From 14e212af7939fd821e7b851f417c927c5ad4ef41 Mon Sep 17 00:00:00 2001 From: dufresnesteven Date: Mon, 18 May 2020 15:00:38 +0900 Subject: [PATCH] Move icon into its own component and user it in compact list. --- .../index.js | 22 ++++++-- .../style.scss | 13 ++++- .../downloadable-block-compact-list/index.js | 27 +++------- .../downloadable-block-header/index.js | 19 ++----- .../downloadable-block-header/style.scss | 12 ----- .../test/fixtures/index.js | 24 --------- .../downloadable-block-header/test/index.js | 53 ------------------- .../downloadable-block-icon/index.js | 26 +++++++++ .../downloadable-block-icon/style.scss | 11 ++++ .../downloadable-block-icon/test/index.js | 53 +++++++++++++++++++ .../index.js | 19 +------ packages/block-directory/src/store/actions.js | 8 +-- packages/block-directory/src/style.scss | 1 + 13 files changed, 133 insertions(+), 155 deletions(-) delete mode 100644 packages/block-directory/src/components/downloadable-block-header/test/fixtures/index.js delete mode 100644 packages/block-directory/src/components/downloadable-block-header/test/index.js 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/index.js diff --git a/packages/block-directory/src/components/downloadable-block-compact-list-item/index.js b/packages/block-directory/src/components/downloadable-block-compact-list-item/index.js index 79797ccb8e4ba6..4a4f8f95451092 100644 --- a/packages/block-directory/src/components/downloadable-block-compact-list-item/index.js +++ b/packages/block-directory/src/components/downloadable-block-compact-list-item/index.js @@ -1,17 +1,29 @@ /** * WordPress dependencies */ -import { BlockIcon } from '@wordpress/block-editor'; +import { sprintf } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ + +import DownloadableBlockIcon from '../downloadable-block-icon'; function DownloadableBlockCompactListItem( { item } ) { - const { icon, title } = item; + const { icon, title, author } = item; return (
  • - + -
    - { title } +
    +
    + { title } +
    +
    + { /* translators: %s: Name of the block author. */ + sprintf( 'By %s', author ) } +
    • ); diff --git a/packages/block-directory/src/components/downloadable-block-compact-list-item/style.scss b/packages/block-directory/src/components/downloadable-block-compact-list-item/style.scss index 3e21c050c953ad..ce6959cbf5e6a1 100644 --- a/packages/block-directory/src/components/downloadable-block-compact-list-item/style.scss +++ b/packages/block-directory/src/components/downloadable-block-compact-list-item/style.scss @@ -2,13 +2,22 @@ display: flex; flex-direction: row; align-items: center; - margin-bottom: 12px; + margin-bottom: $grid-unit-20; } .block-directory-downloadable-block-compact-list-item:last-child { margin-bottom: 0; } -.block-directory-downloadable-block-compact-list-item__title { +.block-directory-downloadable-block-compact-list-item__details { margin-left: 8px; } + +.block-directory-downloadable-block-compact-list-item__title { + font-weight: 500; +} + +.block-directory-downloadable-block-compact-list-item__author { + color: $dark-gray-500; + font-size: 11px; +} diff --git a/packages/block-directory/src/components/downloadable-block-compact-list/index.js b/packages/block-directory/src/components/downloadable-block-compact-list/index.js index ca6a09355a742b..c6a818567b73db 100644 --- a/packages/block-directory/src/components/downloadable-block-compact-list/index.js +++ b/packages/block-directory/src/components/downloadable-block-compact-list/index.js @@ -1,8 +1,3 @@ -/** - * WordPress dependencies - */ -import { getBlockTypes } from '@wordpress/blocks'; - /** * Internal dependencies */ @@ -13,24 +8,14 @@ function DownloadableBlockCompactList( { items } ) { return null; } - const blockTypes = getBlockTypes(); - return ( ); } 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 0c37daef7bd65f..0b0011b832ad88 100644 --- a/packages/block-directory/src/components/downloadable-block-header/index.js +++ b/packages/block-directory/src/components/downloadable-block-header/index.js @@ -2,13 +2,13 @@ * WordPress dependencies */ import { Button } from '@wordpress/components'; -import { __, sprintf } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { BlockIcon } from '@wordpress/block-editor'; import BlockRatings from '../block-ratings'; +import DownloadableBlockIcon from '../downloadable-block-icon'; function DownloadableBlockHeader( { icon, @@ -19,20 +19,7 @@ function DownloadableBlockHeader( { } ) { return (
    - { icon.match( /\.(jpeg|jpg|gif|png)(?:\?.*)?$/ ) !== null ? ( - { - ) : ( - - - - ) } +
    { - return shallow( - {} } - title={ title } - rating={ rating } - ratingCount={ ratingCount } - /> - ); -}; - -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 ); - } ); - } ); -} ); 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/index.js b/packages/block-directory/src/components/downloadable-block-icon/test/index.js new file mode 100644 index 00000000000000..1810fbc328f995 --- /dev/null +++ b/packages/block-directory/src/components/downloadable-block-icon/test/index.js @@ -0,0 +1,53 @@ +/** + * External dependencies + */ +import { shallow } from 'enzyme'; + +/** + * WordPress dependencies + */ +import { BlockIcon } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import DownloadableBlockIcon from '../index'; + +const getContainer = ( { icon, title } ) => { + return shallow( ); +}; + +const IMAGE_URL = 'https://ps.w.org/listicles/assets/icon-128x128.png'; +const ICON_SLUG = 'default'; + +describe( 'Downloadable Block Icon', () => { + describe( 'icon rendering', () => { + test( 'should render an tag', () => { + const wrapper = getContainer( { + icon: IMAGE_URL, + title: 'Block Name', + } ); + expect( wrapper.find( 'img' ).prop( 'src' ) ).toEqual( IMAGE_URL ); + } ); + + test( 'should render an tag if icon URL has query string', () => { + const iconURLwithQueryString = + IMAGE_URL + '?rev=2011672&test=234234'; + const wrapper = getContainer( { + icon: iconURLwithQueryString, + title: 'Block Name', + } ); + expect( wrapper.find( 'img' ).prop( 'src' ) ).toEqual( + iconURLwithQueryString + ); + } ); + + test( 'should render a component', () => { + const wrapper = getContainer( { + icon: ICON_SLUG, + title: 'Block Name', + } ); + expect( wrapper.find( BlockIcon ) ).toHaveLength( 1 ); + } ); + } ); +} ); 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 index ecffeed5f65862..16a99f0c4b4cd7 100644 --- 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 @@ -18,10 +18,7 @@ import { PluginPrePublishPanel } from '@wordpress/edit-post'; */ import DownloadableBlockCompactList from '../../components/downloadable-block-compact-list'; -const DownloadableBlockPrePublishPanel = ( { - usedNewBlocks, - unusedNewBlocks, -} ) => { +const DownloadableBlockPrePublishPanel = ( { usedNewBlocks } ) => { if ( ! usedNewBlocks.length ) { return null; } @@ -43,19 +40,6 @@ const DownloadableBlockPrePublishPanel = ( { { __( 'The following blocks have been added to your site:' ) }

    - { unusedNewBlocks.length > 0 && ( -

    - { sprintf( - // translators: %d: number of unused blocks (number). - _n( - 'Removing %d unused block', - 'Removing %d unused blocks', - unusedNewBlocks.length - ), - unusedNewBlocks.length - ) } -

    - ) } ); }; @@ -78,7 +62,6 @@ export default compose( [ blockToUninstall, 'name' ), - unusedNewBlocks: blockToUninstall, }; } ), ] )( DownloadableBlockPrePublishPanel ); diff --git a/packages/block-directory/src/store/actions.js b/packages/block-directory/src/store/actions.js index 09ba6381b59ae0..7fadc11a65b73d 100644 --- a/packages/block-directory/src/store/actions.js +++ b/packages/block-directory/src/store/actions.js @@ -72,24 +72,24 @@ export function* downloadBlock( item, onSuccess, onError ) { /** * Action triggered to install a block plugin. * - * @param {string} item The block item returned by search. + * @param {string} block 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( { id, name }, onSuccess, onError ) { +export function* installBlock( block, onSuccess, onError ) { try { const response = yield apiFetch( { path: '__experimental/block-directory/install', data: { - slug: id, + slug: block.id, }, method: 'POST', } ); if ( response.success === false ) { throw new Error( response.errorMessage ); } - yield addInstalledBlockType( { id, name } ); + yield addInstalledBlockType( block ); onSuccess(); } catch ( error ) { onError( error ); diff --git a/packages/block-directory/src/style.scss b/packages/block-directory/src/style.scss index aa89931afc156c..a35928cbe14b13 100644 --- a/packages/block-directory/src/style.scss +++ b/packages/block-directory/src/style.scss @@ -7,4 +7,5 @@ @import "./components/block-ratings/style.scss"; @import "./components/downloadable-block-compact-list/style.scss"; @import "./components/downloadable-block-compact-list-item/style.scss"; +@import "./components/downloadable-block-icon/style.scss"; @import "./plugins/downloadable-block-pre-publish-panel/style.scss";