Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use new block icons in media placeholders #9646

Closed
wants to merge 2 commits into from
Closed

Use new block icons in media placeholders #9646

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
91ef1b3
Use new block icons in media placeholders
ZebulanStanphill Sep 5, 2018
7f7e1a3
Change method of using icons in edit.js files
ZebulanStanphill Sep 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion packages/block-library/src/audio/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,19 @@ import {
import { Component, Fragment } from '@wordpress/element';
import {
BlockControls,
BlockIcon,
InspectorControls,
MediaPlaceholder,
RichText,
mediaUpload,
} from '@wordpress/editor';
import { getBlobByURL } from '@wordpress/blob';

/**
* Internal dependencies
*/
import { icon } from './index';

class AudioEdit extends Component {
constructor() {
super( ...arguments );
Expand Down Expand Up @@ -100,7 +106,7 @@ class AudioEdit extends Component {
if ( editing ) {
return (
<MediaPlaceholder
icon="media-audio"
icon=<BlockIcon icon={ icon } />
labels={ {
title: __( 'Audio' ),
name: __( 'an audio' ),
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/audio/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,3 +95,5 @@ export const settings = {
);
},
};

export const icon = settings.icon;
31 changes: 18 additions & 13 deletions packages/block-library/src/audio/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,25 @@ exports[`core/audio block edit matches snapshot 1`] = `
<div
class="components-placeholder__label"
>
<svg
aria-hidden="true"
class="dashicon dashicons-media-audio"
focusable="false"
height="20"
role="img"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
<div
class="editor-block-icon"
>
<path
d="M12 2l4 4v12H4V2h8zm0 4h3l-3-3v3zm1 7.26V8.09c0-.11-.04-.21-.12-.29-.07-.08-.16-.11-.27-.1 0 0-3.97.71-4.25.78C8.07 8.54 8 8.8 8 9v3.37c-.2-.09-.42-.07-.6-.07-.38 0-.7.13-.96.39-.26.27-.4.58-.4.96 0 .37.14.69.4.95.26.27.58.4.96.4.34 0 .7-.04.96-.26.26-.23.64-.65.64-1.12V10.3l3-.6V12c-.67-.2-1.17.04-1.44.31-.26.26-.39.58-.39.95 0 .38.13.69.39.96.27.26.71.39 1.08.39.38 0 .7-.13.96-.39.26-.27.4-.58.4-.96z"
/>
</svg>
<svg
aria-hidden="true"
focusable="false"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0,0h24v24H0V0z"
fill="none"
/>
<path
d="m12 3l0.01 10.55c-0.59-0.34-1.27-0.55-2-0.55-2.22 0-4.01 1.79-4.01 4s1.79 4 4.01 4 3.99-1.79 3.99-4v-10h4v-4h-6zm-1.99 16c-1.1 0-2-0.9-2-2s0.9-2 2-2 2 0.9 2 2-0.9 2-2 2z"
/>
</svg>
</div>
Audio
</div>
<div
Expand Down
8 changes: 5 additions & 3 deletions packages/block-library/src/cover-image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { __ } from '@wordpress/i18n';
import { createBlock } from '@wordpress/blocks';
import {
BlockControls,
BlockIcon,
InspectorControls,
BlockAlignmentToolbar,
MediaPlaceholder,
Expand Down Expand Up @@ -54,12 +55,14 @@ const blockAttributes = {

export const name = 'core/cover-image';

const icon = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 4h7V2H4c-1.1 0-2 .9-2 2v7h2V4zm6 9l-4 5h12l-3-4-2.03 2.71L10 13zm7-4.5c0-.83-.67-1.5-1.5-1.5S14 7.67 14 8.5s.67 1.5 1.5 1.5S17 9.33 17 8.5zM20 2h-7v2h7v7h2V4c0-1.1-.9-2-2-2zm0 18h-7v2h7c1.1 0 2-.9 2-2v-7h-2v7zM4 13H2v7c0 1.1.9 2 2 2h7v-2H4v-7z" /><path d="M0 0h24v24H0z" fill="none" /></svg>;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ZebulanStanphill I think you missed flipping this one back :)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@chrisvanpatten No, that was intentional, because since cover-image does not have a separate edit.js, I was not sure if I could export settings.icon and then reference it from within the definition of settings itself. Actually, cover-image was part of the reason why I did my initial approach.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I considered splitting the edit function of cover-image into a separate file, but I decided that was out-of-scope for this PR. What do you think I should do?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ZebulanStanphill Ah, I see now. I think it makes sense to split it out but it might be worth another reviewer jumping in to give this a sanity check before going too far down that path.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@chrisvanpatten This PR has some merge conflicts currently. I have created a PR to split the Cover Image edit function into its file: #10582. Once that is merged, I'll rebase or replace this PR.


export const settings = {
title: __( 'Cover Image' ),

description: __( 'Add a full-width image, and layer text over it — great for headers.' ),

icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 4h7V2H4c-1.1 0-2 .9-2 2v7h2V4zm6 9l-4 5h12l-3-4-2.03 2.71L10 13zm7-4.5c0-.83-.67-1.5-1.5-1.5S14 7.67 14 8.5s.67 1.5 1.5 1.5S17 9.33 17 8.5zM20 2h-7v2h7v7h2V4c0-1.1-.9-2-2-2zm0 18h-7v2h7c1.1 0 2-.9 2-2v-7h-2v7zM4 13H2v7c0 1.1.9 2 2 2h7v-2H4v-7z" /><path d="M0 0h24v24H0z" fill="none" /></svg>,
icon,

category: 'common',

Expand Down Expand Up @@ -194,7 +197,6 @@ export const settings = {

if ( ! url ) {
const hasTitle = ! isEmpty( title );
const icon = hasTitle ? undefined : 'format-image';
const label = hasTitle ? (
<RichText
tagName="h2"
Expand All @@ -208,7 +210,7 @@ export const settings = {
<Fragment>
{ controls }
<MediaPlaceholder
icon={ icon }
icon={ hasTitle ? undefined : <BlockIcon icon={ icon } /> }
className={ className }
labels={ {
title: label,
Expand Down
31 changes: 18 additions & 13 deletions packages/block-library/src/cover-image/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,25 @@ exports[`core/cover-image block edit matches snapshot 1`] = `
<div
class="components-placeholder__label"
>
<svg
aria-hidden="true"
class="dashicon dashicons-format-image"
focusable="false"
height="20"
role="img"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
<div
class="editor-block-icon"
>
<path
d="M2.25 1h15.5c.69 0 1.25.56 1.25 1.25v15.5c0 .69-.56 1.25-1.25 1.25H2.25C1.56 19 1 18.44 1 17.75V2.25C1 1.56 1.56 1 2.25 1zM17 17V3H3v14h14zM10 6c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm3 5s0-6 3-6v10c0 .55-.45 1-1 1H5c-.55 0-1-.45-1-1V8c2 0 3 4 3 4s1-3 3-3 3 2 3 2z"
/>
</svg>
<svg
aria-hidden="true"
focusable="false"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 4h7V2H4c-1.1 0-2 .9-2 2v7h2V4zm6 9l-4 5h12l-3-4-2.03 2.71L10 13zm7-4.5c0-.83-.67-1.5-1.5-1.5S14 7.67 14 8.5s.67 1.5 1.5 1.5S17 9.33 17 8.5zM20 2h-7v2h7v7h2V4c0-1.1-.9-2-2-2zm0 18h-7v2h7c1.1 0 2-.9 2-2v-7h-2v7zM4 13H2v7c0 1.1.9 2 2 2h7v-2H4v-7z"
/>
<path
d="M0 0h24v24H0z"
fill="none"
/>
</svg>
</div>
Cover Image
</div>
<div
Expand Down
4 changes: 3 additions & 1 deletion packages/block-library/src/file/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
MediaUpload,
MediaPlaceholder,
BlockControls,
BlockIcon,
RichText,
mediaUpload,
} from '@wordpress/editor';
Expand All @@ -29,6 +30,7 @@ import { compose } from '@wordpress/compose';
* Internal dependencies
*/
import FileBlockInspector from './inspector';
import { icon } from './index';

class FileEdit extends Component {
constructor() {
Expand Down Expand Up @@ -140,7 +142,7 @@ class FileEdit extends Component {
if ( ! href || hasError ) {
return (
<MediaPlaceholder
icon="media-default"
icon=<BlockIcon icon={ icon } />
labels={ {
title: __( 'File' ),
name: __( 'a file' ),
Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/file/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,5 +227,6 @@ export const settings = {
</div>
);
},

};

export const icon = settings.icon;
4 changes: 3 additions & 1 deletion packages/block-library/src/gallery/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
} from '@wordpress/components';
import {
BlockControls,
BlockIcon,
MediaUpload,
MediaPlaceholder,
InspectorControls,
Expand All @@ -31,6 +32,7 @@ import {
* Internal dependencies
*/
import GalleryImage from './gallery-image';
import { icon } from './index';

const MAX_COLUMNS = 8;
const linkOptions = [
Expand Down Expand Up @@ -191,7 +193,7 @@ class GalleryEdit extends Component {
<Fragment>
{ controls }
<MediaPlaceholder
icon="format-gallery"
icon=<BlockIcon icon={ icon } />
className={ className }
labels={ {
title: __( 'Gallery' ),
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/gallery/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,3 +270,5 @@ export const settings = {
},
],
};

export const icon = settings.icon;
39 changes: 26 additions & 13 deletions packages/block-library/src/gallery/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,33 @@ exports[`core/gallery block edit matches snapshot 1`] = `
<div
class="components-placeholder__label"
>
<svg
aria-hidden="true"
class="dashicon dashicons-format-gallery"
focusable="false"
height="20"
role="img"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
<div
class="editor-block-icon"
>
<path
d="M16 4h1.96c.57 0 1.04.47 1.04 1.04v12.92c0 .57-.47 1.04-1.04 1.04H5.04C4.47 19 4 18.53 4 17.96V16H2.04C1.47 16 1 15.53 1 14.96V2.04C1 1.47 1.47 1 2.04 1h12.92c.57 0 1.04.47 1.04 1.04V4zM3 14h11V3H3v11zm5-8.5C8 4.67 7.33 4 6.5 4S5 4.67 5 5.5 5.67 7 6.5 7 8 6.33 8 5.5zm2 4.5s1-5 3-5v8H4V7c2 0 2 3 2 3s.33-2 2-2 2 2 2 2zm7 7V6h-1v8.96c0 .57-.47 1.04-1.04 1.04H6v1h11z"
/>
</svg>
<svg
aria-hidden="true"
focusable="false"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0V0z"
fill="none"
/>
<g>
<path
d="M20 4v12H8V4h12m0-2H8L6 4v12l2 2h12l2-2V4l-2-2z"
/>
<path
d="M12 12l1 2 3-3 3 4H9z"
/>
<path
d="M2 6v14l2 2h14v-2H4V6H2z"
/>
</g>
</svg>
</div>
Gallery
</div>
<div
Expand Down
4 changes: 3 additions & 1 deletion packages/block-library/src/image/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import { withSelect } from '@wordpress/data';
import {
RichText,
BlockControls,
BlockIcon,
InspectorControls,
MediaPlaceholder,
MediaUpload,
Expand All @@ -45,6 +46,7 @@ import { compose } from '@wordpress/compose';
* Internal dependencies
*/
import ImageSize from './image-size';
import { icon } from './index';

/**
* Module constants
Expand Down Expand Up @@ -241,7 +243,7 @@ class ImageEdit extends Component {
<Fragment>
{ controls }
<MediaPlaceholder
icon="format-image"
icon=<BlockIcon icon={ icon } />
labels={ {
title: __( 'Image' ),
name: __( 'an image' ),
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,3 +318,5 @@ export const settings = {
},
],
};

export const icon = settings.icon;
8 changes: 7 additions & 1 deletion packages/block-library/src/video/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
import { Component, Fragment, createRef } from '@wordpress/element';
import {
BlockControls,
BlockIcon,
InspectorControls,
MediaPlaceholder,
MediaUpload,
Expand All @@ -24,6 +25,11 @@ import {
} from '@wordpress/editor';
import { getBlobByURL } from '@wordpress/blob';

/**
* Internal dependencies
*/
import { icon } from './index';

class VideoEdit extends Component {
constructor() {
super( ...arguments );
Expand Down Expand Up @@ -129,7 +135,7 @@ class VideoEdit extends Component {
if ( editing ) {
return (
<MediaPlaceholder
icon="media-video"
icon=<BlockIcon icon={ icon } />
labels={ {
title: __( 'Video' ),
name: __( 'a video' ),
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/video/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,3 +128,5 @@ export const settings = {
);
},
};

export const icon = settings.icon;
31 changes: 18 additions & 13 deletions packages/block-library/src/video/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,25 @@ exports[`core/video block edit matches snapshot 1`] = `
<div
class="components-placeholder__label"
>
<svg
aria-hidden="true"
class="dashicon dashicons-media-video"
focusable="false"
height="20"
role="img"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
<div
class="editor-block-icon"
>
<path
d="M12 2l4 4v12H4V2h8zm0 4h3l-3-3v3zm-1 8v-3c0-.27-.1-.51-.29-.71-.2-.19-.44-.29-.71-.29H7c-.27 0-.51.1-.71.29-.19.2-.29.44-.29.71v3c0 .27.1.51.29.71.2.19.44.29.71.29h3c.27 0 .51-.1.71-.29.19-.2.29-.44.29-.71zm3 1v-5l-2 2v1z"
/>
</svg>
<svg
aria-hidden="true"
focusable="false"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0V0z"
fill="none"
/>
<path
d="M4 6l2 4h14v8H4V6m18-2h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4L2 6v12l2 2h16l2-2V4z"
/>
</svg>
</div>
Video
</div>
<div
Expand Down