diff --git a/readme.txt b/readme.txt index 2ef2501..2503024 100644 --- a/readme.txt +++ b/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 = diff --git a/src/block.json b/src/block.json index d7a5cba..6ac5cef 100644 --- a/src/block.json +++ b/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" }, diff --git a/src/editor/controls/Sidebar.tsx b/src/editor/controls/Sidebar.tsx index 035fa0c..de6e186 100644 --- a/src/editor/controls/Sidebar.tsx +++ b/src/editor/controls/Sidebar.tsx @@ -109,6 +109,21 @@ export const SidebarControls = ({ }); }} /> + { + setAttributes({ clampFonts }); + updateThemeHistory({ + ...attributes, + clampFonts, + }); + }} + /> { - console.log({ headerType }); setAttributes({ headerType }); updateThemeHistory({ ...attributes, headerType }); }} diff --git a/src/front/BlockOutput.tsx b/src/front/BlockOutput.tsx index ba5a5c8..320b1f7 100644 --- a/src/front/BlockOutput.tsx +++ b/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 ? ( <> diff --git a/src/index.tsx b/src/index.tsx index 39a43b4..8e6e87c 100644 --- a/src/index.tsx +++ b/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(blockConfig.name, { @@ -30,6 +31,7 @@ registerBlockType(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(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, + ), }, })}> diff --git a/src/state/theme.ts b/src/state/theme.ts index 9b0dde4..87bba47 100644 --- a/src/state/theme.ts +++ b/src/state/theme.ts @@ -9,6 +9,7 @@ type ThemeType = { previousFontFamily: string; previousFontSize: string; previousHeaderType: string; + previousClampFonts: boolean; updateThemeHistory: (settings: Partial) => void; }; const path = '/wp/v2/settings'; @@ -27,6 +28,7 @@ export const useThemeStore = create()( previousFontFamily: '', previousFontSize: '.875rem', previousHeaderType: 'headlights', + previousClampFonts: false, updateThemeHistory(attributes) { set((state) => ({ ...state, @@ -35,6 +37,7 @@ export const useThemeStore = create()( previousFontFamily: attributes.fontFamily, previousFontSize: attributes.fontSize, previousHeaderType: attributes.headerType, + previousClampFonts: attributes.clampFonts, })); }, }), diff --git a/src/types.ts b/src/types.ts index 1a43f53..2d9d1cd 100644 --- a/src/types.ts +++ b/src/types.ts @@ -12,6 +12,7 @@ export type Attributes = { fontFamily: string; lineHeight: string; lineNumbers: boolean; + clampFonts: boolean; headerType: string; startingLineNumber: number; frame: boolean; diff --git a/src/util/fonts.ts b/src/util/fonts.ts new file mode 100644 index 0000000..a5d1150 --- /dev/null +++ b/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)`; +};