Skip to content

Commit fdc3e85

Browse files
tschortschtschortsch
authored
Merge pull request #65 from liip/fix/improve-icons
fix(): Improve icons
2 parents a52c0ca + 06121f2 commit fdc3e85

File tree

10 files changed

+105
-80
lines changed

10 files changed

+105
-80
lines changed

‎build/index.asset.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-polyfill'), 'version' => 'dc6e4660f672db61a119525dff6a9e5b');
1+
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-polyfill'), 'version' => '5a95424ca8a14f69c447254902b8c0ad');

‎build/index.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎readme.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ Please create a new GitHub issue and let us know: [https://github.com/liip/boots
124124
= 3.1.1 =
125125

126126
* [FIX] Use unique `jsonpFunction` name in webpack config to avoid conflict with other plugins built with `@wordpress/scripts`. (Thanks CP-Antoine for the hint)
127+
* [IMPROVEMENT] Replace WordPress Dashicons with SVG icons.
127128

128129
= 3.1.0 =
129130

‎src/button/block.js‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,15 @@
55
// WordPress dependencies
66
import { registerBlockType } from '@wordpress/blocks';
77
import { __ } from '@wordpress/i18n';
8-
import { G, Path, SVG } from '@wordpress/components';
98

109
import edit from './edit';
10+
import { button } from '../icons';
1111
import './editor.scss';
1212

1313
registerBlockType( 'wp-bootstrap-blocks/button', {
1414
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
1515
title: __( 'Button', 'wp-bootstrap-blocks' ), // Block title.
16-
icon: (
17-
<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
18-
<Path fill="none" d="M0 0h24v24H0V0z" />
19-
<G>
20-
<Path d="M19 6H5c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H5V8h14v8z" />
21-
</G>
22-
</SVG>
23-
),
16+
icon: button,
2417
category: 'wp-bootstrap-blocks', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
2518
keywords: [
2619
__( 'Button', 'wp-bootstrap-blocks' ),

‎src/column/block.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,14 @@ import * as BlockEditor from '@wordpress/block-editor';
99
import * as Editor from '@wordpress/editor';
1010

1111
import edit, { bgColorOptions } from './edit';
12+
import { column } from '../icons';
1213

1314
const { InnerBlocks } = BlockEditor || Editor; // Fallback to deprecated '@wordpress/editor' for backwards compatibility
1415

1516
registerBlockType( 'wp-bootstrap-blocks/column', {
1617
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
1718
title: __( 'Column', 'wp-bootstrap-blocks' ), // Block title.
18-
icon: 'menu', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
19+
icon: column, // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
1920
category: 'wp-bootstrap-blocks', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
2021
keywords: [
2122
__( 'Column', 'wp-bootstrap-blocks' ),

‎src/container/block.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,15 @@ import * as BlockEditor from '@wordpress/block-editor';
99
import * as Editor from '@wordpress/editor';
1010

1111
import edit from './edit';
12+
import { stack } from '../icons';
1213
import './editor.scss';
1314

1415
const { InnerBlocks } = BlockEditor || Editor; // Fallback to deprecated '@wordpress/editor' for backwards compatibility
1516

1617
registerBlockType( 'wp-bootstrap-blocks/container', {
1718
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
1819
title: __( 'Container', 'wp-bootstrap-blocks' ), // Block title.
19-
icon: 'feedback', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
20+
icon: stack,
2021
category: 'wp-bootstrap-blocks', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
2122
keywords: [
2223
__( 'Container', 'wp-bootstrap-blocks' ),

‎src/icons.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/**
2+
* Icons backport from @wordpress/icons package to not have a dependency to @wordpress/primitives.
3+
*
4+
* Vertical alignment icons backport from Gutenberg.
5+
* Source: https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/block-vertical-alignment-toolbar/icons.js
6+
*/
7+
import { Path, SVG } from '@wordpress/components';
8+
9+
export const alignCenter = (
10+
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
11+
<Path d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z" />
12+
</SVG>
13+
);
14+
15+
export const alignLeft = (
16+
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
17+
<Path d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z" />
18+
</SVG>
19+
);
20+
21+
export const alignRight = (
22+
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
23+
<Path d="M11.1 19.8H20v-1.5h-8.9v1.5zm0-15.6v1.5H20V4.2h-8.9zM4 12.8h16v-1.5H4v1.5z" />
24+
</SVG>
25+
);
26+
27+
export const verticalAlignBottom = (
28+
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
29+
<Path d="M15 4H9v11h6V4zM4 18.5V20h16v-1.5H4z" />
30+
</SVG>
31+
);
32+
33+
export const verticalAlignCenter = (
34+
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
35+
<Path d="M20 11h-5V4H9v7H4v1.5h5V20h6v-7.5h5z" />
36+
</SVG>
37+
);
38+
39+
export const verticalAlignTop = (
40+
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
41+
<Path d="M9 20h6V9H9v11zM4 4v1.5h16V4H4z" />
42+
</SVG>
43+
);
44+
45+
export const templateIconMissing = (
46+
<SVG
47+
width="48"
48+
height="48"
49+
viewBox="0 0 48 48"
50+
xmlns="http://www.w3.org/2000/svg"
51+
>
52+
<Path
53+
fillRule="evenodd"
54+
clipRule="evenodd"
55+
d="M23.58 26.28c0-.600003.1499985-1.099998.45-1.5.3000015-.400002.7433304-.8399976 1.33-1.32.5600028-.4533356.9833319-.8699981 1.27-1.25s.43-.8433306.43-1.39c0-.5466694-.1733316-1.0566643-.52-1.53s-.986662-.71-1.92-.71c-1.1066722 0-1.8533314.2766639-2.24.83-.3866686.5533361-.58 1.1766632-.58 1.87 0 .1466674.0033333.2666662.01.36.0066667.0933338.01.1533332.01.18h-1.78c-.0133334-.0533336-.0266666-.146666-.04-.28-.0133334-.133334-.02-.2733326-.02-.42 0-.7733372.1766649-1.4666636.53-2.08.3533351-.6133364.8899964-1.0999982 1.61-1.46.7200036-.3600018 1.5999948-.54 2.64-.54 1.2133394 0 2.2033295.3233301 2.97.97s1.15 1.5099946 1.15 2.59c0 .7066702-.1033323 1.3033309-.31 1.79-.2066677.4866691-.4533319.8799985-.74 1.18-.2866681.3000015-.6566644.6233316-1.11.97-.4800024.3866686-.8333322.7166653-1.06.99-.2266678.2733347-.34.6233312-.34 1.05v.82h-1.74zm-.14 2.56h2V31h-2zM39 12c1.1046 0 2 .8954 2 2v20c0 1.1046-.8954 2-2 2H9c-1.10457 0-2-.8954-2-2V14c0-1.1046.89543-2 2-2h30zm0 22V14H9v20h30z"
56+
/>
57+
</SVG>
58+
);
59+
60+
export const button = (
61+
<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
62+
<Path d="M19 6.5H5c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7c0-1.1-.9-2-2-2zm.5 9c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5v-7c0-.3.2-.5.5-.5h14c.3 0 .5.2.5.5v7zM8 13h8v-1.5H8V13z" />
63+
</SVG>
64+
);
65+
66+
export const column = (
67+
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
68+
<Path d="M19 6H6c-1.1 0-2 .9-2 2v9c0 1.1.9 2 2 2h13c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zM6 17.5c-.3 0-.5-.2-.5-.5V8c0-.3.2-.5.5-.5h3v10H6zm13.5-.5c0 .3-.2.5-.5.5h-3v-10h3c.3 0 .5.2.5.5v9z" />
69+
</SVG>
70+
);
71+
72+
export const columns = (
73+
<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
74+
<Path d="M19 6H6c-1.1 0-2 .9-2 2v9c0 1.1.9 2 2 2h13c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-4.1 1.5v10H10v-10h4.9zM5.5 17V8c0-.3.2-.5.5-.5h2.5v10H6c-.3 0-.5-.2-.5-.5zm14 0c0 .3-.2.5-.5.5h-2.6v-10H19c.3 0 .5.2.5.5v9z" />
75+
</SVG>
76+
);
77+
78+
export const stack = (
79+
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
80+
<Path d="M20.2 8v11c0 .7-.6 1.2-1.2 1.2H6v1.5h13c1.5 0 2.7-1.2 2.7-2.8V8zM18 16.4V4.6c0-.9-.7-1.6-1.6-1.6H4.6C3.7 3 3 3.7 3 4.6v11.8c0 .9.7 1.6 1.6 1.6h11.8c.9 0 1.6-.7 1.6-1.6zm-13.5 0V4.6c0-.1.1-.1.1-.1h11.8c.1 0 .1.1.1.1v11.8c0 .1-.1.1-.1.1H4.6l-.1-.1z" />
81+
</SVG>
82+
);

‎src/row/block.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
// WordPress dependencies
66
import { registerBlockType } from '@wordpress/blocks';
77
import { __ } from '@wordpress/i18n';
8-
98
import * as BlockEditor from '@wordpress/block-editor';
109
import * as Editor from '@wordpress/editor';
1110

1211
import edit from './edit';
12+
import { columns } from '../icons';
1313
import './editor.scss';
1414
import './style.scss';
1515

@@ -18,7 +18,7 @@ const { InnerBlocks } = BlockEditor || Editor; // Fallback to deprecated '@wordp
1818
registerBlockType( 'wp-bootstrap-blocks/row', {
1919
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
2020
title: __( 'Row', 'wp-bootstrap-blocks' ), // Block title.
21-
icon: 'layout', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
21+
icon: columns, // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
2222
category: 'wp-bootstrap-blocks', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
2323
keywords: [
2424
__( 'Row', 'wp-bootstrap-blocks' ),

‎src/row/edit.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,14 @@ import * as BlockEditor from '@wordpress/block-editor';
1616
import * as Editor from '@wordpress/editor';
1717

1818
import {
19-
alignBottom,
2019
alignCenter,
21-
alignTop,
20+
alignLeft,
21+
alignRight,
2222
templateIconMissing,
23-
} from './icons';
23+
verticalAlignBottom,
24+
verticalAlignCenter,
25+
verticalAlignTop,
26+
} from '../icons';
2427

2528
import { isBootstrap5Active } from '../helper';
2629

@@ -291,35 +294,35 @@ class BootstrapRowEdit extends Component {
291294

292295
const alignmentControls = [
293296
{
294-
icon: 'editor-alignleft',
297+
icon: alignLeft,
295298
title: __( 'Align columns left', 'wp-bootstrap-blocks' ),
296299
align: 'left',
297300
},
298301
{
299-
icon: 'editor-aligncenter',
302+
icon: alignCenter,
300303
title: __( 'Align columns center', 'wp-bootstrap-blocks' ),
301304
align: 'center',
302305
},
303306
{
304-
icon: 'editor-alignright',
307+
icon: alignRight,
305308
title: __( 'Align columns right', 'wp-bootstrap-blocks' ),
306309
align: 'right',
307310
},
308311
];
309312

310313
const verticalAlignmentControls = [
311314
{
312-
icon: alignTop,
315+
icon: verticalAlignTop,
313316
title: __( 'Align columns top', 'wp-bootstrap-blocks' ),
314317
align: 'top',
315318
},
316319
{
317-
icon: alignCenter,
320+
icon: verticalAlignCenter,
318321
title: __( 'Align columns center', 'wp-bootstrap-blocks' ),
319322
align: 'center',
320323
},
321324
{
322-
icon: alignBottom,
325+
icon: verticalAlignBottom,
323326
title: __( 'Align columns bottom', 'wp-bootstrap-blocks' ),
324327
align: 'bottom',
325328
},

‎src/row/icons.js‎

Lines changed: 0 additions & 56 deletions
This file was deleted.

0 commit comments

Comments
 (0)