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

Button Block: Use relative instead of absolute units #24322

Closed

Conversation

aristath
Copy link
Member

@aristath aristath commented Aug 3, 2020

Right now, the button block has these styles:

.wp-block-button__link {
	border-radius: 28px;
	font-size: 18px;
	padding: 12px 24px;
}

These styles don't scale to their surrounding text or theme by default.
I propose we change these to use relative units. The result will be buttons that can auto-scale to automatically use sizes relative to their location and context.

Default browser font-size is 16px so all calculations here were done using that as a base.

@ZebulanStanphill ZebulanStanphill added [Block] Buttons Affects the Buttons Block [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Enhancement A suggestion for improvement. CSS Styling Related to editor and front end styles, CSS-specific issues. labels Aug 4, 2020
@ZebulanStanphill ZebulanStanphill added the [Package] Block library /packages/block-library label Aug 11, 2020
@aristath
Copy link
Member Author

Combined with other PRs in #24523

@aristath aristath closed this Aug 13, 2020
@aristath aristath deleted the button-block-relative-units branch August 13, 2020 11:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Buttons Affects the Buttons Block CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Package] Block library /packages/block-library [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants