Skip to content

Commit 98dc799

Browse files
tschortschtschortsch
committed
migrate blocks to functional components / remove blocks library fallback
1 parent 474f202 commit 98dc799

10 files changed

Lines changed: 581 additions & 680 deletions

File tree

‎src/button/edit.js‎

Lines changed: 114 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
// WordPress dependencies
22
import { __ } from '@wordpress/i18n';
3-
import { Component, Fragment } from '@wordpress/element';
43
import {
54
Dashicon,
65
IconButton,
@@ -10,17 +9,14 @@ import {
109
TextControl,
1110
} from '@wordpress/components';
1211
import { applyFilters } from '@wordpress/hooks';
13-
import * as BlockEditor from '@wordpress/block-editor';
14-
import * as Editor from '@wordpress/editor';
15-
import { colors } from '../constants';
16-
17-
const {
12+
import {
1813
RichText,
1914
URLInput,
2015
InspectorControls,
2116
BlockControls,
2217
AlignmentToolbar,
23-
} = BlockEditor || Editor; // Fallback to deprecated '@wordpress/editor' for backwards compatibility
18+
} from '@wordpress/block-editor';
19+
import { colors } from '../constants';
2420

2521
let styleOptions = [
2622
{
@@ -42,139 +38,128 @@ styleOptions = applyFilters(
4238
const DEFAULT_COLOR = colors.primary;
4339
const NEW_TAB_REL_DEFAULT_VALUE = 'noreferrer noopener';
4440

45-
class BootstrapButtonEdit extends Component {
46-
render() {
47-
const { attributes, className, setAttributes, isSelected } = this.props;
48-
const { url, linkTarget, rel, text, style, alignment } = attributes;
41+
const BootstrapButtonEdit = ( {
42+
attributes,
43+
className,
44+
isSelected,
45+
setAttributes,
46+
} ) => {
47+
const { url, linkTarget, rel, text, style, alignment } = attributes;
4948

50-
// Open in new tab behavior from core/button (source: https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/button/edit.js)
51-
const onToggleOpenInNewTab = ( value ) => {
52-
const newLinkTarget = value ? '_blank' : undefined;
49+
// Open in new tab behavior from core/button (source: https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/button/edit.js)
50+
const onToggleOpenInNewTab = ( value ) => {
51+
const newLinkTarget = value ? '_blank' : undefined;
5352

54-
let updatedRel = rel;
55-
if ( newLinkTarget && ! rel ) {
56-
updatedRel = NEW_TAB_REL_DEFAULT_VALUE;
57-
} else if ( ! newLinkTarget && rel === NEW_TAB_REL_DEFAULT_VALUE ) {
58-
updatedRel = undefined;
59-
}
53+
let updatedRel = rel;
54+
if ( newLinkTarget && ! rel ) {
55+
updatedRel = NEW_TAB_REL_DEFAULT_VALUE;
56+
} else if ( ! newLinkTarget && rel === NEW_TAB_REL_DEFAULT_VALUE ) {
57+
updatedRel = undefined;
58+
}
6059

61-
setAttributes( {
62-
linkTarget: newLinkTarget,
63-
rel: updatedRel,
64-
} );
65-
};
60+
setAttributes( {
61+
linkTarget: newLinkTarget,
62+
rel: updatedRel,
63+
} );
64+
};
6665

67-
// Prepare CSS rules for selected button style
68-
let inlineStyle = {
69-
backgroundColor:
70-
styleOptions.length > 0
71-
? styleOptions[ 0 ].color
72-
: DEFAULT_COLOR,
73-
};
66+
// Prepare CSS rules for selected button style
67+
let inlineStyle = {
68+
backgroundColor:
69+
styleOptions.length > 0 ? styleOptions[ 0 ].color : DEFAULT_COLOR,
70+
};
7471

75-
if ( style ) {
76-
const selectedButtonColor = styleOptions.find(
77-
( styleOption ) => styleOption.value === style
78-
);
79-
if ( selectedButtonColor?.color ) {
80-
inlineStyle = {
81-
backgroundColor: selectedButtonColor.color,
82-
};
83-
}
72+
if ( style ) {
73+
const selectedButtonColor = styleOptions.find(
74+
( styleOption ) => styleOption.value === style
75+
);
76+
if ( selectedButtonColor?.color ) {
77+
inlineStyle = {
78+
backgroundColor: selectedButtonColor.color,
79+
};
8480
}
81+
}
8582

86-
return (
87-
<Fragment>
88-
<div
89-
className={ className }
90-
data-alignment={ alignment }
91-
style={ inlineStyle }
92-
>
93-
<RichText
94-
// eslint-disable-next-line @wordpress/i18n-ellipsis
95-
placeholder={ __(
96-
'Add text...',
97-
'wp-bootstrap-blocks'
98-
) }
99-
value={ text }
100-
onChange={ ( value ) =>
101-
setAttributes( { text: value } )
102-
}
103-
formattingControls={ [] }
104-
keepPlaceholderOnFocus
105-
/>
106-
<InspectorControls>
107-
<PanelBody>
108-
<SelectControl
109-
label={ __( 'Style', 'wp-bootstrap-blocks' ) }
110-
value={ style }
111-
options={ styleOptions }
112-
onChange={ ( selectedStyle ) => {
113-
setAttributes( { style: selectedStyle } );
114-
} }
115-
/>
116-
</PanelBody>
117-
<PanelBody
118-
title={ __(
119-
'Link settings',
120-
'wp-bootstrap-blocks'
121-
) }
122-
>
123-
<ToggleControl
124-
label={ __(
125-
'Open in new tab',
126-
'wp-bootstrap-blocks'
127-
) }
128-
onChange={ onToggleOpenInNewTab }
129-
checked={ linkTarget === '_blank' }
130-
/>
131-
<TextControl
132-
label={ __(
133-
'Link rel',
134-
'wp-bootstrap-blocks'
135-
) }
136-
value={ rel || '' }
137-
onChange={ ( newRel ) => {
138-
setAttributes( { rel: newRel } );
139-
} }
140-
/>
141-
</PanelBody>
142-
</InspectorControls>
143-
<BlockControls>
144-
<AlignmentToolbar
145-
value={ alignment }
83+
return (
84+
<>
85+
<div
86+
className={ className }
87+
data-alignment={ alignment }
88+
style={ inlineStyle }
89+
>
90+
<RichText
91+
// eslint-disable-next-line @wordpress/i18n-ellipsis
92+
placeholder={ __( 'Add text...', 'wp-bootstrap-blocks' ) }
93+
value={ text }
94+
onChange={ ( value ) => setAttributes( { text: value } ) }
95+
formattingControls={ [] }
96+
keepPlaceholderOnFocus
97+
/>
98+
<InspectorControls>
99+
<PanelBody>
100+
<SelectControl
101+
label={ __( 'Style', 'wp-bootstrap-blocks' ) }
102+
value={ style }
103+
options={ styleOptions }
104+
onChange={ ( selectedStyle ) => {
105+
setAttributes( { style: selectedStyle } );
106+
} }
107+
/>
108+
</PanelBody>
109+
<PanelBody
110+
title={ __( 'Link settings', 'wp-bootstrap-blocks' ) }
111+
>
112+
<ToggleControl
146113
label={ __(
147-
'Change button alignment',
114+
'Open in new tab',
148115
'wp-bootstrap-blocks'
149116
) }
150-
onChange={ ( newAlignment ) =>
151-
setAttributes( { alignment: newAlignment } )
152-
}
153-
/>
154-
</BlockControls>
155-
</div>
156-
{ isSelected && (
157-
<form
158-
className="wp-block-wp-bootstrap-blocks-button-link"
159-
onSubmit={ ( event ) => event.preventDefault() }
160-
>
161-
<Dashicon icon="admin-links" />
162-
<URLInput
163-
value={ url }
164-
onChange={ ( value ) =>
165-
setAttributes( { url: value } )
166-
}
117+
onChange={ onToggleOpenInNewTab }
118+
checked={ linkTarget === '_blank' }
167119
/>
168-
<IconButton
169-
icon="editor-break"
170-
label={ __( 'Apply', 'wp-bootstrap-blocks' ) }
171-
type="submit"
120+
<TextControl
121+
label={ __( 'Link rel', 'wp-bootstrap-blocks' ) }
122+
value={ rel || '' }
123+
onChange={ ( newRel ) => {
124+
setAttributes( { rel: newRel } );
125+
} }
172126
/>
173-
</form>
174-
) }
175-
</Fragment>
176-
);
177-
}
178-
}
127+
</PanelBody>
128+
</InspectorControls>
129+
<BlockControls>
130+
<AlignmentToolbar
131+
value={ alignment }
132+
label={ __(
133+
'Change button alignment',
134+
'wp-bootstrap-blocks'
135+
) }
136+
onChange={ ( newAlignment ) =>
137+
setAttributes( { alignment: newAlignment } )
138+
}
139+
/>
140+
</BlockControls>
141+
</div>
142+
{ isSelected && (
143+
<form
144+
className="wp-block-wp-bootstrap-blocks-button-link"
145+
onSubmit={ ( event ) => event.preventDefault() }
146+
>
147+
<Dashicon icon="admin-links" />
148+
<URLInput
149+
value={ url }
150+
onChange={ ( value ) =>
151+
setAttributes( { url: value } )
152+
}
153+
/>
154+
<IconButton
155+
icon="editor-break"
156+
label={ __( 'Apply', 'wp-bootstrap-blocks' ) }
157+
type="submit"
158+
/>
159+
</form>
160+
) }
161+
</>
162+
);
163+
};
179164

180165
export default BootstrapButtonEdit;

‎src/button/editor.scss‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,11 @@
3131
$blocks-button__link-input-width: 300px + 2px + 2 * $button-size;
3232
width: $blocks-button__link-input-width;
3333

34-
.block-editor-url-input,
35-
.editor-url-input {
34+
.block-editor-url-input {
3635
width: auto;
3736
}
3837

39-
.block-editor-url-input__suggestions,
40-
.editor-url-input__suggestions {
38+
.block-editor-url-input__suggestions {
4139
width: $blocks-button__link-input-width - $button-size - $button-size;
4240
z-index: z-index(".block-library-button__inline-link .block-editor-url-input__suggestions");
4341
}
@@ -50,8 +48,7 @@
5048
color: $gray-600;
5149
}
5250

53-
.block-editor-url-input input[type="text"]::placeholder,
54-
.editor-url-input input[type="text"]::placeholder {
51+
.block-editor-url-input input[type="text"]::placeholder {
5552
color: $gray-600;
5653
}
5754
}

‎src/class-wp-bootstrap-blocks.php‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -178,17 +178,7 @@ public function enqueue_block_editor_assets() {
178178
$index_asset = file_exists( $index_asset_file )
179179
? require_once $index_asset_file
180180
: null;
181-
182181
$index_dependencies = isset( $index_asset['dependencies'] ) ? $index_asset['dependencies'] : array();
183-
global $wp_version;
184-
$wp_editor_dependency_to_remove = version_compare( $wp_version, '5.2', '<' ) ? 'wp-block-editor' : 'wp-editor';
185-
$index_dependencies = array_filter(
186-
$index_dependencies,
187-
function ( $dependency ) use ( $wp_editor_dependency_to_remove ) {
188-
return $wp_editor_dependency_to_remove !== $dependency;
189-
}
190-
);
191-
192182
$index_version = isset( $index_asset['version'] ) ? $index_asset['version'] : filemtime( $index_path );
193183

194184
wp_enqueue_script(

‎src/column/block.js‎

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

1110
import edit, { bgColorOptions } from './edit';
1211
import { column } from '../icons';
1312

14-
const { InnerBlocks } = BlockEditor || Editor; // Fallback to deprecated '@wordpress/editor' for backwards compatibility
15-
1613
registerBlockType( 'wp-bootstrap-blocks/column', {
1714
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
1815
title: __( 'Column (Bootstrap)', 'wp-bootstrap-blocks' ), // Block title.

0 commit comments

Comments
 (0)