Document Settings: Fix document title hover and select animations #25719
Conversation
Size Change: +6.33 kB (0%) Total Size: 1.18 MB
|
Filename | Size | Change | |
---|---|---|---|
build/annotations/index.js |
3.52 kB | 0 B | |
build/autop/index.js |
2.72 kB | 0 B | |
build/blob/index.js |
620 B | 0 B | |
build/block-directory/style-rtl.css |
943 B | 0 B | |
build/block-directory/style.css |
942 B | 0 B | |
build/block-library/theme-rtl.css |
741 B | 0 B | |
build/block-library/theme.css |
741 B | 0 B | |
build/block-serialization-spec-parser/index.js |
3.1 kB | 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/editor/editor-styles-rtl.css |
492 B | 0 B | |
build/editor/editor-styles.css |
493 B | 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/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/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/primitives/index.js |
1.34 kB | 0 B | |
build/shortcode/index.js |
1.7 kB | 0 B | |
build/token-list/index.js |
1.24 kB | 0 B | |
build/viewport/index.js |
1.74 kB | 0 B | |
build/wordcount/index.js |
1.17 kB | 0 B |
3131529
to
13e65ef
I think this would be good to think about in a follow-up. I don't know what we expect to happen design-wise |
Ok, wow, this is way better than it was before! Nice job. Two thoughts:
|
Another note is that we should include the reduce-motion mixin |
1. Should the main text be bold when it's the only item in the header?
See Addison's comment below . Adding in the boldness now. 2. Should there be a slight transition when the text changes to bold? I think the designs might include that Side Note: |
I love that this exists. |
From the mock ups shared (#25348 (comment)) it looks like it should be bold when it is the only item.
Ah, interesting!
Yeah, that top bar breaks easily when it overflows. Hopefully getting rid of that double dropdown in the near future will help. But we may still need to consider what to do about excessively long names. Maybe a max-width for the element and either let it overflow or cut off the overflow? |
|
I'll make a follow up issue for the width of characters. Interesting about the font weight transition! Avoiding it makes sense to me. |
This is working very well for me. Let's ship it! |
I guess we should rebase on master first though :) |
should we base these off master / merge to that? I see this is still opened against the hover PR which is still in ???s (hopefully g2g soon) |
Here: #25783 |
…5719) * Refactor hover and select animations * Remove redundant styling * Add slide down animation * Remove unnecessary label class * Implement transition instead of animation * Add nowrap for secondary title * Honor reduced motion setting in user OS * Implement reduce motion mixin * Add bold font weight to lone template title
…5719) * Refactor hover and select animations * Remove redundant styling * Add slide down animation * Remove unnecessary label class * Implement transition instead of animation * Add nowrap for secondary title * Honor reduced motion setting in user OS * Implement reduce motion mixin * Add bold font weight to lone template title
jeyip commentedSep 29, 2020
•
edited
Description
The hover and select animation for document title can be improved in a few ways as identified by the design team:
We are using these updates as an opportunity to refactor the technical implementation to improve animation performance.
Ideally, the animations would look like this.
Here's the same animation slowed down to help see the transitions:
How has this been tested?
a. Execute
npx wp-env start
in the terminalb. Execute
npm run dev
in the terminaladmin
and the passwordpassword
.a. Click on Appearance < Themes in the sidebar and activate the seedlet blocks theme
b. Click on Gutenberg < Experiments in the sidebar and check the Full Site Editing Feature
Screenshots
Before
After
Types of changes
Fixes #25545
Checklist: