✅ Elementor 1.8 - Beta Release (RC3 Updated)

arielk commented 7 years ago

===========

RC3 UPDATED - PLEASE READ BELOW!

===========

Hi everyone,

We have been working on version 1.8.0 for several weeks now, and we're excited to share the new Inline Editing feature and get your feedback.

Please review the new features carefully, preferably on your staging sites and not in production.

Inline Editing

In version 1.8, we continued our focus on improving the ease of use and overall Elementor user experience. We added several inline editing options to add content directly on the frontend itself.

You can now use the Heading widget, for example, and edit the Heading text and design simultaneously, directly in the editing screen, without having to switch through tabs or other setting panels.

All previous editing controls are still available on the widget panel, but in many cases having the ability to edit a simple spelling mistake or change phrasing is much easier to do from the frontend screen.

This is a huge advancement for Elementor's page design experience, and it's an extremely helpful feature for content writers, marketers, designers and site owners alike.

Developers in Mind

If you are a developer that develop themes, addons or extensions for Elementor, you are invited to learn more about this cool new feature of Inline Editing through the documentation we prepared. This feature has been added in the current version.

When the user edits text inline, sometimes he or she needs to be able to add inline styling. Elementor supports two types of inline editing toolbars.

The “advanced” toolbar has all the usual styling options you normally see in your editor, the “basic” toolbar has only three buttons - bold, italic and underline. When you define the toolbar as “none”, the user will be able to edit the text inline, but won’t see any styling options, as the toolbar will be disabled.

As of version 1.8.0, you can define 3 inline editing states for each textual control in the panel:

Inline text editing without any toolbar (just typing text inline)
Inline text editing with a basic toolbar including: bold, italic and underline buttons
Inline text editing with an advanced toolbar, including: adding / removing links, H1-H6 heading, preformatting, blockqoute, paragraph and bullet or numbered list buttons

Keep in mind that we recommend to use inline editing in the following way: for wysiwyg control use the advanced toolbar, for textarea control use the basic toolbar and for simple text control you should not have toolbars (simple inline editing).

You can see an example widget that uses all the new inline editing features in our Hello World plugin for Elementor.

To define a specific area in the element to be editable inline, use the newly introduced add_inline_editing_attributes() method.

More advanced widgets that use repeater fields will be able to use the get_repeater_setting_key() method to add inline editing capabilities for specific items. Both methods are well documented and has code examples.

How to Install Beta Version

If you still haven't enabled beta testing in Elementor, please follow these steps:

Go to Elementor > Tools > Versions
Enable the beta tester feature
Go to Dashboard > Updates and update to the latest beta version

This will get you testing the new Elementor 1.8.0 RC3. You can also download the new version here: https://downloads.wordpress.org/plugin/elementor.1.8.0-RC3.zip

Notes

Designated time for release: November 7, 2017

Many thanks for your support and help!

For bugs and remarks, please reply with a comment below!

Elementor Beta - Sign Up Now For Our Elite Group Of Early Access Testers

cavalierlife commented 7 years ago

Very exciting, thank you for doing this!

I do see a bug however. I've done a quick screencast to show the problem in action. http://screencast-o-matic.com/watch/cb6wb32eq6

Basically, cannot see the toolbar options. I don't think I have any CSS setting that would be affecting this, but I'll try on a new install when I have time. I also had Gutenberg installed, but deactivating it didn't affect this problem, so that's not the cause.

I do have low resources on this test site, btw.

badcat commented 7 years ago

Inline Editing seems pretty solid on my dev site.

Perhaps a "remove all formating" button would make sense too.

arielk commented 7 years ago

@cavalierlife please do hard refresh (ctrl+R / f5) in your browser or check in incognito mode if it loads all the new icons on the page.

cavalierlife commented 7 years ago

Doh! Yep, a hard refresh is all it needed. Sweet!

anandau commented 7 years ago

Inline editing is awesome. Just added inline editing support to one of my widgets. Loving it the way you guys have implemented it. Very developer friendly.

badcat commented 7 years ago

@anandau May I see your widget plugin?

I'm getting an error when starting with the example Hello World plugin here:
'hello_world_fail_load_out_of_date' not found

https://github.com/pojome/elementor-hello-world/blob/master/widgets/inline-editing.php

( ! ) Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'hello_world_fail_load_out_of_date' not found or invalid function name in /app/public/wp-includes/class-wp-hook.php on line 298

norewp commented 7 years ago

Looks good here and agree on the ease of inline editing implementation for addons/extensions - super simple, thank you :)

Now I got my work cut out with a tonne of modules to update before go live :D

anandau commented 7 years ago

@badcat I have not tried the hello world plugin. I just tried updating a widget of my existing plugin and it was successful. Can't show it to you as changes are not yet live.

The error message you are getting seems to be because of you might not have upgraded Elementor to 1.8 beta.

themedleb commented 7 years ago

Very nice and good idea implementation , so excited for this feature and all the coming ones.

norewp commented 7 years ago

[Sorry Off Topic]

@badcat Done a PR for the missing function - Note though that the declared version is 1.8.0 which will results in an Admin notice being output. @arielk could take care of the PR if it's ok please?

To mitigate that just change the version to 1.7.12 (only when testing with the RC version of Elementor) and you should be good :)

KingYes commented 7 years ago

@badcat This is just example plugin for developers to HOWTO write widgets to Elementor. BTW, we merged @norewp PR.

tudormnt commented 7 years ago

Everything works as expected. Congrats on this really important feature.

One thing that might prove to be a great addition for certain scenarios is live updating elements with the same setting key as the one which is being modified. If you're rendering the same control value in multiple places it makes sense to update it in all places while typing.

One good example would be having a text separator inside a widget which can be edited inline and should reflect on all text separators being rendered within the template (since they're the same).

In general, without this addition, any widget that renders the same text based control multiple times will fall short.

Hope this makes sense.

SniffleValve commented 7 years ago

Bug with the toggle widget.

First item is open on page load.

Cheers! Lyle

black-eye commented 7 years ago

Seems to work as expected. One minor discomfort is, that the toolbar isn't visible, unless some text is selected. I would expected to be visible all the time (but I suppose you have some good reason to do it this way).

It would be handy for 2 situations:

For block elements (H1, H2,...), where you wouldn't need to select (at least some of) the text to start formatting.
When inspecting the text structure - in long texts I'm used to click inside the headings to find out wheather it's H2 or H3 - to make one example...

No big deal, though.

For some future release, it would be handy to have some classic shortcuts - e.g. ctrl+b, ctrl+i, for the starters.

SniffleValve commented 7 years ago

@black-eye You can also bring up the toolbar by double-clicking any text, and triple-clicking will select all of it :) Cheers! Lyle

black-eye commented 7 years ago

@SniffleValve Yes, I know, but it's not that convenient - still one (or half) click more ;-) But as I said, no big deal there, maybe I'll just have to get used to it.

momo-fr commented 7 years ago

I note 2 bugs for me:

italic does not affect (in the normal editor yes)
if I put a quote impossible to disable it

arielk commented 7 years ago

v1.8 Beta Version RC2

We just released a new beta version, please update your version to v1.8.0 RC2.

This beta release includes:

New! - Added new networks to social icons widget (#2670)
Tweak! - Added compatibility with WP Color for WordPress 4.9 (#2550)
Tweak! - Added WP version class to the body in the editor
Fix! - Added Inline editing for icon list (#2616)
Fix! - Disable auto expanding for toggle in front-end (Thanks @SniffleValve https://github.com/pojome/elementor/issues/2666#issuecomment-341266872)
Fix! - Removed Elementor state from My Library
Fix! - Resolve embed template bug with new isEdit property

Please update or download the new version here: https://downloads.wordpress.org/plugin/elementor.1.8.0-RC2.zip

Thanks everyone for your help and feedback!

themedleb commented 7 years ago

It would be better to change text format to bold, italic, link, underline, ... with just clicking inside a word one time, not have to select it, that's what Wordpress text editor has natively.

norewp commented 7 years ago

There seems to be an assumption that when one clicks on a widget that has inline editing then one intends to change the "text" and therefore the controls should be visible.

This is not true in all cases and having the controls visible automatically can hinder the user's ability to select the column/section controls (depending on where that text control pops up). badux

avermat commented 7 years ago

Couple comments...

1) When I click a widget I would expect the cursor to appear where I click so that I can start editing the text right away. The first time I started using the inline editing I thought it wasn't working. Because for any text block I click, the cursor goes all the way to the end of the content. In some cases, when it's a long text block, the cursor isn't even on my screen, it's below the fold at the end of the content block. The fact that I have to click twice to start editing was a little confusing (and not like other inline editors I've used).

2) There doesn't seem to be consistency with which widgets allow me to add formatting. For example, the icon box doesn't allow me to make any of the heading text or paragraph text bold, italic, or underlined. Same with the button widget (and I'm assuming other widgets). It's a little confusing for an icon list widget to allow formatting but not an icon box widget. It makes it feel like it's broken.

3) To add a feature request in here, I would love to be able to change the color of a single word in a heading or text block. It would be a great addition to the formatting options.

vfxdude commented 7 years ago

One issue is the copy and paste from external source which adds lots of inline styles, but those styles are not applied before clicking out of the inline editor. When I test the Pen Editor, the editor that is used, this doesn't happen. It doesn't paste in any styles, so this is probably a feature you added. It would be best if the styles are applied in the inline editor, without having to click out. And it would be a good idea to have a clear formatting functionality like TinyMCE has (button in the toolbar or keyboard shortcut). And maybe a keyboard shortcut to paste like the Pen Editor (html markup without the inline styles). And maybe a copy/paste option where a default can be set (plaintext/markup/formatted).

2017-11-04_13-16-33

arielk commented 7 years ago

v1.8 Beta Version RC3

The final release candidate before 1.8 is going live!

Please update your beta version to RC3. This beta release includes:

New! – Added placeholder for empty control
Fix! - Don't clean style on paste text (thanks @vfxdude)
And a lot of fixes and tweaks for the new version

Link to download: https://downloads.wordpress.org/plugin/elementor.1.8.0-RC3.zip

Thanks!

norewp commented 7 years ago

Do we have a list of all the modules that have inline editing applied to?

arielk commented 7 years ago

@norewp We apply Inline Editing to all 1.8 widgets. We will do this soon as well on all the widgets of E-pro

copen8 commented 7 years ago

Problem: When I choose to edit text and press the Italic button. I can't immediately see the result only when I save and preview the site the changes are visible. Furthermore when I press the italic button I can't "unselect" it if you know what I mean. 👯

arielk commented 7 years ago

@copen8 Is your heading (H2) defined with italic using CSS?

Try changing the HTML tag control to a paragraph and let me know if it resolves the problem.

copen8 commented 7 years ago

Tried every HTML tag that is available in Elementor. No difference. It don't change and I can't deselect it.

So if i press on italic once i can't undo it. The text is then wrap it tags and cannot be unselected

elementor / elementor