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

Dark mode UI updates #26483

Merged
merged 1 commit into from
Oct 27, 2020
Merged

Dark mode UI updates #26483

merged 1 commit into from
Oct 27, 2020

Conversation

mapk
Copy link
Contributor

@mapk mapk commented Oct 26, 2020

Fixes #26479.
Provides a dark mode color for caption placeholders as seen in Gallery and Table blocks.
Adds a dark mode color for the block appender button as seen in the Columns block.

How has this been tested?

Tested locally.

Screenshots

Gutenberg Starter Theme
Screen Shot 2020-10-26 at 4 43 14 PM

Twenty Twenty One
I'm not sure why the Columns block appender buttons and the Verse block's placeholder text doesn't show correctly in this theme. Anyone have any ideas?

2021

Types of changes

CSS changes.

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.

…Table blocks. Adds a dark mode color for the block appender button.
@mapk mapk added the General Interface Parts of the UI which don't fall neatly under other labels. label Oct 26, 2020
@mapk mapk requested a review from ellatrix as a code owner October 26, 2020 23:51
@mapk mapk self-assigned this Oct 26, 2020
@mapk mapk requested a review from kjellr October 26, 2020 23:54
@mapk mapk added the [Block] Columns Affects the Columns Block label Oct 26, 2020
@github-actions
Copy link

Size Change: +151 B (0%)

Total Size: 1.2 MB

Filename Size Change
build/block-editor/style-rtl.css 11.1 kB +17 B (0%)
build/block-editor/style.css 11 kB +18 B (0%)
build/block-library/editor-rtl.css 8.94 kB +7 B (0%)
build/block-library/editor.css 8.94 kB +8 B (0%)
build/block-library/theme-rtl.css 791 B +50 B (6%) 🔍
build/block-library/theme.css 792 B +51 B (6%) 🔍
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.53 kB 0 B
build/api-fetch/index.js 3.34 kB 0 B
build/autop/index.js 2.73 kB 0 B
build/blob/index.js 664 B 0 B
build/block-directory/index.js 8.58 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 130 kB 0 B
build/block-library/index.js 145 kB 0 B
build/block-library/style-rtl.css 7.75 kB 0 B
build/block-library/style.css 7.75 kB 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/blocks/index.js 47.6 kB 0 B
build/components/index.js 172 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.62 kB 0 B
build/core-data/index.js 12.1 kB 0 B
build/data-controls/index.js 679 B 0 B
build/data/index.js 8.61 kB 0 B
build/date/index.js 31.8 kB 0 B
build/deprecated/index.js 769 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.42 kB 0 B
build/edit-navigation/index.js 10.7 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.37 kB 0 B
build/edit-post/style.css 6.35 kB 0 B
build/edit-site/index.js 22.2 kB 0 B
build/edit-site/style-rtl.css 3.79 kB 0 B
build/edit-site/style.css 3.79 kB 0 B
build/edit-widgets/index.js 26.6 kB 0 B
build/edit-widgets/style-rtl.css 3.09 kB 0 B
build/edit-widgets/style.css 3.09 kB 0 B
build/editor/editor-styles-rtl.css 480 B 0 B
build/editor/editor-styles.css 482 B 0 B
build/editor/index.js 42.6 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.44 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 7.47 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 623 B 0 B
build/i18n/index.js 3.55 kB 0 B
build/is-shallow-equal/index.js 712 B 0 B
build/keyboard-shortcuts/index.js 2.38 kB 0 B
build/keycodes/index.js 1.84 kB 0 B
build/list-reusable-blocks/index.js 3.01 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.11 kB 0 B
build/notices/index.js 1.69 kB 0 B
build/nux/index.js 3.26 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.35 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/reusable-blocks/index.js 3.06 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.69 kB 0 B
build/token-list/index.js 1.24 kB 0 B
build/url/index.js 4.05 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.22 kB 0 B

compressed-size-action

Copy link
Member

@aristath aristath left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@jasmussen
Copy link
Contributor

Looks good, thank you! Pet peeve: I try to avoid the term "dark mode" for this stuff, as it's technically independant of a dark mode feature that I could see landing in the block editor at some point. The is-dark-theme class is set on themes that register themselves as dark, therefore requiring inverted or contrasty colors.

Copy link
Contributor

@bph bph left a comment

Choose a reason for hiding this comment

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

Tested locally with Twenty-twenty-one and Twenty-Twenty. It looks so much better now. 👏

@aristath
Copy link
Member

The failing tests have nothing to do with this PR so this is safe to merge 👍

@aristath aristath merged commit 8c908e6 into master Oct 27, 2020
@aristath aristath deleted the update/dark-mode-for-specific-blocks branch October 27, 2020 15:14
@github-actions github-actions bot added this to the Gutenberg 9.3 milestone Oct 27, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Columns Affects the Columns Block General Interface Parts of the UI which don't fall neatly under other labels.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Some block features are rendered with invisible ink with dark backgrounds.
4 participants