Skip to content

Commit a2e50b2

Browse files
ajlendeajlende
committed
Code cleanup
1 parent 117b7a0 commit a2e50b2

File tree

9 files changed

+183
-143
lines changed

9 files changed

+183
-143
lines changed

‎blocks/duotone-filter/duotone.php‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<?php
2+
3+
function hex2rgb( $color ) {
4+
if ( strlen( $color ) === 4 ) {
5+
$r = hexdec( substr( $color, 1, 1 ) . substr( $color, 1, 1 ) );
6+
$g = hexdec( substr( $color, 2, 1 ) . substr( $color, 2, 1 ) );
7+
$b = hexdec( substr( $color, 3, 1 ) . substr( $color, 3, 1 ) );
8+
} elseif ( strlen( $color ) === 7 ) {
9+
$r = hexdec( substr( $color, 1, 2 ) );
10+
$g = hexdec( substr( $color, 3, 2 ) );
11+
$b = hexdec( substr( $color, 5, 2 ) );
12+
} else {
13+
return array();
14+
}
15+
16+
return array(
17+
'r' => $r / 0xff,
18+
'g' => $g / 0xff,
19+
'b' => $b / 0xff,
20+
);
21+
}
22+
23+
// phpcs:disable
24+
$duotone_id = $block['attrs']['duotoneId'];
25+
$duotone_dark = hex2rgb( $block['attrs']['duotoneDark'] );
26+
$duotone_light = hex2rgb( $block['attrs']['duotoneLight'] );
27+
// phpcs:enable
28+
29+
?>
30+
31+
<svg
32+
xmlns:xlink="http://www.w3.org/1999/xlink"
33+
viewBox="0 0 0 0"
34+
width="0"
35+
height="0"
36+
focusable="false"
37+
role="none"
38+
style="visibility: hidden !important; position: absolute !important; left: -9999px !important; overflow: hidden !important;"
39+
>
40+
<defs>
41+
<filter id="<?php echo $duotone_id; ?>">
42+
<feColorMatrix
43+
type="matrix"
44+
<?php // phpcs:disable ?>
45+
values=".2989 .5870 .1140 0 0
46+
.2989 .5870 .1140 0 0
47+
.2989 .5870 .1140 0 0
48+
0 0 0 1 0"
49+
<?php // phpcs:enable ?>
50+
/>
51+
<feComponentTransfer color-interpolation-filters="sRGB">
52+
<feFuncR type="table" tableValues="<?php echo $duotone_dark['r']; ?> <?php echo $duotone_light['r']; ?>" />
53+
<feFuncG type="table" tableValues="<?php echo $duotone_dark['g']; ?> <?php echo $duotone_light['g']; ?>" />
54+
<feFuncB type="table" tableValues="<?php echo $duotone_dark['b']; ?> <?php echo $duotone_light['b']; ?>" />
55+
</feComponentTransfer>
56+
</filter>
57+
</defs>
58+
</svg>

‎blocks/duotone-filter/editor.scss‎

Whitespace-only changes.

‎blocks/duotone-filter/filter.svg‎

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

‎blocks/duotone-filter/index.php‎

Lines changed: 12 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -9,63 +9,23 @@
99

1010
function is_supported_block( $block ) {
1111
$supported_blocks = [ 'core/image', 'core/cover' ];
12-
return in_array( $block['blockName'], $supported_blocks );
13-
}
14-
15-
function hex2rgb( $color ) {
16-
$color = trim( $color, '#' );
17-
if ( strlen( $color ) === 3 ) {
18-
$r = hexdec( substr( $color, 0, 1 ) . substr( $color, 0, 1 ) );
19-
$g = hexdec( substr( $color, 1, 1 ) . substr( $color, 1, 1 ) );
20-
$b = hexdec( substr( $color, 2, 1 ) . substr( $color, 2, 1 ) );
21-
} elseif ( strlen( $color ) === 6 ) {
22-
$r = hexdec( substr( $color, 0, 2 ) );
23-
$g = hexdec( substr( $color, 2, 2 ) );
24-
$b = hexdec( substr( $color, 4, 2 ) );
25-
} else {
26-
return array();
27-
}
28-
return array(
29-
'r' => $r / 255,
30-
'g' => $g / 255,
31-
'b' => $b / 255,
32-
);
12+
return in_array( $block['blockName'], $supported_blocks, true );
3313
}
3414

3515
add_filter( 'render_block', function ( $block_content, $block ) {
36-
if ( ! is_supported_block( $block ) ) {
16+
if (
17+
! is_supported_block( $block ) ||
18+
! array_key_exists( 'duotoneId', $block['attrs'] ) ||
19+
! array_key_exists( 'duotoneDark', $block['attrs'] ) ||
20+
! array_key_exists( 'duotoneLight', $block['attrs'] )
21+
) {
3722
return $block_content;
3823
}
3924

40-
$duotone_id = $block['attrs']['duotoneId'];
41-
$duotone_dark = hex2rgb( $block['attrs']['duotoneDark'] );
42-
$duotone_light = hex2rgb( $block['attrs']['duotoneLight'] );
43-
$duotone = <<<EOT
44-
<svg
45-
xmlns:xlink="http://www.w3.org/1999/xlink"
46-
style="visibility: hidden !important; position: absolute !important; left: -9999px !important; overflow: hidden !important;"
47-
aria-hidden="true"
48-
focusable="false"
49-
role="none"
50-
>
51-
<defs>
52-
<filter id="$duotone_id">
53-
<feColorMatrix
54-
type="matrix"
55-
values=".2989 .5870 .1140 0 0
56-
.2989 .5870 .1140 0 0
57-
.2989 .5870 .1140 0 0
58-
0 0 0 1 0"
59-
/>
60-
<feComponentTransfer color-interpolation-filters="sRGB">
61-
<feFuncR type="table" tableValues="{$duotone_dark['r']} {$duotone_light['r']}" />
62-
<feFuncG type="table" tableValues="{$duotone_dark['g']} {$duotone_light['g']}" />
63-
<feFuncB type="table" tableValues="{$duotone_dark['b']} {$duotone_light['b']}" />
64-
</feComponentTransfer>
65-
</filter>
66-
</defs>
67-
</svg>
68-
EOT;
69-
return $block_content . $duotone;
25+
ob_start();
26+
include 'duotone.php';
27+
$duotone = ob_get_clean();
28+
29+
return $duotone . $block_content;
7030
}, 10, 2 );
7131
} );

‎blocks/duotone-filter/src/duotone.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { SVG } from '@wordpress/components';
5+
6+
const hex2rgb = ( color = '' ) => {
7+
let r = '0';
8+
let g = '0';
9+
let b = '0';
10+
11+
if ( color.length === 4 ) {
12+
r = '0x' + color[ 1 ] + color[ 1 ];
13+
g = '0x' + color[ 2 ] + color[ 2 ];
14+
b = '0x' + color[ 3 ] + color[ 3 ];
15+
} else if ( color.length === 7 ) {
16+
r = '0x' + color[ 1 ] + color[ 2 ];
17+
g = '0x' + color[ 3 ] + color[ 4 ];
18+
b = '0x' + color[ 5 ] + color[ 6 ];
19+
} else {
20+
return {};
21+
}
22+
23+
return {
24+
r: r / 0xff,
25+
g: g / 0xff,
26+
b: b / 0xff,
27+
};
28+
};
29+
30+
function Duotone( { id: duotoneId, darkColor, lightColor } ) {
31+
const duotoneDark = hex2rgb( darkColor );
32+
const duotoneLight = hex2rgb( lightColor );
33+
34+
return (
35+
<SVG
36+
xmlnsXlink="http://www.w3.org/1999/xlink"
37+
viewBox="0 0 0 0"
38+
width="0"
39+
height="0"
40+
focusable="false"
41+
role="none"
42+
style={ {
43+
visibility: 'hidden',
44+
position: 'absolute',
45+
left: '-9999px',
46+
overflow: 'hidden',
47+
} }
48+
>
49+
<defs>
50+
<filter id={ duotoneId }>
51+
<feColorMatrix
52+
type="matrix"
53+
// prettier-ignore
54+
values=".2989 .5870 .1140 0 0
55+
.2989 .5870 .1140 0 0
56+
.2989 .5870 .1140 0 0
57+
0 0 0 1 0"
58+
/>
59+
<feComponentTransfer colorInterpolationFilters="sRGB">
60+
<feFuncR
61+
type="table"
62+
tableValues={ `${ duotoneDark.r } ${ duotoneLight.r }` }
63+
/>
64+
<feFuncG
65+
type="table"
66+
tableValues={ `${ duotoneDark.g } ${ duotoneLight.g }` }
67+
/>
68+
<feFuncB
69+
type="table"
70+
tableValues={ `${ duotoneDark.b } ${ duotoneLight.b }` }
71+
/>
72+
</feComponentTransfer>
73+
</filter>
74+
</defs>
75+
</SVG>
76+
);
77+
}
78+
79+
export default Duotone;

‎blocks/duotone-filter/src/index.js‎

Lines changed: 34 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -7,35 +7,16 @@ import { useEffect } from '@wordpress/element';
77
import { addFilter } from '@wordpress/hooks';
88
import { __ } from '@wordpress/i18n';
99

10+
/**
11+
* Internal dependencies
12+
*/
13+
import Duotone from './duotone';
14+
1015
const SUPPORTED_BLOCKS = [ 'core/image', 'core/cover' ];
1116

1217
export const isSupportedBlock = ( blockName ) =>
1318
SUPPORTED_BLOCKS.includes( blockName );
1419

15-
const parseColor = ( color ) => {
16-
if ( ! color ) return {};
17-
18-
let r = '0';
19-
let g = '0';
20-
let b = '0';
21-
22-
if ( color.length === 7 ) {
23-
r = '0x' + color[ 1 ] + color[ 2 ];
24-
g = '0x' + color[ 3 ] + color[ 4 ];
25-
b = '0x' + color[ 5 ] + color[ 6 ];
26-
} else if ( color.length === 4 ) {
27-
r = '0x' + color[ 1 ] + color[ 1 ];
28-
g = '0x' + color[ 2 ] + color[ 2 ];
29-
b = '0x' + color[ 3 ] + color[ 3 ];
30-
}
31-
32-
return {
33-
r: r / 0xff,
34-
g: g / 0xff,
35-
b: b / 0xff,
36-
};
37-
};
38-
3920
const withDuotoneAttributes = ( settings, blockName ) => {
4021
if ( isSupportedBlock( blockName ) ) {
4122
Object.assign( settings.attributes, {
@@ -62,8 +43,6 @@ const withDuotoneEditorControls = createHigherOrderComponent(
6243
}
6344

6445
const instanceId = useInstanceId( BlockEdit );
65-
const duotoneDark = parseColor( attributes.duotoneDark );
66-
const duotoneLight = parseColor( attributes.duotoneLight );
6746

6847
useEffect( () => {
6948
setAttributes( {
@@ -93,60 +72,44 @@ const withDuotoneEditorControls = createHigherOrderComponent(
9372
] }
9473
/>
9574
</InspectorControls>
96-
<svg
97-
viewBox="0 0 0 0"
98-
width="0"
99-
height="0"
100-
xmlnsXlink="http://www.w3.org/1999/xlink"
101-
style={ {
102-
visibility: 'hidden',
103-
position: 'absolute',
104-
left: '-9999px',
105-
overflow: 'hidden',
106-
} }
107-
ariaHidden="true"
108-
focusable="false"
109-
role="none"
110-
>
111-
<defs>
112-
<filter id={ attributes.duotoneId }>
113-
<feColorMatrix
114-
type="matrix"
115-
// prettier-ignore
116-
values=".2989 .5870 .1140 0 0
117-
.2989 .5870 .1140 0 0
118-
.2989 .5870 .1140 0 0
119-
0 0 0 1 0"
120-
/>
121-
<feComponentTransfer colorInterpolationFilters="sRGB">
122-
<feFuncR
123-
type="table"
124-
tableValues={ `${ duotoneDark.r } ${ duotoneLight.r }` }
125-
/>
126-
<feFuncG
127-
type="table"
128-
tableValues={ `${ duotoneDark.g } ${ duotoneLight.g }` }
129-
/>
130-
<feFuncB
131-
type="table"
132-
tableValues={ `${ duotoneDark.b } ${ duotoneLight.b }` }
133-
/>
134-
</feComponentTransfer>
135-
</filter>
136-
</defs>
137-
</svg>
138-
<div style={ { filter: `url( #${ attributes.duotoneId } )` } }>
75+
{ attributes.duotoneDark &&
76+
attributes.duotoneLight &&
77+
attributes.duotoneId ? (
78+
<>
79+
<Duotone
80+
id={ attributes.duotoneId }
81+
darkColor={ attributes.duotoneDark }
82+
lightColor={ attributes.duotoneLight }
83+
/>
84+
<div
85+
style={ {
86+
filter: `url( #${ attributes.duotoneId } )`,
87+
} }
88+
>
89+
<BlockEdit { ...props } />
90+
</div>
91+
</>
92+
) : (
13993
<BlockEdit { ...props } />
140-
</div>
94+
) }
14195
</>
14296
);
14397
},
14498
'withDuotoneEditorControls'
14599
);
146100

147101
function addDuotoneFilterStyle( props, block, attributes ) {
148-
if ( ! isSupportedBlock( block.name ) ) return props;
102+
if (
103+
! isSupportedBlock( block.name ) ||
104+
! attributes.duotoneDark ||
105+
! attributes.duotoneLight ||
106+
! attributes.duotoneId
107+
) {
108+
return props;
109+
}
110+
149111
const { style = {} } = props;
112+
150113
return { style: { ...style, filter: `url( #${ attributes.duotoneId } )` } };
151114
}
152115

‎blocks/duotone-filter/style.scss‎

Whitespace-only changes.

‎editor.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
// Import editor styles for blocks
22
@import './blocks/bauhaus-centenary/editor.scss';
3-
@import './blocks/duotone-filter/editor.scss';
43
@import './blocks/event/editor.scss';
54
@import './blocks/layout-grid/editor.scss';
65
@import './blocks/motion-background/editor.scss';

‎style.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/* Import front end styles for blocks */
22
@import './blocks/bauhaus-centenary/style.scss';
3-
@import './blocks/duotone-filter/style.scss';
43
@import './blocks/event/style.scss';
54
@import './blocks/layout-grid/style.scss';
65
@import './blocks/motion-background/style.scss';

0 commit comments

Comments
 (0)