Use nested blocks for quotes #6520

ellatrix · 2018-05-01T12:26:19Z

Revert "Revert "Use nested blocks for quotes (#6054)" (#6501)"
This reverts commit 230ad0d.

Description

Redo of #6054.

Things to fix:

~~Formatting toolbar for cite.~~
~~Cite placeholder is hard to discover.~~
~~There should be no arrows if there is only one block.~~

How has this been tested?

Create a quote and pull quote block.

Checklist:

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

ellatrix · 2018-05-01T12:56:14Z

blocks/rich-text/style.scss

@@ -82,7 +82,7 @@

 .block-rich-text__inline-toolbar {
 	display: flex;
-	justify-content: center;
+	justify-content: attr( data-justify-content );


@jasmussen I don't know if this is a good way to address the issue where the toolbar should be aligned the same as the content? Looking at the text-align property seems too hard to do.

This is a bit hard to grok for me without a screenshot. I'm also not familiar with the justify-content property. Is this about the alignment of the inline toolbar in context of that text being non-centered?

@jasmussen Sorry, I changed it in the meantime because this didn't work... I've added the styles inline in React now. Ideally the toolbar should be positioned the same as the text, but it doesn't seem like there's an easier way to do it. The block has to set the toolbar position as well.

tofumatt · 2018-06-14T19:20:02Z

There are a lot of conflicts with this branch, I'm guessing because it's a bit old. Could you rebase onto master before we get to reviewing, just in case the conflict resolution changes anything non-trivial?

ellatrix · 2018-06-20T15:42:08Z

Rebasing...

ellatrix · 2018-06-21T10:16:47Z

Oh, it's again out of date.

Migrations stopped working for some reason, looking into it, and fixing e2e tests.

ellatrix · 2018-06-21T11:51:14Z

Once more out of date :)

ellatrix · 2018-06-21T12:14:52Z

Discovered by an e2e test (yay): The in-between inserter is odd at the edges of a nested block areas. It's not clear where the block should be inserted: above the wrapper or inside the wrapper. For users this will get a bit confusing. Cc @jasmussen @karmatosed.

jasmussen · 2018-06-22T07:42:43Z

Discovered by an e2e test (yay): The in-between inserter is odd at the edges of a nested block areas. It's not clear where the block should be inserted: above the wrapper or inside the wrapper. For users this will get a bit confusing.

This is the new version, correct?

Can you elaborate a bit on this? Is it a visual issue or a technical one?

ellatrix · 2018-06-25T13:25:27Z

This is the new version, correct?

Yes, current master.

Can you elaborate a bit on this? Is it a visual issue or a technical one?

Visual/UX. There are two possible insertion points at one single line at the edges of nested block areas.

ZebulanStanphill · 2018-06-25T18:12:16Z

@iseulde @jasmussen The Divi Visual Builder gets around this issue by shifting the inserter buttons to the left or right when they get too close together and by having different colors for the inserter buttons depending on whether something is a section, row, or module. Not exactly sure how something like this would be implemented in Gutenberg, but I thought I would point it out anyway in case it gives any ideas:

https://supergeniuszeb.com/wp-content/uploads/2018/06/Divi-Visual-Builder-add-button-responsiveness-demonstration.webm

ZebulanStanphill · 2018-08-03T19:21:51Z

@iseulde @jasmussen The sibling inserter issue could be resolved if something like these mockups I made in #6224 was implemented.

This would make it very clear where a block would be inserted, since the sibling inserter would be more closely tied to the block it is inserting after. There would also be no overlapping sibling inserters like there are now.

ZebulanStanphill · 2018-08-24T02:28:59Z

I proposed a possible solution to the overlapping sibling inserters issue in #9202.

Note also the improvements to the block UI proposed in #9074 and #9282 that would make it easier to interact with the blocks nested in a Quote block.

tofumatt · 2018-12-03T16:23:11Z

Because #6054 was merged, I'm going to close this. It looks like this should've been closed but it slipped through the cracks.

ellatrix · 2018-12-03T17:23:17Z

@tofumatt That commit was reverted.

tofumatt · 2018-12-03T17:44:38Z

Shoot, I see, my bad 😓

Sorry, I was just trying to clear up old PRs still flagged for review. Does this still require a review then?

ellatrix · 2018-12-03T17:46:06Z

I think this just needs another rebase, but it seems less important atm.

tofumatt · 2018-12-03T17:47:07Z

Fair enough, sorry I was working backward through my review queue so no rush 😅

gziolo

This one needs a solid rebase to bring it up to date. @youknowriad - is this something we want to spend time on in Phase 2? Does it make sense to refresh it or should we rather close it and reopen in the future when it's necessary? I'm marking it as Stale until it will get revisited.

Sven74Muc · 2019-02-26T09:58:43Z

I'm pointed here through this ticket: https://core.trac.wordpress.org/ticket/46341

Any chance to go ahead with this issue? For me it looks like it's stil open but no work on it.

(I'm a newbee here on github, so please excuse if I missunderstand this thread.)

ellatrix · 2019-02-26T10:41:34Z

@Sven74Muc Yes, this pull request (branch) should be rebased or we could also start from scratch. Last time I checked the code looked good, but there were some issues with the design of nested blocks that made us want to wait with this until they are resolved. I'm not sure if this is still the case. Cc @jasmussen or @karmatosed? Do you think we can move forward with using nested blocks in the quote blocks?

Sven74Muc · 2019-02-26T10:54:31Z

@iseulde For me it is not only about nested a bullet list within quote. There are also other blocks like table or column which could be nested in a quot. On the other side ther could also be a bullet list nested in a table or column for example. So.... column for example (or other) could be nested somewhere else or other way arround other things could be nested within column (or other)

"using nested block in a quote block" AND nest a quote block in other blocks like table.

Think it makes sense not just to go for one case, it should be an in all directions flexible solution. What do you think?

Sven74Muc · 2019-02-28T16:17:54Z

@jasmussen @karmatosed @iseulde For me it looks with the bigger appraoch (not just nested blocks within quotes) that it makes sens to start from scratch. Maybe one approach ist like with the header block... there you have the align functionality within the right sitebar... So not a nested approach, more a seperated approch.

draganescu · 2019-04-23T08:09:58Z

@ellatrix should we then close this and redo the whole thing? By the looks of the conflict list it would be a horror story to rebase :D

ellatrix · 2019-04-23T09:33:56Z

Sure :)

ellatrix commented May 1, 2018

View reviewed changes

ellatrix force-pushed the try/quote-nested-blocks branch 2 times, most recently from fee5758 to 56315f1 Compare May 1, 2018 14:58

ZebulanStanphill mentioned this pull request May 3, 2018

allowedBlocks does not prevent any block from being inserted via the “Enter” key or sibling inserter #6569

Closed

ZebulanStanphill mentioned this pull request May 18, 2018

Cover image provides no indicator where to click for adding text #6823

Closed

This was referenced Jun 4, 2018

Convert to blocks loses marked up content inside a blockquote #4992

Closed

Blockers for launching "Try Gutenberg" callout in core #7147

Closed

ellatrix requested a review from a team June 14, 2018 16:17

ellatrix force-pushed the try/quote-nested-blocks branch from 56315f1 to 797b221 Compare June 20, 2018 17:03

ellatrix force-pushed the try/quote-nested-blocks branch 2 times, most recently from 2555cc3 to 39c7a79 Compare June 21, 2018 10:52

ellatrix force-pushed the try/quote-nested-blocks branch from 39c7a79 to b49cef0 Compare June 21, 2018 11:54

ellatrix force-pushed the try/quote-nested-blocks branch from b49cef0 to 2dcba4d Compare June 21, 2018 13:47

ellatrix force-pushed the try/quote-nested-blocks branch from 2dcba4d to d9ad0d5 Compare June 25, 2018 17:45

Use nested blocks for quotes 7f666e3, 3478730, db4c94d, 01df9e7, 56315f1

cc659d6

ellatrix force-pushed the try/quote-nested-blocks branch from d9ad0d5 to cc659d6 Compare June 25, 2018 17:56

Remove duplicate setAttributes call in paragraph block

2734a20

ellatrix added this to the 3.2 milestone Jun 27, 2018

ellatrix mentioned this pull request Jul 3, 2018

Rich Text: Remove componentDidUpdate deep equality conditions #7648

Closed

mcsf modified the milestones: 3.2, 3.3 Jul 5, 2018

aduth removed this from the 3.3 milestone Jul 18, 2018

pento added this to the 3.5 milestone Jul 30, 2018

ZebulanStanphill mentioned this pull request Aug 6, 2018

Display block tools underneath the block, instead of to the sides #6224

Closed

gziolo removed this from the 3.5 milestone Aug 8, 2018

This was referenced Aug 24, 2018

WIP/Try: Make pullquote a variation #8821

Closed

Copy/paste issue did not fill out the quote block #5946

Closed

tofumatt closed this Dec 3, 2018

tofumatt deleted the try/quote-nested-blocks branch December 3, 2018 16:23

ellatrix restored the try/quote-nested-blocks branch December 3, 2018 17:23

ellatrix reopened this Dec 3, 2018

gziolo reviewed Jan 29, 2019

View reviewed changes

ellatrix closed this Apr 23, 2019

ellatrix deleted the try/quote-nested-blocks branch April 23, 2019 09:33

ellatrix mentioned this pull request May 7, 2019

Quote: use nested blocks #15486

Closed

oandregal mentioned this pull request Mar 30, 2022

Quote: use nested blocks #25892

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use nested blocks for quotes #6520

Use nested blocks for quotes #6520

ellatrix commented May 1, 2018 •

edited

Loading

ellatrix May 1, 2018

jasmussen May 2, 2018

ellatrix May 2, 2018

tofumatt commented Jun 14, 2018

ellatrix commented Jun 20, 2018

ellatrix commented Jun 21, 2018

ellatrix commented Jun 21, 2018

ellatrix commented Jun 21, 2018

jasmussen commented Jun 22, 2018

ellatrix commented Jun 25, 2018

ZebulanStanphill commented Jun 25, 2018

ZebulanStanphill commented Aug 3, 2018

ZebulanStanphill commented Aug 24, 2018

tofumatt commented Dec 3, 2018

ellatrix commented Dec 3, 2018

tofumatt commented Dec 3, 2018

ellatrix commented Dec 3, 2018

tofumatt commented Dec 3, 2018 •

edited

Loading

gziolo left a comment

Sven74Muc commented Feb 26, 2019

ellatrix commented Feb 26, 2019

Sven74Muc commented Feb 26, 2019 •

edited

Loading

Sven74Muc commented Feb 28, 2019

draganescu commented Apr 23, 2019

ellatrix commented Apr 23, 2019

Use nested blocks for quotes #6520

Use nested blocks for quotes #6520

Conversation

ellatrix commented May 1, 2018 • edited Loading

Description

How has this been tested?

Checklist:

ellatrix May 1, 2018

Choose a reason for hiding this comment

jasmussen May 2, 2018

Choose a reason for hiding this comment

ellatrix May 2, 2018

Choose a reason for hiding this comment

tofumatt commented Jun 14, 2018

ellatrix commented Jun 20, 2018

ellatrix commented Jun 21, 2018

ellatrix commented Jun 21, 2018

ellatrix commented Jun 21, 2018

jasmussen commented Jun 22, 2018

ellatrix commented Jun 25, 2018

ZebulanStanphill commented Jun 25, 2018

ZebulanStanphill commented Aug 3, 2018

ZebulanStanphill commented Aug 24, 2018

tofumatt commented Dec 3, 2018

ellatrix commented Dec 3, 2018

tofumatt commented Dec 3, 2018

ellatrix commented Dec 3, 2018

tofumatt commented Dec 3, 2018 • edited Loading

gziolo left a comment

Choose a reason for hiding this comment

Sven74Muc commented Feb 26, 2019

ellatrix commented Feb 26, 2019

Sven74Muc commented Feb 26, 2019 • edited Loading

Sven74Muc commented Feb 28, 2019

draganescu commented Apr 23, 2019

ellatrix commented Apr 23, 2019

ellatrix commented May 1, 2018 •

edited

Loading

tofumatt commented Dec 3, 2018 •

edited

Loading

Sven74Muc commented Feb 26, 2019 •

edited

Loading