Add very basic template information dropdown #25757

noahtallen · 2020-10-01T00:52:25Z

Description

Adding a very basic foundation to iterate on for the template info dropdown.

How has this been tested?

Locally, in edit site.

Screenshots

Types of changes

New feature.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

github-actions · 2020-10-01T01:01:55Z

Size Change: +568 B (0%)

Total Size: 1.19 MB

Filename	Size	Change
`build/block-editor/index.js`	130 kB	+10 B (0%)
`build/block-library/index.js`	145 kB	+7 B (0%)
`build/blocks/index.js`	47.6 kB	+1 B
`build/components/index.js`	169 kB	+37 B (0%)
`build/data/index.js`	8.6 kB	-3 B (0%)
`build/edit-navigation/index.js`	10.6 kB	-1 B
`build/edit-site/index.js`	21.3 kB	+361 B (1%)
`build/edit-site/style-rtl.css`	3.8 kB	+76 B (1%)
`build/edit-site/style.css`	3.81 kB	+80 B (2%)

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.14 kB	0 B
`build/annotations/index.js`	3.52 kB	0 B
`build/api-fetch/index.js`	3.35 kB	0 B
`build/autop/index.js`	2.72 kB	0 B
`build/blob/index.js`	668 B	0 B
`build/block-directory/index.js`	8.55 kB	0 B
`build/block-directory/style-rtl.css`	943 B	0 B
`build/block-directory/style.css`	942 B	0 B
`build/block-editor/style-rtl.css`	11 kB	0 B
`build/block-editor/style.css`	11 kB	0 B
`build/block-library/editor-rtl.css`	8.65 kB	0 B
`build/block-library/editor.css`	8.65 kB	0 B
`build/block-library/style-rtl.css`	7.66 kB	0 B
`build/block-library/style.css`	7.66 kB	0 B
`build/block-library/theme-rtl.css`	741 B	0 B
`build/block-library/theme.css`	741 B	0 B
`build/block-serialization-default-parser/index.js`	1.78 kB	0 B
`build/block-serialization-spec-parser/index.js`	3.1 kB	0 B
`build/components/style-rtl.css`	15.5 kB	0 B
`build/components/style.css`	15.5 kB	0 B
`build/compose/index.js`	9.43 kB	0 B
`build/core-data/index.js`	12 kB	0 B
`build/data-controls/index.js`	685 B	0 B
`build/date/index.js`	31.9 kB	0 B
`build/deprecated/index.js`	772 B	0 B
`build/dom-ready/index.js`	568 B	0 B
`build/dom/index.js`	4.42 kB	0 B
`build/edit-navigation/style-rtl.css`	868 B	0 B
`build/edit-navigation/style.css`	871 B	0 B
`build/edit-post/index.js`	306 kB	0 B
`build/edit-post/style-rtl.css`	6.29 kB	0 B
`build/edit-post/style.css`	6.28 kB	0 B
`build/edit-widgets/index.js`	21.2 kB	0 B
`build/edit-widgets/style-rtl.css`	3.02 kB	0 B
`build/edit-widgets/style.css`	3.02 kB	0 B
`build/editor/editor-styles-rtl.css`	492 B	0 B
`build/editor/editor-styles.css`	493 B	0 B
`build/editor/index.js`	45.5 kB	0 B
`build/editor/style-rtl.css`	3.85 kB	0 B
`build/editor/style.css`	3.84 kB	0 B
`build/element/index.js`	4.45 kB	0 B
`build/escape-html/index.js`	734 B	0 B
`build/format-library/index.js`	7.49 kB	0 B
`build/format-library/style-rtl.css`	547 B	0 B
`build/format-library/style.css`	548 B	0 B
`build/hooks/index.js`	1.74 kB	0 B
`build/html-entities/index.js`	621 B	0 B
`build/i18n/index.js`	3.54 kB	0 B
`build/is-shallow-equal/index.js`	710 B	0 B
`build/keyboard-shortcuts/index.js`	2.39 kB	0 B
`build/keycodes/index.js`	1.85 kB	0 B
`build/list-reusable-blocks/index.js`	3.02 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	476 B	0 B
`build/list-reusable-blocks/style.css`	476 B	0 B
`build/media-utils/index.js`	5.13 kB	0 B
`build/notices/index.js`	1.69 kB	0 B
`build/nux/index.js`	3.27 kB	0 B
`build/nux/style-rtl.css`	671 B	0 B
`build/nux/style.css`	668 B	0 B
`build/plugins/index.js`	2.44 kB	0 B
`build/primitives/index.js`	1.34 kB	0 B
`build/priority-queue/index.js`	790 B	0 B
`build/redux-routine/index.js`	2.85 kB	0 B
`build/rich-text/index.js`	13 kB	0 B
`build/server-side-render/index.js`	2.6 kB	0 B
`build/shortcode/index.js`	1.7 kB	0 B
`build/token-list/index.js`	1.24 kB	0 B
`build/url/index.js`	4.06 kB	0 B
`build/viewport/index.js`	1.74 kB	0 B
`build/warning/index.js`	1.14 kB	0 B
`build/wordcount/index.js`	1.17 kB	0 B

_{compressed-size-action}

Addison-Stavlo

This looks like a great starting point!

I also am digging that anchorRect, I didn't notice that was a thing previously. 😁

packages/edit-site/src/components/header/document-actions/index.js

noahtallen · 2020-10-07T01:37:13Z

packages/edit-site/src/components/template-details/style.scss

@@ -0,0 +1,7 @@
+.edit-site-template-details__label {


I feel like there should be existing styles for this somewhere 🤔

packages/components/src/dropdown/index.js

packages/edit-site/src/components/template-details/index.js

packages/edit-site/src/components/header/document-actions/index.js

vindl

Two things I've noticed while testing:

There is no margin between the title and button border when dropdown is selected.

The template title is now displaced to the left a bit, so when we select the template part and show its title there, the animation is not as good. Previously it was just sliding up, but now there is also the initial jump to the right too. I'm thinking that we could show the chevron when template part is selected too, but just update the content/context of the dropdown?

packages/components/src/dropdown/index.js

vindl · 2020-10-07T17:19:25Z

packages/edit-site/src/components/template-details/index.js

+			<p className="edit-site-template-details__heading">
+				{ __( 'Template details' ) }
+			</p>
+			<p>{ `${ __( 'Name' ) }: ${ template.slug }` }</p>


We should link this to corresponding item in navigation sidebar. Clicking on it should open the menu and activate the item. This is fine to do in a follow-up though.

Ah, I see. That makes sense, I vote to do it in a follow-up :)

noahtallen · 2020-10-07T18:44:55Z

There is no margin between the title and button border when dropdown is selected.

Added a bit of margin to fix that:

I'm thinking that we could show the chevron when template part is selected too, but just update the content/context of the dropdown?

I think the designs so far have been to avoid this. 🤔 Unless we add the dropdown while the template part is selected, there's no way to avoid the jump. I don't think there is any extra context we could show -- I'd think the dropdown would still be beside the template name, and shouldl still show template info

noahtallen · 2020-10-07T18:57:38Z

cc @david-szabo97 in e52fe395a0f48682aaf2fc8b8de61c327347255e, I refactored the template information calculation so we can reuse it. The only weird thing is that I'm unsure where to put the constants file now.

packages/edit-site/src/components/header/document-actions/style.scss

packages/edit-site/src/components/template-details/style.scss

packages/edit-site/src/utils/get-template-info/index.js

jeyip

Tested in Chrome, Safari, Edge, IE11, and Firefox:

Template switching with the navigation sidebar and noting that the label changes appropriately
Template details are correct
Template part labels change appropriately

+1 when we resolve the discussion about specs 🙂

packages/edit-site/src/components/template-details/index.js

Addison-Stavlo

This all looks good and works well for me!

Im just wondering about the dropdown not being usable after a template-part is selected. Was this how design wanted it or was that more unspecified?

packages/edit-site/src/components/template-details/index.js

Addison-Stavlo

Looks like that is as designed. Nice job here! 🎉

jeyip

It looks like Github has degraded performance. Feel free to merge when your new commit is received by the platform 😅

vindl · 2020-10-10T16:22:16Z

Unless we add the dropdown while the template part is selected, there's no way to avoid the jump. I don't think there is any extra context we could show -- I'd think the dropdown would still be beside the template name, and shouldl still show template info

Can we then preserve the dropdown while template part is selected, but still show the same info?

noahtallen · 2020-10-12T17:54:00Z

Can we then preserve the dropdown while template part is selected, but still show the same info?

yeah, we definitely can do that fairly easily, just a matter of design :) cc @shaunandrews

noahtallen requested review from shaunandrews, jeyip and Addison-Stavlo October 1, 2020 00:52

noahtallen self-assigned this Oct 1, 2020

Addison-Stavlo reviewed Oct 1, 2020

View reviewed changes

noahtallen force-pushed the try/template-info-dropdown branch from 63c35c9 to 96cdaef Compare October 2, 2020 22:56

noahtallen commented Oct 2, 2020

View reviewed changes

packages/edit-site/src/components/header/document-actions/index.js Outdated Show resolved Hide resolved

noahtallen force-pushed the try/template-info-dropdown branch 2 times, most recently from 30e1caa to 27790ca Compare October 7, 2020 01:34

noahtallen commented Oct 7, 2020

View reviewed changes

packages/components/src/dropdown/index.js Show resolved Hide resolved

noahtallen marked this pull request as ready for review October 7, 2020 01:46

noahtallen requested review from ajitbohra, chrisvanpatten and youknowriad as code owners October 7, 2020 01:46

noahtallen requested review from vindl, mattwiebe, Copons and david-szabo97 October 7, 2020 01:47

noahtallen changed the title ~~Try/template info dropdown~~ Add very basic template information dropdown Oct 7, 2020

david-szabo97 reviewed Oct 7, 2020

View reviewed changes

packages/edit-site/src/components/template-details/index.js Outdated Show resolved Hide resolved

packages/edit-site/src/components/header/document-actions/index.js Outdated Show resolved Hide resolved

vindl reviewed Oct 7, 2020

View reviewed changes

packages/components/src/dropdown/index.js Show resolved Hide resolved

vindl reviewed Oct 7, 2020

View reviewed changes

noahtallen force-pushed the try/template-info-dropdown branch from fd85e84 to a1b5d23 Compare October 7, 2020 18:35

noahtallen force-pushed the try/template-info-dropdown branch from 2acb88a to e52fe39 Compare October 7, 2020 19:31

noahtallen mentioned this pull request Oct 7, 2020

Link to nav sidebar from settings dropdown #25929

Closed

noahtallen force-pushed the try/template-info-dropdown branch from 755f5ff to fbde9ef Compare October 8, 2020 01:55

noahtallen commented Oct 8, 2020

View reviewed changes

packages/edit-site/src/components/header/document-actions/style.scss Show resolved Hide resolved

noahtallen added [Feature] Full Site Editing [Type] Enhancement A suggestion for improvement. labels Oct 9, 2020

jeyip reviewed Oct 9, 2020

View reviewed changes

packages/edit-site/src/components/template-details/style.scss Show resolved Hide resolved

jeyip reviewed Oct 9, 2020

View reviewed changes

packages/edit-site/src/utils/get-template-info/index.js Show resolved Hide resolved

jeyip reviewed Oct 9, 2020

View reviewed changes

Copons reviewed Oct 9, 2020

View reviewed changes

packages/edit-site/src/components/template-details/index.js Outdated Show resolved Hide resolved

packages/edit-site/src/components/template-details/index.js Outdated Show resolved Hide resolved

noahtallen added 6 commits October 9, 2020 13:19

Create a basic template info dropdown

399a294

Refactor template info calculations

94c1e2a

Fix import

1c71339

Fix layout issues

2cfee7e

Refactor template constants

4f9a4a0

Remove uneeded styles

a47a474

noahtallen force-pushed the try/template-info-dropdown branch from 94d3f14 to a47a474 Compare October 9, 2020 20:19

noahtallen added 4 commits October 9, 2020 13:23

Add documentation for template info function

7996ca0

Improve translation, avoid rendering when null

a4dd466

Remove unused import

711f452

Add unit tests for get template info

092dbed

Addison-Stavlo reviewed Oct 9, 2020

View reviewed changes

jeyip reviewed Oct 9, 2020

View reviewed changes

packages/edit-site/src/components/template-details/index.js Outdated Show resolved Hide resolved

Update translation function

8a26fed

Addison-Stavlo approved these changes Oct 9, 2020

View reviewed changes

jeyip approved these changes Oct 9, 2020

View reviewed changes

noahtallen force-pushed the try/template-info-dropdown branch from af34640 to 8a26fed Compare October 9, 2020 22:23

noahtallen merged commit c761c4c into master Oct 9, 2020

noahtallen deleted the try/template-info-dropdown branch October 9, 2020 22:56

github-actions bot added this to the Gutenberg 9.2 milestone Oct 9, 2020

Addison-Stavlo mentioned this pull request Oct 9, 2020

Fix document title text wrapping and centering. #25996

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add very basic template information dropdown #25757

Add very basic template information dropdown #25757

noahtallen commented Oct 1, 2020 •

edited

Loading

github-actions bot commented Oct 1, 2020 •

edited

Loading

Addison-Stavlo left a comment

noahtallen Oct 7, 2020

vindl left a comment •

edited

Loading

vindl Oct 7, 2020

noahtallen Oct 7, 2020

noahtallen commented Oct 7, 2020

noahtallen commented Oct 7, 2020 •

edited

Loading

jeyip left a comment

Addison-Stavlo left a comment

Addison-Stavlo left a comment

jeyip left a comment

vindl commented Oct 10, 2020

noahtallen commented Oct 12, 2020

Add very basic template information dropdown #25757

Add very basic template information dropdown #25757

Conversation

noahtallen commented Oct 1, 2020 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

github-actions bot commented Oct 1, 2020 • edited Loading

Addison-Stavlo left a comment

Choose a reason for hiding this comment

noahtallen Oct 7, 2020

Choose a reason for hiding this comment

vindl left a comment • edited Loading

Choose a reason for hiding this comment

vindl Oct 7, 2020

Choose a reason for hiding this comment

noahtallen Oct 7, 2020

Choose a reason for hiding this comment

noahtallen commented Oct 7, 2020

noahtallen commented Oct 7, 2020 • edited Loading

jeyip left a comment

Choose a reason for hiding this comment

Addison-Stavlo left a comment

Choose a reason for hiding this comment

Addison-Stavlo left a comment

Choose a reason for hiding this comment

jeyip left a comment

Choose a reason for hiding this comment

vindl commented Oct 10, 2020

noahtallen commented Oct 12, 2020

noahtallen commented Oct 1, 2020 •

edited

Loading

github-actions bot commented Oct 1, 2020 •

edited

Loading

vindl left a comment •

edited

Loading

noahtallen commented Oct 7, 2020 •

edited

Loading