Add Paragraphs buttons have a misleading look

Hi, there is another issue here https://www.drupal.org/project/frontend_editing/issues/3423781 📌 Update Frontend Editing UI Needs review that changes a bit the look of the buttons, probably it should fix this issue. If yes, feel free to close this issue in favour of that one.

Thanks for reporting this.

Try new 1.6.0 version

Great work, a super improvement!

Just one thing from me and that is that the extra vertical borders when Paragraphs are inside others causing some unsightly 'jiggling'...

Suggest only adding vertical borders to the outermost element?

Good suggestion, this will be worked on.

@sirclickalot - have you tried enabling hover mode at /admin/config/frontend-editing/ui-settings? This makes it a bit nicer.

But if you have a good suggestion for a visual improvement, please write it :-)

@breidert →

Thanks for that suggestion, I tried it and if I'm honest, I think it's worse still.

The reason is that now, in addition to the HORIZONTAL pad, it now also pushed the content DOWN using an animation ;-(

My overall take on all of this is that what is best for editors is zero 'movement' of the underlaying content - all they should see is obvious but subtle highlighting floating over the top of the editing target(s).

Other visual improvements

Textual 'Add before' and 'Add after' links

I also note that you can just about see a textual 'Add before' link underneath the .common-actions-container...

If I kill off the .common-actions-container then it is easier to see...

While I of course understand that it needs to be present for accessibility, I don't think it should be visible to the eye.

Border widths and colours

I suggest that the widths of the borders when hovering should be kept to a minimum in width and that they were actually better when they were more subtlety-coloured.

For me this is all about leaving the content exactly as-is (i.e. no movement) and then only ever making subtle 'suggestions' as to what the content editor might want to 'move' or 'edit'.

When the content-editor is hovering over the content, they already the strong intention to edit, they just to be able to 'see' a confirmation the available options not have then thrust into their face ;-)

A crude mock-up...

If it helps, this is a content-focussed philosophy that we practice on all our educational pages because we want to avoid our learners from being distracted from the main content we are trying to get them to consume.

Thus, we provide all the little EXTRAS but we do so subtlety; this seems to work very well as they seem to enjoy the experience better than ones where they are offered too many options too overtly...

I just wanted to add another couple of point sin relation to cosmetics.

Vertical jiggle

I have managed to remove the horizontal movement simply by overriding CSS but I am still getting the vertical 'jiggle' ...

No option to colour + signs

I have also been able to easily re-colour the bounding boxes back to the colours as in v1.5x but the + signs are proving challenge because they are SVGs....

Finally, I wondered what the thinking was behind with the adjusted letter-spacing...

.action-title {
...
  letter-spacing: 0.2em;
...
}

I hope all this is useful feedback - you did ask!

Overall, I think I would be happier as a site-builder / theme to see as little imposed colour and styling as possible.
That said I appreciate it's a tricky business getting the balance right.

The new hover / plus signs approach of v1.6x is still a good move forward!

@SirClickalot - your feedback is highly appreciated, we also reviewed internally and arrived at similar conclusions.

We plan to release a new version in next week with the above improved.

Question: Do you think a toggle for editing is useful? Then you could turn off all frontend_editing effects and interaction elements if you want to review or simply consume content.

I am thinking about something like this:

Hi,

Yes, I agree, a 'global' ON/OFF would be very nice because often, content-editors might also be 'normal' site users.

My gut feeling is to go with toggles that exactly match the Gin theme since it is - in my opinion anyway - THE theme to use for backend editing and admin pages...

and

Also, as I mentioned in another issue, the ability to configure entire regions and/or blocks where which we never want to see any FEE prompts.

I will close this issue, because it was about the add buttons, that were changed already. The other findings are now there own issues https://www.drupal.org/project/frontend_editing/issues/3436377 📌 Improve Frontend Editing UI/UX including nested elements Fixed and https://www.drupal.org/project/frontend_editing/issues/3436501 📌 Implement a toggle that shows/hides the Frontend Editing UI Active

I have noticed that latest release (1.61) we are still seeing plenty of 'jiggling' with embedded Paragraphs...

@SirClickalot, please report this in another issue. This issue was about changing the icons of add buttons. Here is an issue with some improvements https://www.drupal.org/project/frontend_editing/issues/3436377 📌 Improve Frontend Editing UI/UX including nested elements Fixed , so probably your comment should land there instead.

Automatically closed - issue fixed for 2 weeks with no activity.