Old style for classic block #4948

ellatrix · 2018-02-08T09:52:56Z

Description

Fixes #4926. Gives the classic block the old look.

One problem: the toolbar will only start showing on first time focus. :( @spocke, would it be possible at all to add a setting to the modern/inline theme to always show the toolbar? It might also be good to make a separate "theme" for this as we're not using quite a bit of logic in it.

How Has This Been Tested?

Create a classic block.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code has proper inline documentation.

mtias · 2018-02-09T12:44:36Z

This is looking good.

Agreed on fixing the first time focus. It actually doesn't work unless you re-focus when you insert via auto-complete:

mtias · 2018-02-09T12:52:37Z

Related: #4928.

ellatrix · 2018-02-09T13:24:00Z

I'll copy over parts of the "inline" theme from TinyMCE in the next commit so we have more control.

ellatrix · 2018-02-13T11:40:17Z

I don't really see a way of fixing the focus problem without having to copy over a significant amount of code to the classic block to overwrite the theme. It would be nicer if the inline theme just had a setting to show toolbars all the time instead of just when the editor is focussed.

ellatrix · 2018-02-13T11:41:37Z

Or for createToolbars etc. to be part of TinyMCE's UI module.

jasmussen · 2018-03-07T09:50:36Z

Sorry I missed this. This is looking really good.

Here's the toolbar issue in GIF form:

It would be nice if we could address this, but it doesn't feel like the end of the world to me. Unless we can do some simple hack like run an onload focus for each classic block (hacky), I think it might be worth getting this in and iterating.

jasmussen · 2018-03-07T09:50:55Z

Am seeing this error, though:

Possibly unrelated?

ellatrix · 2018-03-10T14:59:06Z

@jasmussen I don't like the idea of manually moving around focus when the page initialises, but it could work... cc @afercia

jasmussen · 2018-03-10T15:01:20Z

I can live without it, it'd just be nice if we could find a way to show the toolbar on the classic blocks from the start. But can live without it.

ellatrix · 2018-03-10T15:46:35Z

Rebased, hopefully the error is gone.

Also added the focus and attempted to reset focus to the previous element, but for some reason it still has the caret in the last classic block... TBH I can live with this so the UI shows up while we wait for a setting in TinyMCE.

ellatrix · 2018-03-10T15:48:58Z

Cc @spocke or @Afraithe, would it be possible to add a setting to the inline mode of the "modern" TinyMCE theme to always show the toolbar (as opposed to show/hide on focus/blur)?

spocke · 2018-03-12T10:15:53Z

What we could do is to add a new way of initializing the editor. Currently there is inline and iframe mode what's needed here is some form of inplace editing where a div is converted to contenteditable and the ui is appended before that target element. Not exactly sure how that should be exposed though the api though. But this is something we have seen people asking for before being able to convert div elements to editors but have the ui in place and not hide on blur.

jasmussen · 2018-03-21T09:31:12Z

I feel like maybe we should merge this in as is, and then open a separate ticket based on #4948 (comment). Thoughts, @gziolo @karmatosed ?

karmatosed · 2018-03-21T14:41:31Z

I feel like maybe we should merge this in as is, and then open a separate ticket based on #4948 (comment). Thoughts, @gziolo @karmatosed ?

Seems like a very solid plan @jasmussen.

gziolo · 2018-03-22T12:06:19Z

Have you tested it with more than one instance of the classic editor?
Have you tested it with the classic editor as a block in the middle of the post?
The fact that we set focus on init might bring unexpected behavior. I can test it quickly myself, too.

gziolo · 2018-03-22T12:13:01Z

As I expected, the focus stays in the last Classic block in the document after it gets loaded. I don't think this is an expected behavior. We should look into an alternative solution to make this work.

ellatrix · 2018-04-07T08:50:38Z

@gziolo See the PR description and comments. No easy solution. Maybe we should just keep on hiding it for now and only update the styles.

gziolo · 2018-04-07T15:21:08Z

Yes, let’s do the tweak with styles first. I think we can also test if showing always the border for the classic block would be sufficient. Maybe we don’t need this toolbar when block is not selected.

gziolo · 2018-04-07T15:24:33Z

Another idea, after checking the screencast from @jasmussen. Would it help to add a placeholder for the toolbar to avoid this flickering effect?

gziolo · 2018-04-07T15:29:26Z

By the way, can we add an icon to convert to blocks inside the toolbar? That would be awesome 😍

jasmussen · 2018-04-07T15:39:27Z

Both of those are good ideas. We have a hover label currently, perhaps that could be the "until you select" toolbar.

ellatrix · 2018-04-12T15:53:17Z

@jasmussen @gziolo Updated. This should be a lot better. Still not perfect as long as we can't create the toolbar immediately.

ellatrix · 2018-04-12T15:54:13Z

By the way, can we add an icon to convert to blocks inside the toolbar? That would be awesome 😍

Sure, but separately please :)

jasmussen · 2018-04-13T07:45:21Z

Nice work Ella, here's a GIF:

I pushed a little polish so it looks like this:

That included removing the hover label. This label is likely to go through some iteration regardless, and perhaps become a drag handle, but once we do that it migh sit to the left instead of the top.

With this latest polish, if you approve the code, I think this is good to go! Stellar work, excited to get this in!

ellatrix · 2018-04-13T08:39:29Z

@jasmussen @gziolo Thanks for the changes and testing!

gziolo · 2018-04-13T08:39:58Z

Agreed with @jasmussen, this looks great and make it very clear that we are dealing with Classic block. Thanks for making all the adjustments to this PR, excellent job @iseulde 💯

gziolo

@jasmussen is fixing one more small UI glitch and we should merge 👍

ellatrix · 2018-04-13T08:49:40Z

blocks/library/freeform/editor.scss

@@ -140,7 +140,7 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {

 .freeform-toolbar {
 	width: auto;
-	margin: - $block-padding;
+	margin: -#{ $block-padding + 1 } -#{ $block-padding } -#{ $block-padding } -#{ $block-padding };


I think this code deserves a comment. :)

😂

On it in a minute.

I also lost the top border now.

It works, computes px value :)

jasmussen · 2018-04-13T08:56:42Z

So, turns out the past change was due to a rounding error, which I will look at separately. I reverted, so no comment necessary :) Good to go.

ellatrix · 2018-04-13T09:12:16Z

Okay :) We can iterate in separate PRs :)

jasmussen · 2018-04-13T09:44:41Z

🔥 🔥 🔥 🔥

ellatrix added the [Status] In Progress Tracking issues with work in progress label Feb 8, 2018

mtias added the [Component] TinyMCE label Feb 8, 2018

mtias mentioned this pull request Mar 6, 2018

Simplified experience for writing #5283

Closed

ellatrix force-pushed the try/classic-old-style branch from d4ae3e6 to 5cd805a Compare March 10, 2018 15:44

ellatrix requested a review from a team March 10, 2018 15:49

ellatrix force-pushed the try/classic-old-style branch from 5cd805a to a90e66f Compare March 10, 2018 15:52

gziolo self-assigned this Mar 23, 2018

gziolo added this to the 2.6 milestone Mar 29, 2018

jasmussen mentioned this pull request Mar 30, 2018

Classic block overlaps previous block #5908

Closed

youknowriad modified the milestones: 2.6, 2.7 Apr 5, 2018

ellatrix added 3 commits April 12, 2018 16:59

Old style for classic block

08aff4d

Force toolbar rendering by focus

36e99db

Add placeholder when MCE toolbar is not created yet

4da48d7

ellatrix force-pushed the try/classic-old-style branch from a90e66f to 4da48d7 Compare April 12, 2018 15:51

ellatrix requested review from gziolo and jasmussen April 12, 2018 15:53

Polish the font, hide the hover label.

e23bfb1

gziolo added [Type] Enhancement A suggestion for improvement. and removed [Status] In Progress Tracking issues with work in progress labels Apr 13, 2018

gziolo added 2 commits April 13, 2018 10:14

Blocks: Remove some obsolete style overrides for Classic block

37b8067

Blocks: Update snaphsot for freeform test

8655168

gziolo approved these changes Apr 13, 2018

View reviewed changes

Fix toolbar space.

d8d9f9a

ellatrix commented Apr 13, 2018

View reviewed changes

Revert past change.

28a1566

ellatrix merged commit 9a89874 into master Apr 13, 2018

ellatrix deleted the try/classic-old-style branch April 13, 2018 09:12

kjellr mentioned this pull request Aug 1, 2018

Block audit: Classic #8368

Closed

6 tasks

kienstra mentioned this pull request Oct 15, 2019

Add Classic Text control, including list controls getblocklab/block-lab#432

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Old style for classic block #4948

Old style for classic block #4948

ellatrix commented Feb 8, 2018 •

edited by gziolo

Loading

mtias commented Feb 9, 2018

mtias commented Feb 9, 2018

ellatrix commented Feb 9, 2018

ellatrix commented Feb 13, 2018

ellatrix commented Feb 13, 2018

jasmussen commented Mar 7, 2018

jasmussen commented Mar 7, 2018

ellatrix commented Mar 10, 2018

jasmussen commented Mar 10, 2018

ellatrix commented Mar 10, 2018

ellatrix commented Mar 10, 2018

spocke commented Mar 12, 2018

jasmussen commented Mar 21, 2018

karmatosed commented Mar 21, 2018

gziolo commented Mar 22, 2018

gziolo commented Mar 22, 2018

ellatrix commented Apr 7, 2018

gziolo commented Apr 7, 2018

gziolo commented Apr 7, 2018

gziolo commented Apr 7, 2018

jasmussen commented Apr 7, 2018

ellatrix commented Apr 12, 2018

ellatrix commented Apr 12, 2018

jasmussen commented Apr 13, 2018 •

edited

Loading

ellatrix commented Apr 13, 2018

gziolo commented Apr 13, 2018

gziolo left a comment

ellatrix Apr 13, 2018

jasmussen Apr 13, 2018

ellatrix Apr 13, 2018

gziolo Apr 13, 2018

jasmussen commented Apr 13, 2018

ellatrix commented Apr 13, 2018

jasmussen commented Apr 13, 2018

Old style for classic block #4948

Old style for classic block #4948

Conversation

ellatrix commented Feb 8, 2018 • edited by gziolo Loading

Description

How Has This Been Tested?

Checklist:

mtias commented Feb 9, 2018

mtias commented Feb 9, 2018

ellatrix commented Feb 9, 2018

ellatrix commented Feb 13, 2018

ellatrix commented Feb 13, 2018

jasmussen commented Mar 7, 2018

jasmussen commented Mar 7, 2018

ellatrix commented Mar 10, 2018

jasmussen commented Mar 10, 2018

ellatrix commented Mar 10, 2018

ellatrix commented Mar 10, 2018

spocke commented Mar 12, 2018

jasmussen commented Mar 21, 2018

karmatosed commented Mar 21, 2018

gziolo commented Mar 22, 2018

gziolo commented Mar 22, 2018

ellatrix commented Apr 7, 2018

gziolo commented Apr 7, 2018

gziolo commented Apr 7, 2018

gziolo commented Apr 7, 2018

jasmussen commented Apr 7, 2018

ellatrix commented Apr 12, 2018

ellatrix commented Apr 12, 2018

jasmussen commented Apr 13, 2018 • edited Loading

ellatrix commented Apr 13, 2018

gziolo commented Apr 13, 2018

gziolo left a comment

Choose a reason for hiding this comment

ellatrix Apr 13, 2018

Choose a reason for hiding this comment

jasmussen Apr 13, 2018

Choose a reason for hiding this comment

ellatrix Apr 13, 2018

Choose a reason for hiding this comment

gziolo Apr 13, 2018

Choose a reason for hiding this comment

jasmussen commented Apr 13, 2018

ellatrix commented Apr 13, 2018

jasmussen commented Apr 13, 2018

ellatrix commented Feb 8, 2018 •

edited by gziolo

Loading

jasmussen commented Apr 13, 2018 •

edited

Loading