From 709bd652b72baec3aca42ed000f3d729e13c64e0 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-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 + 12 files changed, 133 insertions(+), 102 deletions(-) delete mode 100644 packages/block-directory/src/components/downloadable-block-header/test/fixtures/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 79797ccb8e4ba..4a4f8f9545109 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 3e21c050c953a..ce6959cbf5e6a 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 ca6a09355a742..c6a818567b73d 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 a35935d60a973..5b5b62beeed4a 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 ? ( - { - ) : ( - - - - ) } +
    + { 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 0000000000000..12dad759e8603 --- /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 0000000000000..1810fbc328f99 --- /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 ecffeed5f6586..16a99f0c4b4cd 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 deac6f47dd087..d5a844f5b6a8e 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 c77c09efb0799..8d77a997b181b 100644 --- a/packages/block-directory/src/style.scss +++ b/packages/block-directory/src/style.scss @@ -8,4 +8,5 @@ @import "./components/downloadable-block-notice/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";