Skip to content

Commit 877d497

Browse files
youknowriadyouknowriad
authored
Framework: Drop the focus/setFocus props from block edit functions (#4872)
1 parent 0a73fb9 commit 877d497

File tree

49 files changed

+393
-497
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+393
-497
lines changed

‎blocks/README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -277,9 +277,9 @@ want to display alignment options in the selected block's toolbar.
277277

278278
Because the toolbar should only be shown when the block is selected, it is
279279
important that a `BlockControls` element is only returned when the block's
280-
`focus` prop is
280+
`isSelected` prop is
281281
[truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy),
282-
meaning that focus is currently within the block.
282+
meaning that the block is currently selected.
283283

284284
Example:
285285

@@ -291,8 +291,8 @@ Example:
291291

292292
function edit( props ) {
293293
return [
294-
// Controls: (only visible when focused)
295-
props.focus && (
294+
// Controls: (only visible when block is selected)
295+
props.isSelected && (
296296
el( BlockControls, { key: 'controls' },
297297
el( AlignmentToolbar, {
298298
value: props.align,

‎blocks/block-controls/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Toolbar, Fill } from '@wordpress/components';
55

66
export default function BlockControls( { controls, children } ) {
77
return (
8-
<Fill name="Formatting.Toolbar">
8+
<Fill name="Block.Toolbar">
99
<Toolbar controls={ controls } />
1010
{ children }
1111
</Fill>

‎blocks/block-controls/test/__snapshots__/index.js.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`BlockControls Should render a dynamic toolbar of controls 1`] = `
44
<Fill
5-
name="Formatting.Toolbar"
5+
name="Block.Toolbar"
66
>
77
<Toolbar
88
controls={

‎blocks/block-edit/index.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
* External dependencies
33
*/
44
import classnames from 'classnames';
5+
import { noop } from 'lodash';
56

67
/**
78
* WordPress dependencies
@@ -36,7 +37,16 @@ export function BlockEdit( props ) {
3637
// them preferencially as the render value for the block.
3738
const Edit = blockType.edit || blockType.save;
3839

39-
return <Edit { ...props } className={ className } />;
40+
// For backwards compatibility concerns adds a focus and setFocus prop
41+
// These should be removed after some time (maybe when merging to Core)
42+
return (
43+
<Edit
44+
{ ...props }
45+
className={ className }
46+
focus={ props.isSelected ? {} : false }
47+
setFocus={ noop }
48+
/>
49+
);
4050
}
4151

4252
export default withFilters( 'blocks.BlockEdit' )( BlockEdit );

‎blocks/library/audio/index.js

+4-7
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export const settings = {
7070
}
7171
render() {
7272
const { align, caption, id } = this.props.attributes;
73-
const { setAttributes, focus, setFocus } = this.props;
73+
const { setAttributes, isSelected } = this.props;
7474
const { editing, className, src } = this.state;
7575
const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
7676
const switchToEditing = () => {
@@ -93,7 +93,7 @@ export const settings = {
9393
}
9494
return false;
9595
};
96-
const controls = focus && (
96+
const controls = isSelected && (
9797
<BlockControls key="controls">
9898
<BlockAlignmentToolbar
9999
value={ align }
@@ -110,8 +110,6 @@ export const settings = {
110110
</BlockControls>
111111
);
112112

113-
const focusCaption = ( focusValue ) => setFocus( { editable: 'caption', ...focusValue } );
114-
115113
if ( editing ) {
116114
return [
117115
controls,
@@ -153,14 +151,13 @@ export const settings = {
153151
controls,
154152
<figure key="audio" className={ className }>
155153
<audio controls="controls" src={ src } />
156-
{ ( ( caption && caption.length ) || !! focus ) && (
154+
{ ( ( caption && caption.length ) || !! isSelected ) && (
157155
<RichText
158156
tagName="figcaption"
159157
placeholder={ __( 'Write caption…' ) }
160158
value={ caption }
161-
focus={ focus && focus.editable === 'caption' ? focus : undefined }
162-
onFocus={ focusCaption }
163159
onChange={ ( value ) => setAttributes( { caption: value } ) }
160+
isSelected={ isSelected }
164161
inlineToolbar
165162
/>
166163
) }

‎blocks/library/block/index.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ class ReusableBlockEdit extends Component {
8686
}
8787

8888
render() {
89-
const { focus, reusableBlock, isFetching, isSaving } = this.props;
89+
const { isSelected, reusableBlock, isFetching, isSaving } = this.props;
9090
const { isEditing, title, attributes } = this.state;
9191

9292
if ( ! reusableBlock && isFetching ) {
@@ -105,12 +105,12 @@ class ReusableBlockEdit extends Component {
105105
<BlockEdit
106106
{ ...this.props }
107107
name={ reusableBlock.type }
108-
focus={ isEditing ? focus : null }
108+
isSelected={ isEditing && isSelected }
109109
attributes={ reusableBlockAttributes }
110110
setAttributes={ isEditing ? this.setAttributes : noop }
111111
/>
112112
</div>,
113-
focus && (
113+
isSelected && (
114114
<ReusableBlockEditPanel
115115
key="panel"
116116
isEditing={ isEditing }

‎blocks/library/button/index.js

+5-7
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,7 @@ class ButtonBlock extends Component {
6060
const {
6161
attributes,
6262
setAttributes,
63-
focus,
64-
setFocus,
63+
isSelected,
6564
className,
6665
} = this.props;
6766

@@ -76,7 +75,7 @@ class ButtonBlock extends Component {
7675
} = attributes;
7776

7877
return [
79-
focus && (
78+
isSelected && (
8079
<BlockControls key="controls">
8180
<BlockAlignmentToolbar value={ align } onChange={ this.updateAlignment } />
8281
</BlockControls>
@@ -86,18 +85,17 @@ class ButtonBlock extends Component {
8685
tagName="span"
8786
placeholder={ __( 'Add text…' ) }
8887
value={ text }
89-
focus={ focus }
90-
onFocus={ setFocus }
9188
onChange={ ( value ) => setAttributes( { text: value } ) }
9289
formattingControls={ [ 'bold', 'italic', 'strikethrough' ] }
9390
className="wp-block-button__link"
9491
style={ {
9592
backgroundColor: color,
9693
color: textColor,
9794
} }
95+
isSelected={ isSelected }
9896
keepPlaceholderOnFocus
9997
/>
100-
{ focus &&
98+
{ isSelected &&
10199
<InspectorControls key="inspector">
102100
<ToggleControl
103101
label={ __( 'Wrap text' ) }
@@ -125,7 +123,7 @@ class ButtonBlock extends Component {
125123
</InspectorControls>
126124
}
127125
</span>,
128-
focus && (
126+
isSelected && (
129127
<form
130128
key="form-link"
131129
className="blocks-button__inline-link"

‎blocks/library/cover-image/index.js

+5-7
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export const settings = {
9696
}
9797
},
9898

99-
edit( { attributes, setAttributes, focus, setFocus, className } ) {
99+
edit( { attributes, setAttributes, isSelected, className } ) {
100100
const { url, title, align, contentAlign, id, hasParallax, dimRatio } = attributes;
101101
const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
102102
const onSelectImage = ( media ) => setAttributes( { url: media.url, id: media.id } );
@@ -124,7 +124,7 @@ export const settings = {
124124
} }
125125
/>
126126
);
127-
const controls = focus && [
127+
const controls = isSelected && [
128128
<BlockControls key="controls">
129129
<BlockAlignmentToolbar
130130
value={ align }
@@ -176,9 +176,8 @@ export const settings = {
176176
<RichText
177177
tagName="h2"
178178
value={ title }
179-
focus={ focus }
180-
onFocus={ setFocus }
181179
onChange={ ( value ) => setAttributes( { title: value } ) }
180+
isSelected={ isSelected }
182181
inlineToolbar
183182
/>
184183
) : __( 'Cover Image' );
@@ -199,14 +198,13 @@ export const settings = {
199198
style={ style }
200199
className={ classes }
201200
>
202-
{ title || !! focus ? (
201+
{ title || isSelected ? (
203202
<RichText
204203
tagName="h2"
205204
placeholder={ __( 'Write title…' ) }
206205
value={ title }
207-
focus={ focus }
208-
onFocus={ setFocus }
209206
onChange={ ( value ) => setAttributes( { title: value } ) }
207+
isSelected={ isSelected }
210208
inlineToolbar
211209
/>
212210
) : null }

‎blocks/library/embed/index.js

+4-6
Original file line numberDiff line numberDiff line change
@@ -131,10 +131,10 @@ function getEmbedBlockSettings( { title, icon, category = 'embed', transforms, k
131131
render() {
132132
const { html, type, error, fetching } = this.state;
133133
const { align, url, caption } = this.props.attributes;
134-
const { setAttributes, focus, setFocus } = this.props;
134+
const { setAttributes, isSelected } = this.props;
135135
const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
136136

137-
const controls = focus && (
137+
const controls = isSelected && (
138138
<BlockControls key="controls">
139139
<BlockAlignmentToolbar
140140
value={ align }
@@ -200,18 +200,16 @@ function getEmbedBlockSettings( { title, icon, category = 'embed', transforms, k
200200
html={ html }
201201
title={ iframeTitle }
202202
type={ type }
203-
onFocus={ () => setFocus() }
204203
/>
205204
</div>
206205
) }
207-
{ ( caption && caption.length > 0 ) || !! focus ? (
206+
{ ( caption && caption.length > 0 ) || isSelected ? (
208207
<RichText
209208
tagName="figcaption"
210209
placeholder={ __( 'Write caption…' ) }
211210
value={ caption }
212-
focus={ focus }
213-
onFocus={ setFocus }
214211
onChange={ ( value ) => setAttributes( { caption: value } ) }
212+
isSelected={ isSelected }
215213
inlineToolbar
216214
/>
217215
) : null }

‎blocks/library/freeform/old-editor.js

+2-10
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,6 @@ export default class OldEditor extends Component {
6363
if ( prevProps.attributes.content !== content ) {
6464
editor.setContent( content || '' );
6565
}
66-
67-
if ( ! prevProps.focus && !! this.props.focus && document.activeElement !== editor.getBody() ) {
68-
editor.getBody().focus();
69-
}
7066
}
7167

7268
initialize() {
@@ -127,10 +123,6 @@ export default class OldEditor extends Component {
127123
// See wp-includes/js/tinymce/plugins/wordpress/plugin.js
128124
// Swaps node.nodeName === 'BODY' to node === editor.getBody()
129125
editor.on( 'init', () => {
130-
if ( this.props.focus && document.activeElement !== editor.getBody() ) {
131-
editor.getBody().focus();
132-
}
133-
134126
editor.addCommand( 'WP_More', function( tag ) {
135127
var parent, html, title,
136128
classname = 'wp-more-tag',
@@ -176,15 +168,15 @@ export default class OldEditor extends Component {
176168
}
177169

178170
render() {
179-
const { focus, id, className } = this.props;
171+
const { isSelected, id, className } = this.props;
180172

181173
return [
182174
<div
183175
key="toolbar"
184176
id={ id + '-toolbar' }
185177
ref={ ref => this.ref = ref }
186178
className="freeform-toolbar"
187-
style={ ! focus ? { display: 'none' } : {} }
179+
style={ ! isSelected ? { display: 'none' } : {} }
188180
/>,
189181
<div
190182
key="editor"

0 commit comments

Comments
 (0)