Switching o2 to the block editor

[ghost]

Your comments plugin seems like a perfect replacement for the O2 functionality. I've been following your stuff on github for a while.

[tomjn]

There's a tutorial on how to add a block list on the .org handbook too! P2tenberg seems a bit nicer though, and has the sidebar in a dropdown as well as the settings. I'll need to circle back to it though as it needs a bit more work than the quickfixes needed to get O2 working

[derintolu]

I have a P2 Beta account. I can invite you if u want to see and play

[tomjn]

I got a P2 on .com I’m testing with. I was hoping to pull down a JS file and have an easy patch but it looks like I’ll need to pull out react and learn a bit about overriding O2’s backbone code. It’s the O2 part I see as the bigger task though, blocks should be a lot easier

[derintolu]

I wish I could help more, but ill likely muck it up as I attempt my month old jsq copy/paste skills. But yay go @tomjn for the win. Hope that helps. :) Was looking it at it for a startup project though. Would be happy to see if we can contribute to development in another way.

[tomjn]

So I tracked down where O2 creates its editor, it's in js/editor/editor.js that it creates an o2Editor global JS var. The create method is then used to do the swapping of an element with the o2 tinyMCE editor. That function is called in several views.

So one possible, a plan of action, enqueue a file that monkeypatches o2Editor to replace the getEditor function. This function returns something that gets piped straight into replaceWith, so if we use something similar to the block comments and pass in an element with a React app attached to it then that gives us a crude block editor. We then make sure the inputs all match what O2 expects

[tomjn]

Proof of concept, run this in the console then try to reply to a comment:

o2Editor.getEditor = function() {
    return '<p>yay</p>';
}

It'll use the O2 editor but it's now been swapped for a paragraph that says yay

[tomjn]

Also, we could dequeue the O2 editor file and put a replacement version in. This might make it easier to account for the post button and the undesired edit/preview tabs

[tomjn]

So it would appear that P2tenberg is hiding the toolbar, and the textarea, then puttting its own div inbetween that contains the block editor. The new post button is the same button o2 provides.

As such, something similar to what the block comments plugin does might actually work, with some enhancements

[tomjn]

So I picked up work over the weekend on the block comments plugin to try and reproduce the same interface P2 has and modernise it a bit more:

I managed to add a toolbar, the block inspector, and refactored how things on the react side so it was more adaptable. It now uses wp scripts and WP Element instead of bundling react so

Next steps:

• Move it into a webcomponent so that theme styles don't interfere
• adjust the toolbar styling to add an inspector button like P2
• the inline inserter button crashes the editor for some reason when using the newer gutenberg plugin, which is concerning
• The undo/redo buttons are disabled, I think I need a provider component of some sort to manage history

Then, for P2020, the o2 views for new post etc wiill need updating. it seems that my initial hunch of updating the textarea was incorrect, I'll need to instead do something with o2data.

I also did a short experiment replacing o2 genericons with dashicons, and while I made some progress it was more time than I was willing to invest to finish.

I've a busy week ahead with work so this won't be done before Friday at the earliest. If anybody wants to help, information research and clues to interfacing with O2's views and data objects would be best.

[johngodley]

P2020 and P2tenberg will all be open sourced.

[tomjn]

P2020 and P2tenberg will all be open sourced.

Do you have a timescale on this? Similar things were said about P2 Breathe years ago, and o2 itself is suffering from serious bitrot ( it won't work without an obscure abandoned plugin, that requires you to open the settings page with the dev tools to check a box that's been disabled for O2 to work ). I have serious doubts that it will ever officially be available for self-hosting

P2020 is already opensource via the public themes svn anyway, if the goal is to wait until it reaches a mythical presentation ready point then the ship has already sailed

[johngodley]

There's no exact timescale, but 'soon' is what I hope, and it is actively being worked on. O2 is in a bit of a mess, yes, and hopefully it can be cleaned up and modernised at the same time too. There's a lot that can be done.

I have serious doubts that it will ever officially be available for self-hosting

It will be open sourced.

if the goal is to wait until it reaches a mythical presentation ready point then the ship has already sailed

That isn't the goal, and yes it is apparent that ship has sailed.

[tomjn]

Update: I have the block editor part almost entirely replicated, but I'm going to put it in a web component first. Then I should have my own superior version of P2tenberg. Any theme can then be turned into a P2020 style theme with that and O2.

The current p2020 + p2tenberg combination isn't flexible enough for that due to theme style conflicts.

As a result of using a webcomponent, the O2 view changes should be significantly easier. No more passing data around, I just need to make the component respond to all the same change events as the textarea element and then replace <textarea> with <blockeditor> in the O2 view

[ghost]

So excited you literally created what I've been imagining in my head yo use as a buddypress activity update replacement and months before I thought it would happen

[tomjn]

So excited you literally created what I've been imagining in my head yo use as a buddypress activity update replacement and months before I thought it would happen

There's https://github.com/tomjn/block-comments which has a function that swaps out a textarea for a block editor, just keep in mind theme styling will impact it. Hence web components. The other side is that the block editor isn't a 10kb download, it bumps my personal site from 300kb per page too 5.6MB per page when using the block editor for my comment form.

WIP PR is here https://github.com/tomjn/block-comments/pull/9

Also there's a tutorial on the .org block editor handbook, and I did a talk about using the editor outside of the posts page at WCEU Berln https://wordpress.tv/2019/09/05/tom-nowell-using-blocks-outside-the-editor/