Merge pull request #38 from KevinBatdorf/add-clamp-on-fonts

Add clamp option to font sizing

readme.txt

@@ -208,10 +208,7 @@ Beautiful syntax highlighting made easy.
 
 = Font size is too small =
 
-If you're using an old theme that sets the html tag to a very low value, then the code block will size itself relative to that. There isn't a great universal fix for this unless I force a certain behavior for everyone. Typically you can just remove that html style without any effect with the following css (add it anywhere that can load CSS):
-`
-html { font-size: 100% !important; }
-`
+Look under the "Styling" tab and turn on "Clamp Values", which will compute the rem values relative to a 16px-24px base * the selected rem values. e.g. clamp(20px, 1.25rem, 30px).
 
 == Screenshots ==
 
@@ -220,6 +217,7 @@ html { font-size: 100% !important; }
 
 == Changelog ==
 
+- Feature: Add toggle so users can clamp font sizes to reasonable values.
 - Show font styling in theme select sidebar
 
 = 1.4.0 - 2022-09-04 =

src/block.json

@@ -18,6 +18,7 @@
  "fontFamily": { "type": "string" },
  "lineHeight": { "type": "string" },
  "lineNumbers": { "type": "boolean" },
+ "clampFonts": { "type": "boolean", "default": false },
  "headerType": { "type": "string" },
  "startingLineNumber": { "type": "number", "default": 1 },
  "frame": { "type": "boolean" },

src/editor/controls/Sidebar.tsx

@@ -109,6 +109,21 @@ export const SidebarControls = ({
  });
  }}
  />
+ <CheckboxControl
+ label={__('Clamp Values', 'code-block-pro')}
+ help={__(
+ 'Check this if your font sizes are unusually large or tiny.',
+ 'code-block-pro',
+ )}
+ checked={attributes.clampFonts}
+ onChange={(clampFonts) => {
+ setAttributes({ clampFonts });
+ updateThemeHistory({
+ ...attributes,
+ clampFonts,
+ });
+ }}
+ />
  </div>
  </PanelBody>
  <PanelBody
@@ -117,7 +132,6 @@ export const SidebarControls = ({
  <HeaderSelect
  attributes={attributes}
  onClick={(headerType: string) => {
- console.log({ headerType });
  setAttributes({ headerType });
  updateThemeHistory({ ...attributes, headerType });
  }}

src/front/BlockOutput.tsx

@@ -1,6 +1,7 @@
 import { RichText, useBlockProps as blockProps } from '@wordpress/block-editor';
 import { HeaderType } from '../editor/components/HeaderType';
 import { Attributes } from '../types';
+import { fontFamilyLong, maybeClamp } from '../util/fonts';
 import { CopyButton } from './CopyButton';
 import './style.css';
 
@@ -9,22 +10,13 @@ export const BlockOutput = ({ attributes }: { attributes: Attributes }) => (
  {...blockProps.save()}
  data-code-block-pro-font-family={attributes.fontFamily}
  style={{
- fontSize: attributes.fontSize,
+ fontSize: maybeClamp(attributes.fontSize, attributes.clampFonts),
  // Tiny check to avoid block invalidation error
- fontFamily: attributes.fontFamily
- ? [
- attributes.fontFamily,
- 'ui-monospace',
- 'SFMono-Regular',
- 'Menlo',
- 'Monaco',
- 'Consolas',
- 'monospace',
- ]
- .filter(Boolean)
- .join(',')
- : undefined,
- lineHeight: attributes.lineHeight,
+ fontFamily: fontFamilyLong(attributes.fontFamily),
+ lineHeight: maybeClamp(
+ attributes.lineHeight,
+ attributes.clampFonts,
+ ),
  }}>
  {attributes.code?.length > 0 ? (
  <>

src/index.tsx

@@ -13,6 +13,7 @@ import './editor/editor.css';
 import { BlockOutput } from './front/BlockOutput';
 import { blockIcon } from './icons';
 import { Attributes } from './types';
+import { fontFamilyLong, maybeClamp } from './util/fonts';
 import { getMainAlias } from './util/languages';
 
 registerBlockType<Attributes>(blockConfig.name, {
@@ -30,6 +31,7 @@ registerBlockType<Attributes>(blockConfig.name, {
  fontSize: { type: 'string' },
  fontFamily: { type: 'string' },
  lineHeight: { type: 'string' },
+ clampFonts: { type: 'boolean', default: false },
  lineNumbers: { type: 'boolean' },
  headerType: { type: 'string' },
  startingLineNumber: { type: 'number', default: 1 },
@@ -58,19 +60,15 @@ registerBlockType<Attributes>(blockConfig.name, {
  {...blockProps({
  className: 'code-block-pro-editor',
  style: {
- fontSize: attributes.fontSize,
- fontFamily: [
- attributes.fontFamily,
- 'ui-monospace',
- 'SFMono-Regular',
- 'Menlo',
- 'Monaco',
- 'Consolas',
- 'monospace',
- ]
- .filter(Boolean)
- .join(','),
- lineHeight: attributes.lineHeight,
+ fontSize: maybeClamp(
+ attributes.fontSize,
+ attributes.clampFonts,
+ ),
+ fontFamily: fontFamilyLong(attributes.fontFamily),
+ lineHeight: maybeClamp(
+ attributes.lineHeight,
+ attributes.clampFonts,
+ ),
  },
  })}>
  <HeaderType {...attributes} />

src/state/theme.ts

@@ -9,6 +9,7 @@ type ThemeType = {
  previousFontFamily: string;
  previousFontSize: string;
  previousHeaderType: string;
+ previousClampFonts: boolean;
  updateThemeHistory: (settings: Partial<Attributes>) => void;
 };
 const path = '/wp/v2/settings';
@@ -27,6 +28,7 @@ export const useThemeStore = create<ThemeType>()(
  previousFontFamily: '',
  previousFontSize: '.875rem',
  previousHeaderType: 'headlights',
+ previousClampFonts: false,
  updateThemeHistory(attributes) {
  set((state) => ({
  ...state,
@@ -35,6 +37,7 @@ export const useThemeStore = create<ThemeType>()(
  previousFontFamily: attributes.fontFamily,
  previousFontSize: attributes.fontSize,
  previousHeaderType: attributes.headerType,
+ previousClampFonts: attributes.clampFonts,
  }));
  },
  }),

src/types.ts

@@ -12,6 +12,7 @@ export type Attributes = {
  fontFamily: string;
  lineHeight: string;
  lineNumbers: boolean;
+ clampFonts: boolean;
  headerType: string;
  startingLineNumber: number;
  frame: boolean;

src/util/fonts.ts

@@ -0,0 +1,21 @@
+export const fontFamilyLong = (family: string) => {
+ if (!family) return;
+ return [
+ family,
+ 'ui-monospace',
+ 'SFMono-Regular',
+ 'Menlo',
+ 'Monaco',
+ 'Consolas',
+ 'monospace',
+ ].join(',');
+};
+
+export const maybeClamp = (size: string, clampFonts: boolean) => {
+ if (!size) return;
+ if (!clampFonts) return size;
+ if (!parseFloat(size)) return size;
+ return `clamp(${parseFloat(size) * 16}px, ${size}, ${
+ parseFloat(size) * 24
+ }px)`;
+};