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.

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

Components: Adds AccessibleSVG component and use consistently for block icons #9565

Merged
merged 6 commits into from
Sep 4, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 4 additions & 2 deletions docs/block-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ description: 'Block showing a Book card.'

* **Type:** `String` [ common | formatting | layout | widgets | embed ]

Blocks are grouped into categories to help users browse and discover them.
Blocks are grouped into categories to help users browse and discover them.

The core provided categories are:
* common
Expand All @@ -79,9 +79,11 @@ An icon property should be specified to make it easier to identify a block. Thes
icon: 'book-alt',

// Specifying a custom svg for the block
icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false"><path fill="none" d="M0 0h24v24H0V0z" /><path d="M19 13H5v-2h14v2z" /></svg>,
icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><path d="M19 13H5v-2h14v2z" /></svg>,
```

**Note:** Custom SVG icons are automatically wrapped in the [`wp.components.AccessibleSVG` component](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/accessible-svg/) to add accessibility attributes (`aria-hidden`, `role`, and `focusable`).

An object can also be passed as icon, in this case, icon, as specified above, should be included in the src property.
Besides src the object can contain background and foreground colors, this colors will appear with the icon
when they are applicable e.g.: in the inserter.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,25 +27,36 @@ exports[`PluginPostPublishPanel renders fill properly 1`] = `
onClick={[Function]}
type="button"
>
<svg
<AccessibleSVG
className="components-panel__arrow"
height="24px"
viewBox="0 0 24 24"
width="24px"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M0,0h24v24H0V0z"
fill="none"
/>
</g>
<g>
<path
d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
/>
</g>
</svg>
<svg
aria-hidden="true"
className="components-panel__arrow"
focusable="false"
height="24px"
role="img"
viewBox="0 0 24 24"
width="24px"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M0,0h24v24H0V0z"
fill="none"
/>
</g>
<g>
<path
d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
/>
</g>
</svg>
</AccessibleSVG>
My panel title
</button>
</Button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,25 +27,36 @@ exports[`PluginPrePublishPanel renders fill properly 1`] = `
onClick={[Function]}
type="button"
>
<svg
<AccessibleSVG
className="components-panel__arrow"
height="24px"
viewBox="0 0 24 24"
width="24px"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M0,0h24v24H0V0z"
fill="none"
/>
</g>
<g>
<path
d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
/>
</g>
</svg>
<svg
aria-hidden="true"
className="components-panel__arrow"
focusable="false"
height="24px"
role="img"
viewBox="0 0 24 24"
width="24px"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M0,0h24v24H0V0z"
fill="none"
/>
</g>
<g>
<path
d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
/>
</g>
</svg>
</AccessibleSVG>
My panel title
</button>
</Button>
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/archives/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const settings = {

description: __( 'Display a monthly archive of your site’s Posts.' ),

icon: <svg role="img" aria-hidden="true" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><g><path d="M7 11h2v2H7v-2zm14-5v14l-2 2H5l-2-2V6l2-2h1V2h2v2h8V2h2v2h1l2 2zM5 8h14V6H5v2zm14 12V10H5v10h14zm-4-7h2v-2h-2v2zm-4 0h2v-2h-2v2z" /></g></svg>,
icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><g><path d="M7 11h2v2H7v-2zm14-5v14l-2 2H5l-2-2V6l2-2h1V2h2v2h8V2h2v2h1l2 2zM5 8h14V6H5v2zm14 12V10H5v10h14zm-4-7h2v-2h-2v2zm-4 0h2v-2h-2v2z" /></g></svg>,

category: 'widgets',

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/audio/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const settings = {

description: __( 'Embed an audio file and a simple audio player.' ),

icon: <svg role="img" aria-hidden="true" focusable="false" 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>,
icon: <svg 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>,

category: 'common',

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/button/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export const settings = {

description: __( 'Want visitors to click to subscribe, buy, or read more? Get their attention with a button.' ),

icon: <svg role="img" aria-hidden="true" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><g><path d="M19 6H5L3 8v8l2 2h14l2-2V8l-2-2zm0 10H5V8h14v8z" /></g></svg>,
icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><g><path d="M19 6H5L3 8v8l2 2h14l2-2V8l-2-2zm0 10H5V8h14v8z" /></g></svg>,

category: 'layout',

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/categories/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const settings = {

description: __( 'Display a list of all your site’s categories.' ),

icon: <svg role="img" aria-hidden="true" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h24v24H0V0z" fill="none" /><path d="M12,2l-5.5,9h11L12,2z M12,5.84L13.93,9h-3.87L12,5.84z" /><path d="m17.5 13c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zm0 7c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" /><path d="m3 21.5h8v-8h-8v8zm2-6h4v4h-4v-4z" /></svg>,
icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h24v24H0V0z" fill="none" /><path d="M12,2l-5.5,9h11L12,2z M12,5.84L13.93,9h-3.87L12,5.84z" /><path d="m17.5 13c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zm0 7c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" /><path d="m3 21.5h8v-8h-8v8zm2-6h4v4h-4v-4z" /></svg>,

category: 'widgets',

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/code/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const settings = {

description: __( 'Add text that respects your spacing and tabs -- perfect for displaying code.' ),

icon: <svg role="img" aria-hidden="true" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h24v24H0V0z" fill="none" /><path d="M9.4,16.6L4.8,12l4.6-4.6L8,6l-6,6l6,6L9.4,16.6z M14.6,16.6l4.6-4.6l-4.6-4.6L16,6l6,6l-6,6L14.6,16.6z" /></svg>,
icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h24v24H0V0z" fill="none" /><path d="M9.4,16.6L4.8,12l4.6-4.6L8,6l-6,6l6,6L9.4,16.6z M14.6,16.6l4.6-4.6l-4.6-4.6L16,6l6,6l-6,6L14.6,16.6z" /></svg>,

category: 'formatting',

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/columns/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const settings = {
__( 'beta' )
),

icon: <svg role="img" aria-hidden="true" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><g><path d="M21 4H3L2 5v14l1 1h18l1-1V5l-1-1zM8 18H4V6h4v12zm6 0h-4V6h4v12zm6 0h-4V6h4v12z" /></g></svg>,
icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><g><path d="M21 4H3L2 5v14l1 1h18l1-1V5l-1-1zM8 18H4V6h4v12zm6 0h-4V6h4v12zm6 0h-4V6h4v12z" /></g></svg>,

category: 'layout',

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/cover-image/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export const settings = {

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

icon: <svg role="img" aria-hidden="true" focusable="false" 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: <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>,

category: 'common',

Expand Down
Loading