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

Update the heading block to use the colors hook #21039

Merged
merged 3 commits into from
Mar 27, 2020

Conversation

youknowriad
Copy link
Contributor

Based on #21021 to try test the API on different blocks (heading for this PR)

It also adds background color support to the heading block. At the moment there's no way to choose just text color, but it's easy to implement if needed. I just thought being consistent with other blocks is a good thing.

@github-actions
Copy link

github-actions bot commented Mar 20, 2020

Size Change: +108 B (0%)

Total Size: 856 kB

Filename Size Change
build/block-library/index.js 110 kB +42 B (0%)
build/block-library/style-rtl.css 7.47 kB +33 B (0%)
build/block-library/style.css 7.48 kB +33 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 998 B 0 B
build/annotations/index.js 3.44 kB 0 B
build/api-fetch/index.js 3.39 kB 0 B
build/autop/index.js 2.58 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.02 kB 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 760 B 0 B
build/block-editor/index.js 101 kB 0 B
build/block-editor/style-rtl.css 10.9 kB 0 B
build/block-editor/style.css 10.9 kB 0 B
build/block-library/editor-rtl.css 7.22 kB 0 B
build/block-library/editor.css 7.23 kB 0 B
build/block-library/theme-rtl.css 669 B 0 B
build/block-library/theme.css 671 B 0 B
build/block-serialization-default-parser/index.js 1.65 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 57.5 kB 0 B
build/components/index.js 190 kB 0 B
build/components/style-rtl.css 15.8 kB 0 B
build/components/style.css 15.7 kB 0 B
build/compose/index.js 6.21 kB 0 B
build/core-data/index.js 10.6 kB 0 B
build/data-controls/index.js 1.04 kB 0 B
build/data/index.js 8.25 kB 0 B
build/date/index.js 5.37 kB 0 B
build/deprecated/index.js 771 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.06 kB 0 B
build/edit-post/index.js 91.2 kB 0 B
build/edit-post/style-rtl.css 8.43 kB 0 B
build/edit-post/style.css 8.43 kB 0 B
build/edit-site/index.js 6.73 kB 0 B
build/edit-site/style-rtl.css 2.91 kB 0 B
build/edit-site/style.css 2.9 kB 0 B
build/edit-widgets/index.js 4.43 kB 0 B
build/edit-widgets/style-rtl.css 2.57 kB 0 B
build/edit-widgets/style.css 2.57 kB 0 B
build/editor/editor-styles-rtl.css 428 B 0 B
build/editor/editor-styles.css 431 B 0 B
build/editor/index.js 42.8 kB 0 B
build/editor/style-rtl.css 3.38 kB 0 B
build/editor/style.css 3.38 kB 0 B
build/element/index.js 4.44 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 6.95 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 1.93 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.49 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.3 kB 0 B
build/keycodes/index.js 1.69 kB 0 B
build/list-reusable-blocks/index.js 2.99 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/media-utils/index.js 4.84 kB 0 B
build/notices/index.js 1.57 kB 0 B
build/nux/index.js 3.01 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.54 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 781 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/rich-text/index.js 14.5 kB 0 B
build/server-side-render/index.js 2.55 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.01 kB 0 B
build/viewport/index.js 1.61 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.18 kB 0 B

compressed-size-action

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

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

It’s must have to hide __experimentalUseColors as in implementation detail as it’s hard to follow as you need to know all those differences between elements and components exposed and hoe to wire them. Did you find any limitations of the support flag?

@@ -0,0 +1,13 @@
h1,
Copy link
Member

Choose a reason for hiding this comment

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

The same question as for Paragraph block:

Are you sure it’s safe to set those values for all headings including front-end as part of the block definition?

@youknowriad
Copy link
Contributor Author

Did you find any limitations of the support flag?

The biggest limit is that you can only apply these styles/classnames to the block wrapper. I think it's probably enough for 90% of the cases.

@youknowriad youknowriad force-pushed the update/group-colors branch 2 times, most recently from 92ef4bb to dfca58c Compare March 24, 2020 12:40
@youknowriad youknowriad force-pushed the update/heading-colors branch from b738c74 to 85cfb63 Compare March 24, 2020 13:41
@youknowriad youknowriad added [Block] Heading Affects the Headings Block [Type] Code Quality Issues or PRs that relate to code quality labels Mar 24, 2020
@youknowriad youknowriad self-assigned this Mar 24, 2020
@youknowriad youknowriad added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Mar 24, 2020
@youknowriad youknowriad marked this pull request as ready for review March 24, 2020 13:42
@youknowriad youknowriad force-pushed the update/heading-colors branch from 85cfb63 to 43ef782 Compare March 24, 2020 13:43
@youknowriad youknowriad changed the base branch from update/group-colors to master March 24, 2020 13:45
@gziolo
Copy link
Member

gziolo commented Mar 24, 2020

It needs to be rebased with master. I see changes from the parent PR in here that makes the final call harder

@youknowriad
Copy link
Contributor Author

@gziolo it should be better now, the base branch was wrong.

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

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

Overall it's good to go. Nice work!

Depending on how the proposal from @nosolosw shared in #21037 (comment) ends up implemented, CSS code added in this PR should be updated. I guess it's fine to merge and update later.

@youknowriad youknowriad force-pushed the update/heading-colors branch from 43ef782 to f38d42b Compare March 27, 2020 10:06
@youknowriad youknowriad merged commit 87a84c6 into master Mar 27, 2020
@youknowriad youknowriad deleted the update/heading-colors branch March 27, 2020 10:42
@paaljoachim
Copy link
Contributor

Is Heading background color UI being added or is it just that it is implemented but not added through the UI? It would be good to add the Heading background UI control while your first working with this...:)

@youknowriad
Copy link
Contributor Author

it's added in the UI

};

const deprecated = [
{
attributes: blockAttributes,
supports: blockSupports,
Copy link
Member

Choose a reason for hiding this comment

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

I forgot about one thing, it would be nice to add the test case that covers this new deprecation:

  • a block that has has-text-color class set?

@jorgefilipecosta should know best what's the snippet that makes this deprecation unique.

Copy link
Member

Choose a reason for hiding this comment

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

I will look into the deprecations and try to add a snippet specific for this deprecation 👍

Copy link
Member

Choose a reason for hiding this comment

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

Thanks @jorgefilipecosta 🙇

@youknowriad youknowriad removed the Needs Dev Note Requires a developer note for a major WordPress release cycle label Apr 8, 2020
@mtias mtias mentioned this pull request May 29, 2020
82 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Heading Affects the Headings Block [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants