Gutenberg For ProcessWire ?!

[Mustafa-Online]

Did any one tried to integrate "WordPress New Editor" into ProcessWire ??

I did some searches and I found this Repo on Github: https://github.com/front/drupal-gutenberg Which allows Drupal Users to use Gutenberg.

Any Thoughts ?

 

[Tom.]

Gutenberg is.. okay. It's getting mixed reviews https://en-gb.wordpress.org/plugins/gutenberg/#reviews.

The trouble is, it allows the user to do too much. It's trying to sit in the middle ground of a page builder and an editor. I think giving the user everything even if they don't need it isn't inline with ProcessWire. Things like being able to make columns etc. 

I actually much prefer Statamic's implementation with it's Bard field - https://docs.statamic.com/fieldtypes/bard

[Mustafa-Online]

16 minutes ago, Tom. said:

I think giving the user everything even if they don't need it

You are absolutely right, but there must a way to restrict that behavior; for example: disable adding images in a video area ..etc / It doesn't have to be that cluttered.

I don't know if the Drupal guys are OK with it, I will give it a try.

[gmclelland]

https://wptavern.com/first-look-at-live-demo-of-the-gutenberg-content-editor-for-drupal-8

[gmclelland]

I saw somewhere on Twitter that someone mentioned they were doing something similar with Drupal and http://editor.ory.am/

[bernhard]

11 hours ago, gmclelland said:

I saw somewhere on Twitter that someone mentioned they were doing something similar with Drupal and http://editor.ory.am/

That one looks really nice! First I thought I don't think ProcessWire is the right tool for such click-click-marketing sites, because its strength comes from the freedom of fields and querying them with the strong API, like $pages->find('template=xy,fieldx>50,fieldy<10'. But then I thought maybe it would be nice to have both combined. A site with custom templates & fields where we need more control over our data and an "ORY-template" (similar to the basic-page template) where the user can build its own totally flexible page. This could be great for landingpages.

So if anybody has the time to build it - go for it ? 

[teppo]

On 8/7/2018 at 12:24 PM, Tom. said:

I think giving the user everything even if they don't need it isn't inline with ProcessWire. Things like being able to make columns etc.

From a core development perspective I'm going to agree with this – but while the core probably shouldn't include a pre-built, "full featured" page builder (at least for the time being, since no one really knows what the future holds), there's no reason why third parties should be discouraged to create such tools. I also know for a fact that there'd be a market for that ?

[JayGee]

I'm still fairly new here having switched to using ProcessWire for pretty much every project (hence the frequent questions ? ) from Concrete5.

Concrete5 has had Gutenberg-esque block-based front-end editing for nearly 10 years longer than Wordpress. Although a finished site using C5 can look great for a site editor/frontend-only user with various drag-drop layout tools, we were finding c5 development had become very convoluted and was starting to make simple website projects unnecessarily complicated. C5's core weighs in at a hefty filesize too. This is why we started researching for alternatives and landed happily at ProcessWire.

I already find WP development unnecessarily convoluted, especially compared to the simplicity of ProcessWire. And with Gutenberg, I can only foresee the same sort of headaches ahead for the WP community that we were finding with C5 - namely conflicts between blocks and the core and frontend UI and your design style and functionality being dictated to by the CMS in order to work in the Gutenberg features.

Discovering ProcessWire has been a revelation for us - the clean API and design agnostic approach are making everything from simple website projects to complex web apps a breeze, with the added bonus of super simple frontend editing that not only wows client's used to site builder platforms but requires basically zero onboarding too.

I would urge anyone thinking of building out Gutenberg inspired modules for ProcessWire to consider the above comments to ensure that what makes ProcessWire special is retained.
 

[szabesz]

More on Gutenberg (it is a bird's-eye view article, and as such just a quick read) https://toolset.com/2018/11/toolsets-plans-for-wordpress-5-0-and-gutenberg/

TL;DR:

Quote

...
The first version of WordPress and Gutenberg appears to be optimized for using Gutenberg to compose blog posts.
...
What we’d like to see in Gutenberg, which isn’t there yet, is mainly:

• The ability to design templates, which will work similar to PHP templates, but with Gutenberg
• The ability to launch Gutenberg editor for any content, not only the post body
• The ability to insert dynamic values (fields and taxonomy) into block attributes

 

[Ivan Gretsky]

Recently Bitrix (a popular commercial CMS here in Russia, known worldwide for its Bitrix24 CRM/PM/... solution) introduced similar functionality they called Site Constructor. This thing allows to build pages or parts of the pages from pre-defined blocks which can be static or dynamic. Site developer can style, modify or add their own blocks. They recommend this for landing pages for now, but are aiming to move all content management to those blocks. So there is some trend.

I actually do use (almost) the same approach in PW. Most of my pages have content-page template with content_blocks Repeater Matrix field holding most of the content in repeater items. What is missing in my solution is:

• the easy ability to restrict the order, allowed types of those items (though possible with this module);
• the ability to easily move/duplicate content blocks from project to project (still think Repeater Matrix should be PageTable Matrix);
• the ability to easily preview the page built (like with this solution) in admin / edit it inline on the frontend.

I see this way of building content very flexible, but still somehow unfinished. We have all the parts in PW to build a full-blown page bulder that will not allow too much for ones that do not need it, but will make it easy to build something really complex and interesting without programming. But those parts are not yet combined in a polished solution. I would certainly like to have it in PW (as a PageTable-like PageBuilder FieldType/Inputfield combo, probably).

[Noel Boss]

On 11/14/2018 at 5:25 PM, Ivan Gretsky said:

still think Repeater Matrix should be PageTable Matrix

THIS!!!!

[Chris Ernovsky]

Hello Everyone!

I'm new here, just signed up.
I've discovered PW few days ago (what a shame...) and I'm angry for myself that I lost several years of my life...

I'm a homegrown webdeveloper since 2005, started from pure HTML, then e107, Textpattern and from 2008 I work(ed) only with WordPress.
I've made over a hundred of sites. Most of them are simple blogs but my main site is quite large (with over a 10k entries and over 100k of media).

It's outdated a little bit so I was planning to modify and refresh it lately but then... Gutenberg happened.
Gutenberg as an editor is unintuitive, buggy, produces massive problems and it's incompatibile with most of the things I'm using
(it seems to be the same story for hundreds of websites built on WP).
And though the whole WP community is frustrated and angry, it's been forced with WP 5.0 as the beginning of rebuilding WP as a platform into... hmm... next Wix?

I was trying to discuss - my comments were deleted and my account has been blocked (as many others).
After 8 years of developing WP...

Well... I've frozen the site for updates and started looking elswhere.
I have few advanced demands so tried Drupal, then played a little with Craft, Codeigniter and Laravel (I'm not a programmer per se).
And after few recommendations I've finally found You.

Guys... I'm so thrilled and emotional. I can't stop reading and following tutorials on localhost.
PW is THE TOOL I was searching my whole life!
I'm going to study everything very carefully and next year I'm going to rebuild slowly (there's no rush) my main site with PW.

Back to Gutenberg:
I understand where it aims to be and what it tries to accomplish BUT this is wrong on so many levels.
As far as I can see, a barebone PW installation is far more flexible and useful then WP with 30 plugins.
And obviously you know it perfectly.
So I'm begging you: no Gutenberg here... ?

Cheers to Ryan and Everyone!
Greetings from Poland!

[bernhard]

Hi @phoros and welcome to the forum,

interesting read!

13 minutes ago, phoros said:

Gutenberg as an editor is unintuitive, buggy, produces massive problems and it's incompatibile with most of the things I'm using
(it seems to be the same story for hundreds of websites built on WP).
And though the whole WP community is frustrated and angry, it's been forced with WP 5.0 as the beginning of rebuilding WP as a platform into... hmm... next Wix?

I was trying to discuss - my comments were deleted and my account has been blocked (as many others).
After 8 years of developing WP...

Would be interested what your concerns have been. I love PW for many reasons, but I've also come across situations where I wished there was some kind of content-builder to give editors more flexibility than just different fields (where PW is awesome). There are several approaches for that already and I've built something like this several times already, but it still does not feel right, because you always have to start from scratch.

Seeing all those fance marketing screencasts about wordpress click-click magic I got a little frustrated from time to time, because building such functionality in pw needs a lot of time and effort - which means lots of costs and a disadvantage in terms of business.

So I'd be happy to hear some more details about the problems that gutenberg brings in. Thx

[Chris Ernovsky]

Hi @bernhard!

Gutenberg in Wordpress is a dual misconception:

• Wordpress is known as a blog platform. Yes, you can extend it massively and use it for many different projects but in the end it's mostly about operating with text. It's usually enriched with images and embeds but it's still an article, news, etc. So many authors for so many years just copied and pasted their texts, added few media and with 2-3 clicks published it. Now, doing this simple task with Gutenberg is insanely uneffective: instead one simple menu in editor there are several (hidden) menus everywhere (in every block). And EVERYTHING is a block now - a title, a paragraph, an image, a quote and so on (imagine the amount of additional code it generates!). You have to do absurdly much more things to get the same result and you have to spend much more time to do the simplest task.
• So maybe Gutenberg is for designers rather? If it's true and if this was the idea (to simplify building content) - there are so many so much better WP site builders and themes (to do so) FOR YEARS! Anybody who wants a one-page site or portfolio just picks up a theme and few plugins and voila. The core blogging mechanism stays safe and ready when necessary.

I can understand that Matt, Automattic and the dev-deciders want to turn with WP elsewhere and change the character/purpose of the platform. Their choice (though the style they're doing that is embarrassing). But cutting out all those (millions?) of websites using WP for TEXT PUBLISHING and trying to convince the whole world that Gutenberg is better tool to write an article than TinyMCE or CKEditor is as funny as idiotic.

From practical point of view, Gutenberg is incompatible with so many plugins and themes (used stably for years!) that it broke hundreds (thousands?) of websites. Blank sites, errors, bugs everywhere AND in many cases people have no idea where is a problem and what to fix. At my site (mentioned above) I have 50 plugins. Half of them doesn't work or generates errors with Gutenberg. Just take a look at the reviews of Gutenberg (and their dates!) to catch the disaster happening there.

I know perfectly from my own experience how such a "click click drag-and-drop magic" approach can be tempting.
Probably even using PW at some point (it's still ahead of me!).
But it's the whole different way and phillosophy of creating (fast) content. There are all those Wix, Weebly, Spacesqare and Mobirise builders for that.
WordPress as it was thought in the beginning shoudn't go that way (that 30% of web share will fall quickly).

[teppo]

Without going into too much detail regarding the previous discussion here, I've just heard of https://gutenbergcloud.org/ for the first time, and I've got to say that it seems promising. The basic idea is to provide a common service for installing all sorts of blocks – and only the blocks you actually need. (Currently the situation is roughly that some blocks are shipped as one-block plugins, while others ship as massive collections of blocks, neither of which are really optimal.)

Also took a quick dive into Gutenberg for Drupal (which Gutenberg Cloud promotes), and they've done a smashing job there ?

Quote

Code once, use everywhere: As Gutenberg blocks are CMS agnostic, we want to provide an ecosystem all systems can connect to.

I'm definitely interested in looking into setting up a Gutenberg Fieldtype, or perhaps a Process module – or something similar. Though once again my desk is kind of full, so who knows.

--

Although I did say that I wouldn't go into the earlier discussion, just a quick comment on that:

As a tool Gutenberg has it's flaws, and it's definitely not a tool that would/could/should somehow replace what ProcessWire does. I don't think that anyone has been suggesting that here either.

Gutenberg is a block builder, and admittedly one still in a relatively early state – but even at this stage it looks promising. There really aren't any serious contenders, particularly fully free and open source. Right now there's also a lot of momentum behind the project – not to mention financial backing from Automattic – which means that as a tool it will undoubtedly improve over time, and current issues will eventually get ironed out.

Whether going with Gutenberg is a good thing for WordPress or not is a debate I don't want to get into. Personally I don't know anyone seriously developing sites with WordPress and not using either one of the existing block / page builder solutions, or some sort of ACF based approach. WordPress alone is not the point – the plugins are.

Since block editors are probably the most popular way of building WordPress sites, in my opinion having one built into the core is a logical next step.

But that's just my opinion. And again, it has little to do with ProcessWire ?

[Ivan Gretsky]

On 3/8/2019 at 5:55 PM, teppo said:

 There really aren't any serious contenders, particularly fully free and open source.

I think this one is pretty popular and powerful. Just to provide an alternative))

[szabesz]

3 hours ago, Ivan Gretsky said:

I think this one is pretty popular and powerful. Just to provide an alternative))

Related discussion: https://processwire.com/talk/topic/18646-visual-builder-approach/?tab=comments#comment-162880

 

 

 

[teppo]

7 hours ago, Ivan Gretsky said:

I think this one is pretty popular and powerful. Just to provide an alternative))

Thanks! Didn't know of GrapesJS, looks interesting ?

That being said, my first impressions are somewhat mixed: the default theme is pretty bad in terms of accessibility, UI felt kind of confusing (possibly because there are a million options there), and overall it could use a major facelift. On the other hand it seems fast, apparently there are quite a few features available as plugins, and it does seem to be actively maintained as well.

Overall I'm getting a strong "for power users" vibe from GrapesJS, and so far it doesn't seem like something that I'd be happy to introduce to non-technical clients who "just want to add some blocks".

In other words: in my (possibly subjective) opinion Gutenberg still seems more viable than GrapesJS.

[Ivan Gretsky]

Hey, @teppo!

Last night I spent a few hours reading through Gutenberg docs and marketing materials. I must say those are very well written and the whole concept is appealing to me. But it seems to be coupled with Wordpress and not so easy to bring into ProcessWire. I know, there is a Drupal integration and the "editor for the open web" marketing stuff. But it still seems to me it is primarily for Wordpress for now. I am talking not about those static html type blocks with defined styling, but rather those they call dynamic, which use data stored in the database.

I wish we could have an editor like Gutenberg (in tearms of UI) in PW where we could easily create static and dynamic (based on other pages) content for a content area. And we could easily add blocks ProcessWire way and maybe even be able to render them with ProcessWire or ProcessWire-like API. Kind of like a mix of Gutenberg and Repeater Matrix.

I can see that as an Inputfield that could generate json data describing content and store it in the textarea fieldtype. Same way as Gutenberg does store its data as html+comments. Same way as CKEditor 5 seems to work. To generate that json we would need some kind of a an SPA editor with visual block representation. And GrapeJS seems to provide that type of functionality, calling itself a Web Builder Framework. I can imagine we could build whatever UI we need with it and add only what we need (no paddings, but rather a data description - look here). Maybe it will turn out GrapeJS does not do just that, but that's what I'm talking about))

And then we could query this field from PW template like

foreach ($page->grapenberg_field as $block){
	wireRenderFile("views/blocks/{$block->name}");
}

$block could be a new virtual page-from-json type and/or a Page.

[happywire]

On 9/19/2018 at 11:14 AM, teppo said:

the core probably shouldn't include a pre-built, "full featured" page builder

 

On 12/14/2018 at 4:20 PM, phoros said:

So I'm begging you: no Gutenberg here.

Longtime WP user. Came here to escape the madness that is Gutenberg.
Please, for love of ProcessWire, do not include any such editor crap inside core.
People can do so via modules or even admin themes but keep PW clean, neat, tight, free and fresh from such nonsense.
Just learned about ProcessWire a couple days ago at a JS workshop/conference.
Reading the docs, doing first examples and totally in love with it all.
Keep it that way please.

Regarding Gutenberg.
Not only do you need to know React deeply, no also JS and a lot of it and deeply also, then you get to work with a "the WP way" version of React to build things. With Gutenberg WP has set the bar to entry into the WP world way above average, all the hobby coders that could easily make a WP site given a month of learning are now facing a very steep and intense learning curve.

This will surly show going forward. This is what got WP off the ground in the first place. Ease of use and also ease of getting a site done. This has changed. Kids these days want to see results, fast. Sure if you don't care about PageSpeed or WebPageTest, just need a page-builder, plaster external libs all over the source, go ahead, if that is your game, and if that is what you unknowing client pays for, the sure, yes, use WP and Gutenberg exactly for this kind of crap.

But if you really do care about all these things and want to make a good site that performs well where the client can have multiple custom blocks showing in the frontend, then you are going to have to invest a lot of time learning JS and React and "the WP way of React". Not something I see any entry level coder feeling up to. For example Just go ahead and make a responsive image block, and I don't mean just the img tag but something more like this.

https://dev.opera.com/articles/responsive-images/

Asked around many frequented channels, senior and seasoned devs could not come up with something that produces usable source code.
One guy had a solution, asked him if he could show the code "sorry, no, we have a team of devs working on that in our agency and cannot show it publicly".
Go figure. A whole team of devs at an agency for a responsive image block to work in WP.
Well done Matt and super smooth more there Mark, slipping React into WP that way.
A good colleague that has been using WP all his life and knows PHP inside out tells me "I am going to stay away from Gutenberg for as long as I can".

By your means, feel free and make a module, load the editor of your choice, give the client what you think they need or want, but do all this strictly kept away from the beautiful, clean and nice source that is ProcessWire.

Given the WP mess I am sure there will be more and more people going to use ProcessWire in the future.
I plan to speak publicly about ProcessWire at a conf as well as hold workshops, I am that much convinced about it.
I would not even go this way if I would have discovered any dependencies on external libs or any such page-builder crap that now WP has built in.

And now back to the docs and examples.
It is such a pleasure.
ProcessWire.

[bernhard]

I don't think that implementing another framework would be the way to go. I think we already have a great framework for editing our content: ProcessWire (the backend, meaning ProcessPageEdit). We have a great ecosystem with our fieldtypes and inputfields. It would take huge effort to rebuild all this on another framework (like grapejs).

My approach would be to keep all blocks as pages with all the benefits we get from it (setting templates, having access control, etc). Those blocks could easily be edited right away in the backend, as they are pages. Just append ?modal=1 and you have exactly what you need: A UI to edit your block. No extra work, no breaking updates etc.

Repeater and Repeater Matrix already show that this is possible. It would just need a new inputfield where we can drag&drop, copy, remove, create those blocks. @joshuag  and @elabx have already shown that this kind of magic can be done in the pw backend:  https://processwire.com/talk/topic/19557-designme-visually-layout-your-edit-screens-preview/ 

@joshuag and @elabx which library are you using for this drag&drop magic and also for the side panel?

[happywire]

10 minutes ago, bernhard said:

I don't think that implementing another framework would be the way to go. @joshuag  and @elabx have already shown that this kind of magic can be done in the pw backend:  https://processwire.com/talk/topic/19557-designme-visually-layout-your-edit-screens-preview/

Totally agree. Keep ProcessWire clean and do what you like to do in the backend.
Having a default editor that all new devs/clients must use would ruin ProcessWire for good.
More a fan of "build it yourself, nice and clean" than "click and drag it yourself" .. and be left with a mess of badly performing source code full of external libs etc.

[szabesz]

On 3/12/2019 at 9:17 AM, happywire said:

Well done Matt and super smooth more there Mark, slipping React into WP that way.

When React dies, so does WordPress. They have tightly coupled WP to Reach, the learning curve to WP development has become a lot steeper than it was before. While JavaScript and browsers are evolving in a direction where therel will be less and less need for complex frameworks, see:

https://codequs.com/p/r1Jzty4S4/do-we-still-need-javascript-frameworks

quote:

"That said, much of what frameworks do will probably become easier to do with smaller libraries and/or native code as time goes on. Take my application as an example. At the same time, if the large frameworks and libraries remain versatile they may morph, adapt, and stick around. If not, they may end up like jQuery — a tool of the past for the most part."

I would like to add that jQuery is not a thing of the past but still going strong ?

[szabesz]

17 minutes ago, bernhard said:

Repeater and Repeater Matrix already show that this is possible.

I would concentrate on improving these and the Page Table field. For clients wanting to edit content easily, frontend editing is often enough. Actually, my clients would not be able (or willing) to use a pagebuilder anyway, they just want to click on ONE thing and edit text or images, any more than that and I am asked to do it instead.

[Ivan Gretsky]

Nobody's talking about bringing content builder stuff to the core. I guess only Ryan could))

But the request for content building is high. Content is king. And RepeaterMatrix + Hanna codes are not as user friendly as Gutenberg seem to be. SPA editing is way more pleasant than opening and saving things one after another and adding images only after 1st save.

PageTable Extended showed a way true block editing could be done in PW. Frontend editing is another step that could revolutionize content editing, but I never read about any good implementation. RepeaterMatrix is cool and could be even better if it would be PageTableMatrix with a similar Inputfield)))

I think we can and should find a way to solve this need in true ProcessWire way. And we have to look at competition.

Gutenberg might be hard and messy for developers, but it is desirable for end users. Let's make good for both using our strong points.

P.S. js page api was on the roadmap. Might be a good fit here once it's done.