Implement a Front-End "What You See Is What You Get" (WYSIWYG) Editing Mode in Gutenberg

[orionp13]

Transition Gutenberg to a Full Front-End "What You See Is What You Get" (WYSIWYG) Gutenberg Editing Mode

What problem does this address?

Currently, the Gutenberg editor operates primarily in the back end, where the editing experience does not fully match the final appearance of the content on the front end. This disconnect can lead to frustration for users who want a more seamless, visual editing process directly on the live page. Many users find it challenging to predict how the content will look after publishing, requiring constant switching between editing and preview modes. This workflow reduces efficiency and can create inconsistencies in design, particularly for those with less technical expertise who may struggle with fine-tuning their layouts.

What is your proposed solution?

To improve the editing experience in Gutenberg, I propose the introduction of a front-end "What You See Is What You Get" (WYSIWYG) editing mode. This feature would allow users to edit content directly on the front end, in a way that accurately reflects the final design and layout of the page, similar to the experience offered by tools like Elementor. In this mode, users could make adjustments to text, images, and blocks directly within the live view, seeing their changes in real time without needing to toggle back and forth.

Key aspects of the solution include:

• A front-end editor that mirrors the live design, enabling users to edit content visually and interactively.
  

• Real-time updates on the front end, showing changes as they are made, with the option to save or revert as needed.
  

• An intuitive interface that allows drag-and-drop adjustments, inline text editing, and flexible styling control directly on the page.
  

• Compatibility with existing Gutenberg blocks and functionality to ensure a cohesive editing experience.
  

This feature would make Gutenberg more accessible and user-friendly, allowing users to create and refine content with greater ease and confidence by eliminating the guesswork involved in traditional back-end editing.

[annezazu]

Thanks for opening this proposal!

To improve the editing experience in Gutenberg, I propose the introduction of a front-end "What You See Is What You Get" (WYSIWYG) editing mode. This feature would allow users to edit content directly on the front end, in a way that accurately reflects the final design and layout of the page, similar to the experience offered by tools like Elementor. In this mode, users could make adjustments to text, images, and blocks directly within the live view, seeing their changes in real time without needing to toggle back and forth.

Right now, the aim of Gutenberg is to offer WYSIWYG but within the editor. In time, the aim is that the experience becomes so good there's less of a need to switch between the front end. As a result, I'm going to close this out in favor of #29398 as this touches on more of what is likely to be built/explored rather than adding editing to the front end.