Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Site Editor: Navigation panel add blue dot to customized templates #26894

Closed
wants to merge 7 commits into from

Conversation

david-szabo97
Copy link
Member

Description

Resolves #26451

Add a blue dot to customized templates.

How has this been tested?

  • Open site editor
  • Open navigation panel
  • Navigate to Templates
  • Customized templates should have a blue dot next to their name

Screenshots

image
image

Types of changes

New feature (non-breaking change which adds functionality)

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
Copy link

github-actions bot commented Nov 11, 2020

Size Change: +301 B (0%)

Total Size: 1.19 MB

Filename Size Change
build/edit-site/index.js 23.4 kB +103 B (0%)
build/edit-site/style-rtl.css 3.95 kB +100 B (2%)
build/edit-site/style.css 3.95 kB +98 B (2%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.8 kB 0 B
build/api-fetch/index.js 3.42 kB 0 B
build/autop/index.js 2.84 kB 0 B
build/blob/index.js 664 B 0 B
build/block-directory/index.js 8.72 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/index.js 133 kB 0 B
build/block-editor/style-rtl.css 11.3 kB 0 B
build/block-editor/style.css 11.3 kB 0 B
build/block-library/editor-rtl.css 9.03 kB 0 B
build/block-library/editor.css 9.03 kB 0 B
build/block-library/index.js 147 kB 0 B
build/block-library/style-rtl.css 8.1 kB 0 B
build/block-library/style.css 8.1 kB 0 B
build/block-library/theme-rtl.css 792 B 0 B
build/block-library/theme.css 793 B 0 B
build/block-serialization-default-parser/index.js 1.87 kB 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/blocks/index.js 48 kB 0 B
build/components/index.js 171 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/compose/index.js 9.95 kB 0 B
build/core-data/index.js 14.8 kB 0 B
build/data-controls/index.js 827 B 0 B
build/data/index.js 8.8 kB 0 B
build/date/index.js 11.2 kB 0 B
build/deprecated/index.js 768 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.92 kB 0 B
build/edit-navigation/index.js 11.2 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.45 kB 0 B
build/edit-post/style.css 6.44 kB 0 B
build/edit-widgets/index.js 26.4 kB 0 B
build/edit-widgets/style-rtl.css 3.13 kB 0 B
build/edit-widgets/style.css 3.13 kB 0 B
build/editor/editor-styles-rtl.css 476 B 0 B
build/editor/editor-styles.css 478 B 0 B
build/editor/index.js 42.7 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.85 kB 0 B
build/element/index.js 4.62 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 6.86 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 2.16 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 698 B 0 B
build/keyboard-shortcuts/index.js 2.54 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.1 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.32 kB 0 B
build/notices/index.js 1.81 kB 0 B
build/nux/index.js 3.42 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.56 kB 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/reusable-blocks/index.js 3.06 kB 0 B
build/rich-text/index.js 13.3 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.05 kB 0 B
build/viewport/index.js 1.86 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

}

.edit-site-navigation-panel__template-item-customized-dot {
background: #fff;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could go with $white since it is defined as this in _colors.scss

Copy link
Contributor

@Copons Copons left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works as advertised!
I've left a couple of comments. Nothing major, but I'd like a second opinion from design. 🙂

Comment on lines 122 to 147
.edit-site-navigation-panel__template-item-customized-dot {
position: absolute;
right: $grid-unit-05;
top: 50%;
margin-top: -$grid-unit-05;
width: $grid-unit-10;
height: $grid-unit-10;
display: block;
background: var(--wp-admin-theme-color);
border-radius: 50%;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about inline block?

Suggested change
.edit-site-navigation-panel__template-item-customized-dot {
position: absolute;
right: $grid-unit-05;
top: 50%;
margin-top: -$grid-unit-05;
width: $grid-unit-10;
height: $grid-unit-10;
display: block;
background: var(--wp-admin-theme-color);
border-radius: 50%;
}
.edit-site-navigation-panel__template-item-customized-dot {
background: var(--wp-admin-theme-color);
border-radius: 50%;
display: inline-block;
height: $grid-unit-10;
margin-left: 4px;
width: $grid-unit-10;
}

position="top center"
>
<span className="edit-site-navigation-panel__template-item-customized-dot" />
</Tooltip>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if the dot alone is just too small to be an effective hover area for the tooltip.
Maybe it could make sense to wrap the entire title? 🤔

Also the tooltip background seems to me === the sidebar background, making it hard to read.

@jameskoster do you have any opinions?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe it could make sense to wrap the entire title?

That would probably help with the criticism I had below. Its hard to get it to pop up or even know its there, especially with the cursor already being a pointer in the parent.

Copy link
Contributor

@Addison-Stavlo Addison-Stavlo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is working pretty well in my testing so far. Some behavioral nitpicking:

It feels odd having a tooltip available on hover with no change in cursor to help distinguish that. Normally it might go from 'defualt' to 'pointer' when mousing over a tooltip, but since we are using 'pointer' in the parent container itself there is nothing telling us that anything special is there. Combining that with the delay that happens before the tooltip actually pops up, this does feel a bit funky and makes the tooltip feel hard to find and feel a bit more hidden. Thoughts?

Copy link
Contributor

@jameskoster jameskoster left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At the moment it seems that from-scratch templates are also being marked with the blue dot.

In all other applications of the blue dot pattern, it indicates that something has been customised. I don't think it would make sense to deviate that here by highlighting the from-scratch templates, which of course haven't been customised :)

Copy link
Contributor

@Addison-Stavlo Addison-Stavlo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In all other applications of the blue dot pattern, it indicates that something has been customized. I don't think it would make sense to deviate that here by highlighting the from-scratch templates, which of course haven't been customized :)

It looks like this is now fixed after the updates from master. 👍 Or not, im confusing myself in testing.

@david-szabo97
Copy link
Member Author

Blocked until #27016 is merged

@david-szabo97 david-szabo97 force-pushed the add/navigation-panel-customized-dot branch from 00ec15d to 66e0141 Compare November 19, 2020 10:58
@vindl
Copy link
Member

vindl commented Nov 20, 2020

We decided to abandon this approach in #27041 (comment).

@vindl vindl closed this Nov 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Indicate customized templates in the site editor navigation
5 participants