Blocks: Try allowing custom buttons in the freeform block #1256
Conversation
|
Nice, thanks for trying this. Just to emphasize — it's a nice thing to have, but if it adds a whole lot of complexity it's not a feature that has to happen. I don't see any custom buttons, though — any steps to test? Also, if you click the ellipsis in the freeform block, then click outside the block, do you also get a white screen or is it just me? Regarding tinymce plugins, it seems like this would be good to look into so we can get the "add link on paste" feature, as discussed in #1041 |
You need plugins adding custom buttons for example (TinyMCE Advanced)
I'm not seeing this, but this is probably related
Yes, it's complex, maybe we could limit this to simple buttons. We'll see. |
|
If there's a codewise clean path forward for this, it may be one of those things where someone to whom this issue is close to their hearts can shepard through. It's a nice feature, but given we eventually would suggest everyone convert their shortcodes to blocks, and add them to the inserter, it's not a blocker. |
|
Just to confirm, I think we want almost exactly the old editor as the freeform block? |
|
This is also why I encouraged not using Editable for this block, so we can initialise the old editor here as a block, with all the plugins etc. that we have now. |
|
@iseulde Yes, what you propose is the alternative I noted I suggested in the notes above and I think is worth trying in a separate PR |
| { ! button.type && <SimpleButton id={ id } button={ button } editor={ editor } /> } | ||
| { button.type === 'listbox' && <ListBoxButton id={ id } button={ button } editor={ editor } /> } | ||
| { button.type === 'menubutton' && <MenuButton id={ id } button={ button } editor={ editor } /> } | ||
| { button.type === 'splitbutton' && <SplitButton id={ id } button={ button } editor={ editor } /> } |
| if ( onPostRender ) { | ||
| button[ onPostRender ].call( { | ||
| active: ( isActive ) => this.mounted && this.setState( { isActive } ), | ||
| disabled: ( isDisabled ) => this.mounted && this.setState( { isDisabled } ), |
There was a problem hiding this comment.
The disabled function is not on the 'this' object but is instead on the passed event (weird I know). If you want a button that shows this then try the list indent button (using the lists plugin).
There was a problem hiding this comment.
For some reason, this fixed a bug I was having with some buttons. Something like self.disabled was undefined.
There was a problem hiding this comment.
Interesting! I will dig into the TinyMCE code and see if I can figure out what's going on. It will probably turn out that the 'this' object and the 'event.control' object are the same thing and that different buttons functions access them by different routes depending on the implementor.
| aria-pressed={ isActive } | ||
| disabled={ isDisabled } | ||
| icon="arrow-down" | ||
| onClick={ this.toggleList } |
There was a problem hiding this comment.
Do you mean toggleMenu? Unless I'm missing something toggleList does not exist.
| @@ -109,9 +109,16 @@ function gutenberg_register_scripts_and_styles() { | |||
|
|
|||
| // Editor Styles. | |||
| wp_register_style( | |||
| 'gutenberg-mce-skin', | |||
| includes_url( 'js/tinymce/skins/lightgray/skin.min.css' ), | |||
There was a problem hiding this comment.
If we want our own skin - for an earlier attempt on the freeform block I had converted the TinyMCE lightgray skin to scss (instead of less which TinyMCE uses). I should still have that conversion around if you want it.
There was a problem hiding this comment.
Yep could be nice to able to import the icons explicitely for example (that's what I needed here).
|
This has got me wondering if it might be a good idea to just create a TinyMCE theme (rather than try and hook into the editor object state after it has rendered) so I'm going to have a go at prototyping that today. |
|
Ok, ignore my TinyMCE theme idea - my quick prototype doesn't show any advantage over just hooking events like we're already doing. |
|
I'm going to postpone the work here, if anyone wants to take over, please feel free to do. We should also try the alternative of just loading the current editor and maybe style it. |
|
@youknowriad But from how I understood it, don't we need the exact same old editor as the freeform block? I don't mind revisiting that idea, but thought it was decided like that. cc @jasmussen |
|
I think we need @mtias to comment also. But my understanding is that the freeform block (was just suggested renamed to "Classic Editor", which seems like it might work) will load any old content we open in the editor. And so it should support the features the old editor supported, generally. It doesn't have to support custom buttons, and it doesn't have to support every button the old editor had. But it would be nice if it did. Whether it's a reimplementation, or a straight port, that matters less, though if we do a straight port we should do some style changes to at least make it "look at home" in the new chrome. James has been doing amazing work on the freeform block, so far, in my opinion. One unsolved question is inserting images into the freeform block. Plan B to solve this is to have an image button on the freeform block also. Did this answer the open questions? |
|
closing #1394 seems like a better approach |
refs #794
This is just a POC and way from finished. I'm not really sure this is the path we'd want to take but this PR tries to enable custom tinymce buttons to be added in the freeform block.
settingsobject containing the custom buttons and the custom mce plugin to be loaded is provided to the Editor instanceNotes