Use different sizes for buttons and render.

WordPress · Sep 11, 2018 · b470109 · b470109
1 parent ff061f2
commit b470109
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
@@ -114,13 +114,13 @@
 }
 
 .has-regular-font-size {
-	font-size: 18px;
+	font-size: 20px;
 }
 
 .has-large-font-size {
-	font-size: 22px;
+	font-size: 36px;
 }
 
 .has-larger-font-size {
-	font-size: 32px;
+	font-size: 42px;
 }
diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
@@ -33,15 +33,15 @@ export default function FontSizePicker( { fontSizes = [], fallbackFontSize, valu
 		>
 			<div className="components-font-size-picker__buttons">
 				<ButtonGroup aria-label={ __( 'Font Size' ) }>
-					{ map( fontSizes, ( { name, size, shortName } ) => (
+					{ map( fontSizes, ( { name, size, shortName, slug } ) => (
 						<Tooltip text={ name || shortName }>
 							<Button
 								key={ size }
 								isLarge
 								isPrimary={ value === size }
 								aria-pressed={ value === size }
 								onClick={ () => onChange( size ) }
-								style={ { fontSize: size } }
+								className={ 'is-font-' + slug }
 							>
 								<span>A</span>
 							</Button>

diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss
@@ -22,6 +22,14 @@
 		> span {
 			line-height: 1;
 		}
+
+		&.is-font-medium {
+			font-size: 18px;
+		}
+
+		&.is-font-large {
+			font-size: 22px;
+		}
 	}
 }
 

diff --git a/packages/editor/src/store/defaults.js b/packages/editor/src/store/defaults.js
@@ -87,13 +87,13 @@ export const EDITOR_SETTINGS_DEFAULTS = {
 		{
 			name: __( 'Medium' ),
 			shortName: __( 'M' ),
-			size: 18,
+			size: 20,
 			slug: 'medium',
 		},
 		{
 			name: __( 'Large' ),
 			shortName: __( 'L' ),
-			size: 22,
+			size: 36,
 			slug: 'large',
 		},
 	],