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

Add preset for padding and use it in the UI controls #23176

Closed
wants to merge 10 commits into from

Conversation

oandregal
Copy link
Member

@oandregal oandregal commented Jun 15, 2020

Implements #23111

This PR adds a new preset for padding that themes can use similar to how they use colors, font-sizes, and gradients.

TODO:

  • Add default padding values to the block-editor settings.
  • Take data from the theme.
  • UI: make padding control use the presets data.

@oandregal oandregal self-assigned this Jun 15, 2020
@oandregal oandregal requested a review from ItsJonQ June 15, 2020 17:36
@oandregal oandregal added [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Type] Enhancement A suggestion for improvement. [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. labels Jun 15, 2020
@github-actions
Copy link

github-actions bot commented Jun 15, 2020

Size Change: -276 B (0%)

Total Size: 1.12 MB

Filename Size Change
build/api-fetch/index.js 3.4 kB +1 B
build/block-directory/index.js 7.26 kB -4 B (0%)
build/block-directory/style-rtl.css 937 B -18 B (1%)
build/block-directory/style.css 937 B -18 B (1%)
build/block-editor/index.js 106 kB +7 B (0%)
build/block-editor/style-rtl.css 10.7 kB -19 B (0%)
build/block-editor/style.css 10.7 kB -21 B (0%)
build/block-library/editor-rtl.css 7.83 kB -20 B (0%)
build/block-library/editor.css 7.83 kB -21 B (0%)
build/block-library/index.js 129 kB -27 B (0%)
build/block-library/style-rtl.css 8 kB -18 B (0%)
build/block-library/style.css 8.01 kB -17 B (0%)
build/block-library/theme-rtl.css 730 B -19 B (2%)
build/block-library/theme.css 732 B -19 B (2%)
build/block-serialization-default-parser/index.js 1.88 kB +1 B
build/blocks/index.js 48.1 kB +3 B (0%)
build/components/index.js 196 kB +285 B (0%)
build/components/style-rtl.css 15.9 kB -44 B (0%)
build/components/style.css 15.8 kB -45 B (0%)
build/compose/index.js 9.6 kB -1 B
build/core-data/index.js 11.4 kB +2 B (0%)
build/data/index.js 8.44 kB -5 B (0%)
build/date/index.js 5.47 kB -2 B (0%)
build/dom-ready/index.js 569 B +1 B
build/dom/index.js 3.17 kB +1 B
build/edit-navigation/index.js 8.26 kB -1 B
build/edit-navigation/style-rtl.css 1.02 kB -20 B (1%)
build/edit-navigation/style.css 1.02 kB -19 B (1%)
build/edit-post/index.js 303 kB +810 B (0%)
build/edit-post/style-rtl.css 5.5 kB -104 B (1%)
build/edit-post/style.css 5.5 kB -104 B (1%)
build/edit-site/index.js 16.6 kB -10 B (0%)
build/edit-site/style-rtl.css 3.03 kB -101 B (3%)
build/edit-site/style.css 3.03 kB -101 B (3%)
build/edit-widgets/index.js 9.33 kB -3 B (0%)
build/edit-widgets/style-rtl.css 2.43 kB -102 B (4%)
build/edit-widgets/style.css 2.43 kB -101 B (4%)
build/editor/editor-styles-rtl.css 468 B -18 B (3%)
build/editor/editor-styles.css 469 B -18 B (3%)
build/editor/index.js 44.8 kB +12 B (0%)
build/editor/style-rtl.css 3.8 kB -19 B (0%)
build/editor/style.css 3.8 kB -19 B (0%)
build/element/index.js 4.65 kB +2 B (0%)
build/format-library/index.js 7.72 kB -4 B (0%)
build/format-library/style-rtl.css 542 B -19 B (3%)
build/format-library/style.css 543 B -19 B (3%)
build/i18n/index.js 3.56 kB +1 B
build/is-shallow-equal/index.js 711 B +1 B
build/list-reusable-blocks/index.js 3.12 kB -5 B (0%)
build/list-reusable-blocks/style-rtl.css 446 B -91 B (20%) 🎉
build/list-reusable-blocks/style.css 447 B -90 B (20%) 🎉
build/notices/index.js 1.79 kB -2 B (0%)
build/nux/index.js 3.4 kB -1 B
build/nux/style-rtl.css 662 B -19 B (2%)
build/nux/style.css 657 B -19 B (2%)
build/plugins/index.js 2.56 kB -1 B
build/priority-queue/index.js 788 B -1 B
build/redux-routine/index.js 2.85 kB +2 B (0%)
build/rich-text/index.js 14 kB -75 B (0%)
build/url/index.js 4.06 kB +1 B
build/viewport/index.js 1.85 kB -1 B
build/warning/index.js 1.14 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 620 B 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/deprecated/index.js 772 B 0 B
build/escape-html/index.js 733 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/keyboard-shortcuts/index.js 2.51 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/media-utils/index.js 5.29 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/server-side-render/index.js 2.68 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@oandregal oandregal changed the title Add preset for padding and use it in the padding controls Add preset for padding and use it in the UI controls Jun 15, 2020
@oandregal oandregal added the [Status] In Progress Tracking issues with work in progress label Jun 16, 2020
@@ -131,6 +132,12 @@ export const SETTINGS_DEFAULTS = {
{ slug: 'full', name: __( 'Full Size' ) },
],

padding: [
Copy link
Member Author

Choose a reason for hiding this comment

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

cc @mapk @kjellr @jasmussen I'm still working on this one, but I thought I'd ping early. What do you think of these default values? Would you use a different combination?

Copy link
Contributor

Choose a reason for hiding this comment

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

I'd go in multiples of 4 if we go with pixels or even another unit. I'm wondering if rem units might be better here.

As far as pixel values

small: 4 - nice
regular: 16
large: 32 - only large relative to body copy, though

Em units could also work well and more flexibly even if they are harder to understand. If so, maybe:

small: .5em
regular: 1em
large: 1.5em

Copy link
Member Author

Choose a reason for hiding this comment

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

Thanks, Michael! I pushed those defaults. I also wanted to say that this PR is going to hibernate for a bit as there are some design and engineering issues we need to fix before being able to land it (so it's not going to be part of 5.5 -- sorry about the confusion!).

@oandregal oandregal added the Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json label Jun 16, 2020
@oandregal oandregal force-pushed the add/preset-padding branch from adce1ae to 76c4daa Compare June 17, 2020 08:01
@oandregal oandregal force-pushed the add/preset-padding branch from 76c4daa to f9720d4 Compare June 17, 2020 12:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants