Blocks: (Re-)enable selection of embed block by clicking #5730
Conversation
aduth
force-pushed
the
add/focusable-iframe
branch
from
a095e52 to
fa89a1d
Compare
|
Rebased to resolve conflicts, and to refactor some of the components and higher-order components to more recent patterns, including using |
| On behalf of the consuming developer, the higher-order component manages: | ||
|
|
||
| - Unbinding when the component unmounts. | ||
| - Binding at most a single event handler for the entire application. |
There was a problem hiding this comment.
I like this component, especially this part 👍 Nice job
components/sandbox/index.js
Outdated
|
|
||
| this.state = { | ||
| width: 0, | ||
| height: 0, | ||
| }; | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| window.addEventListener( 'message', this.checkMessageForResize, false ); |
There was a problem hiding this comment.
withGlobalEvent?
Hah! But in seriousness, yes, it should! Will add.
|
|
||
| ## Usage | ||
|
|
||
| Use as you would a standard `iframe`, passing `onFocus` as the callback to be invoked when the iframe receives focus. |
There was a problem hiding this comment.
I guess iframeRef could be documented as well?
blocks/library/embed/index.js
Outdated
| @@ -96,6 +99,10 @@ function getEmbedBlockSettings( { title, icon, category = 'embed', transforms, k | |||
| this.unmounting = true; | |||
| } | |||
|
|
|||
| setIsSelected() { | |||
| this.props.setIsSelected( true ); | |||
There was a problem hiding this comment.
The only thing bothering me with this PR is this prop, I mean, if we could avoid it by bubbling the focus event or something, it would have been great. But I understand it might be tricky.
There was a problem hiding this comment.
I mean, if we could avoid it by bubbling the focus event or something, it would have been great.
That would be interesting. Let me play with it a bit to see if I can get it to work.
There was a problem hiding this comment.
I mean, if we could avoid it by bubbling the focus event or something, it would have been great.
That would be interesting. Let me play with it a bit to see if I can get it to work.
Luckily it just works to dispatch a custom event. See 8a6c493. Simplifies things a fair bit.
| resize: 'handleResize', | ||
| } )( OriginalComponent ); | ||
|
|
||
| wrapper = mount( <EnhancedComponent { ...props }>Hello</EnhancedComponent> ); |
There was a problem hiding this comment.
I started to think if we should introduce our own mount or further enrich enzyme to call unmount behind the scenes when the test finishes.
There was a problem hiding this comment.
let wrapper;
export const mount = ( ...params ) => {
wrapper = originalMount( ...params );
return wrapper;
};
afterEach( () => {
if ( wrapper ) {
wrapper.unmount();
wrapper = null;
}
} );There was a problem hiding this comment.
I started to think if we should introduce our own
mountor further enrichenzymeto callunmountbehind the scenes when the test finishes.
I'd like this 👍
There was a problem hiding this comment.
I will check it next week. jest.mount( element ) or jest.shallow( element ) might also save some keystrokes :)
|
|
||
| listener.handleEvent( event ); | ||
|
|
||
| expect( handler.handleEvent ).toHaveBeenCalledWith( event ); |
There was a problem hiding this comment.
If I would add the same listener 5 times:
listener.add( 'resize', handler );
listener.add( 'resize', handler );
listener.add( 'resize', handler );
listener.add( 'resize', handler );
listener.add( 'resize', handler );would that be true:
expect( handler.handleEvent ).toHaveBeenCalledTimes( 5 );There was a problem hiding this comment.
Yes, I confirmed it in my tests 👍
There was a problem hiding this comment.
Feel free to remove c41e84d if you find it useless.
There was a problem hiding this comment.
Feel free to remove c41e84d if you find it useless.
Definitely useful. Thanks for the addition.
| * | ||
| * @return {Object} Ref object. | ||
| */ | ||
| export { createRef }; |
There was a problem hiding this comment.
We still need to add forwardRef - it can be done in another PR.
There was a problem hiding this comment.
We still need to add
forwardRef- it can be done in another PR.
Yeah, I suppose we'd want to build this into createHigherOrderComponent ?
There was a problem hiding this comment.
RichText with Autocomplete has a few wrappers with refs, so we can check there. I guess HOC makes the most sense in our case.
aduth
force-pushed
the
add/focusable-iframe
branch
from
c41e84d to
8a6c493
Compare
Closes #5589
Related: #483
This pull request seeks to restore behaviors of embed click-to-select, originally implemented in #4011 and later regressing in #4872. In doing so, it adds a new function property passed to a block to allow a developer to programmatically select or deselect the block. This, in combination with a new
FocusableIframecomponent, is leveraged to allow the embed block to be selected when its iframe receives focus.FocusableIframeDocumentationwithGlobalEventsDocumentationTesting instructions:
Repeat testing instructions from #4011