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

[WIP] Block Support: Add typography letter spacing #31745

Closed

Conversation

ramonjd
Copy link
Member

@ramonjd ramonjd commented May 12, 2021

Description

This PR is currently WIP.

We're trying to add letter spacing support for block typography.

At the start, we've started with a value of true, but maybe we'd like to specify units, e.g.,

"__experimentalLetterSpacing": [ "px", "em", "rem" ], and "__experimentalLetterSpacing": true for all of them.

How has this been tested?

As we go for now.

To (experimental-)theme.json add:

"settings": {
    ...
    "typography": {
          ....
          "customLetterSpacing": true,
     }
}

and to block.json (e.g., in core/site-title or core/heading ):

"supports": {
    ....
    "__experimentalLetterSpacing": true,
}

Screenshots

Types of changes

May-12-2021 20-28-21

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • 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 (please manually search all *.native.js files for terms that need renaming or removal).

const MIN_LETTER_SPACING = -5;
const MAX_LETTER_SPACING = 10;

export default function LetterSpacingControl( {
Copy link
Member Author

Choose a reason for hiding this comment

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

This is taken 1:1 from the line-height control component.

I think there could be scope to abstract/combine them, especially if we plan to freshen up the design of the sidebar controls (See #27331)

@carolinan
Copy link
Contributor

There is already a PR for this, in which way does this version differ, and if there are problems with my version can you provide feedback? #31118

… typography supports.

TODO: before pushing for review, remove test changes to site-title/block.json and experimental-default-theme.json
… typography supports.

TODO: before pushing for review, remove test changes to heading/block.json, site-title/block.json and experimental-default-theme.json
@ramonjd ramonjd force-pushed the add/block-support-letter-spacing branch from e4474f2 to d505084 Compare May 12, 2021 10:59
@ramonjd
Copy link
Member Author

ramonjd commented May 12, 2021

There is already a PR for this, in which way does this version differ, and if there are problems with my version can you provide feedback? #31118

Thanks @carolinan ! That'll teach me for not keeping an eye on current PRs. 😄
I think you're further along, especially with units etc. I'll close this one. Cheers!

@ramonjd ramonjd closed this May 12, 2021
@ramonjd ramonjd deleted the add/block-support-letter-spacing branch May 12, 2021 11:00
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.

2 participants