-
Notifications
You must be signed in to change notification settings - Fork 4.1k
/
custom-class-name.js
158 lines (143 loc) · 5.18 KB
/
custom-class-name.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
/**
* External dependencies
*/
import { assign, difference, omit } from 'lodash';
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { addFilter } from '@wordpress/hooks';
import { TextControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import {
hasBlockSupport,
parseWithAttributeSchema,
getSaveContent,
} from '@wordpress/blocks';
import { createHigherOrderComponent } from '@wordpress/compose';
/**
* Internal dependencies
*/
import { InspectorAdvancedControls } from '../components';
/**
* Filters registered block settings, extending attributes with anchor using ID
* of the first node.
*
* @param {Object} settings Original block settings.
*
* @return {Object} Filtered block settings.
*/
export function addAttribute( settings ) {
if ( hasBlockSupport( settings, 'customClassName', true ) ) {
// Use Lodash's assign to gracefully handle if attributes are undefined
settings.attributes = assign( settings.attributes, {
className: {
type: 'string',
},
} );
}
return settings;
}
/**
* Override the default edit UI to include a new block inspector control for
* assigning the custom class name, if block supports custom class name.
*
* @param {WPComponent} BlockEdit Original component.
*
* @return {WPComponent} Wrapped component.
*/
export const withInspectorControl = createHigherOrderComponent( ( BlockEdit ) => {
return ( props ) => {
const hasCustomClassName = hasBlockSupport( props.name, 'customClassName', true );
if ( hasCustomClassName && props.isSelected ) {
return (
<>
<BlockEdit { ...props } />
<InspectorAdvancedControls>
<TextControl
label={ __( 'Additional CSS Class(es)' ) }
value={ props.attributes.className || '' }
onChange={ ( nextValue ) => {
props.setAttributes( {
className: nextValue !== '' ? nextValue : undefined,
} );
} }
help={ __( 'Separate multiple classes with spaces.' ) }
/>
</InspectorAdvancedControls>
</>
);
}
return <BlockEdit { ...props } />;
};
}, 'withInspectorControl' );
/**
* Override props assigned to save component to inject anchor ID, if block
* supports anchor. This is only applied if the block's save result is an
* element and not a markup string.
*
* @param {Object} extraProps Additional props applied to save element.
* @param {Object} blockType Block type.
* @param {Object} attributes Current block attributes.
*
* @return {Object} Filtered props applied to save element.
*/
export function addSaveProps( extraProps, blockType, attributes ) {
if ( hasBlockSupport( blockType, 'customClassName', true ) && attributes.className ) {
extraProps.className = classnames( extraProps.className, attributes.className );
}
return extraProps;
}
/**
* Given an HTML string, returns an array of class names assigned to the root
* element in the markup.
*
* @param {string} innerHTML Markup string from which to extract classes.
*
* @return {string[]} Array of class names assigned to the root element.
*/
export function getHTMLRootElementClasses( innerHTML ) {
innerHTML = `<div data-custom-class-name>${ innerHTML }</div>`;
const parsed = parseWithAttributeSchema( innerHTML, {
type: 'string',
source: 'attribute',
selector: '[data-custom-class-name] > *',
attribute: 'class',
} );
return parsed ? parsed.trim().split( /\s+/ ) : [];
}
/**
* Given a parsed set of block attributes, if the block supports custom class
* names and an unknown class (per the block's serialization behavior) is
* found, the unknown classes are treated as custom classes. This prevents the
* block from being considered as invalid.
*
* @param {Object} blockAttributes Original block attributes.
* @param {Object} blockType Block type settings.
* @param {string} innerHTML Original block markup.
*
* @return {Object} Filtered block attributes.
*/
export function addParsedDifference( blockAttributes, blockType, innerHTML ) {
if ( hasBlockSupport( blockType, 'customClassName', true ) ) {
// To determine difference, serialize block given the known set of
// attributes, with the exception of `className`. This will determine
// the default set of classes. From there, any difference in innerHTML
// can be considered as custom classes.
const attributesSansClassName = omit( blockAttributes, [ 'className' ] );
const serialized = getSaveContent( blockType, attributesSansClassName );
const defaultClasses = getHTMLRootElementClasses( serialized );
const actualClasses = getHTMLRootElementClasses( innerHTML );
const customClasses = difference( actualClasses, defaultClasses );
if ( customClasses.length ) {
blockAttributes.className = customClasses.join( ' ' );
} else if ( serialized ) {
delete blockAttributes.className;
}
}
return blockAttributes;
}
addFilter( 'blocks.registerBlockType', 'core/custom-class-name/attribute', addAttribute );
addFilter( 'editor.BlockEdit', 'core/editor/custom-class-name/with-inspector-control', withInspectorControl );
addFilter( 'blocks.getSaveContent.extraProps', 'core/custom-class-name/save-props', addSaveProps );
addFilter( 'blocks.getBlockAttributes', 'core/custom-class-name/addParsedDifference', addParsedDifference );