← All changes | src/front/BlockOutput.tsx +54 -109 1.27.5 → 1.13.0 View file →

		@@ -1,118 +1,63 @@
1	1	import { RichText, useBlockProps as blockProps } from '@wordpress/block-editor';
2		-import { applyFilters } from '@wordpress/hooks';
3	2	import classNames from 'classnames';
4		-import defaultThemes from '../defaultThemes.json';
5	3	import { FooterType } from '../editor/components/FooterSelect';
6	4	import { HeaderType } from '../editor/components/HeaderSelect';
7	5	import { SeeMoreType } from '../editor/components/SeeMoreSelect';
8		-import { ButtonList } from '../editor/components/buttons/ButtonList';
9		-import { Attributes, ThemeOption } from '../types';
10		-import { findLineNumberColor } from '../util/colors';
	6	+import { Attributes } from '../types';
11	7	import { fontFamilyLong, maybeClamp } from '../util/fonts';
	8	+import { CopyButton } from './CopyButton';
12	9	import './style.css';
13	10
14		-export const BlockOutput = ({ attributes }: { attributes: Attributes }) => {
15		- const {
16		- clampFonts,
17		- code,
18		- codeHTML,
19		- disablePadding,
20		- enableBlurring,
21		- enableHighlighting,
22		- footerType,
23		- fontSize,
24		- fontFamily,
25		- highestLineNumber,
26		- highlightingHover,
27		- lineHeight,
28		- lineHighlightColor,
29		- lineNumbers,
30		- lineNumbersWidth,
31		- removeBlurOnHover,
32		- startingLineNumber,
33		- tabSize,
34		- theme,
35		- useTabs,
36		- } = attributes;
37		-
38		- const fontFamilyRatio = (fontFamily: string) =>
39		- fontFamily === 'Code-Pro-Fantasque-Sans-Mono' ? 0.5 : 0.6;
40		-
41		- // To add custom styles
42		- const themes = applyFilters(
43		- 'blocks.codeBlockPro.themes',
44		- defaultThemes,
45		- ) as ThemeOption;
46		- const styles = themes[theme]?.styles;
47		- return (
48		- <div
49		- {...blockProps.save({
50		- className: classNames({
51		- 'padding-disabled': disablePadding,
52		- 'padding-bottom-disabled':
53		- footerType && footerType !== 'none',
54		- 'cbp-has-line-numbers': lineNumbers,
55		- 'cbp-blur-enabled': enableBlurring,
56		- 'cbp-unblur-on-hover': removeBlurOnHover,
57		- 'cbp-highlight-hover': highlightingHover,
58		- }),
59		- })}
60		- data-code-block-pro-font-family={fontFamily}
61		- style={
62		- {
63		- fontSize: maybeClamp(fontSize, clampFonts),
64		- // Tiny check to avoid block invalidation error
65		- fontFamily: fontFamilyLong(fontFamily),
66		- '--cbp-line-number-color': lineNumbers
67		- ? findLineNumberColor(attributes)
	11	+export const BlockOutput = ({ attributes }: { attributes: Attributes }) => (
	12	+ <div
	13	+ {...blockProps.save({
	14	+ className: classNames({
	15	+ 'padding-disabled': attributes.disablePadding,
	16	+ 'padding-bottom-disabled':
	17	+ attributes?.footerType && attributes?.footerType !== 'none',
	18	+ 'cbp-has-line-numbers': attributes.lineNumbers,
	19	+ 'cbp-blur-enabled': attributes.enableBlurring,
	20	+ 'cbp-unblur-on-hover': attributes.removeBlurOnHover,
	21	+ }),
	22	+ })}
	23	+ data-code-block-pro-font-family={attributes.fontFamily}
	24	+ style={
	25	+ {
	26	+ fontSize: maybeClamp(
	27	+ attributes.fontSize,
	28	+ attributes.clampFonts,
	29	+ ),
	30	+ // Tiny check to avoid block invalidation error
	31	+ fontFamily: fontFamilyLong(attributes.fontFamily),
	32	+ '--cbp-line-number-color': attributes?.lineNumbers
	33	+ ? attributes.textColor
	34	+ : undefined,
	35	+ '--cbp-line-number-start':
	36	+ Number(attributes?.startingLineNumber) > 1
	37	+ ? attributes.startingLineNumber
68	38	: undefined,
69		- '--cbp-line-number-start':
70		- Number(startingLineNumber) > 1
71		- ? startingLineNumber
72		- : undefined,
73		- '--cbp-line-number-width': highestLineNumber
74		- ? `calc(${
75		- String(highestLineNumber).length
76		- } * ${fontFamilyRatio(fontFamily)} * ${fontSize})`
77		- : lineNumbersWidth
78		- ? `${lineNumbersWidth}px`
79		- : undefined,
80		- '--cbp-line-highlight-color':
81		- enableHighlighting || highlightingHover
82		- ? lineHighlightColor
83		- : undefined,
84		- lineHeight: maybeClamp(lineHeight, clampFonts),
85		- '--cbp-tab-width':
86		- useTabs === undefined
87		- ? undefined // bw compatibility
88		- : String(tabSize),
89		- tabSize:
90		- useTabs === undefined
91		- ? undefined // bw compatibility
92		- : 'var(--cbp-tab-width, 2)',
93		- ...Object.entries(styles ?? {}).reduce(
94		- (acc, [key, value]) => ({
95		- ...acc,
96		- [`--shiki-${key}`]: value,
97		- }),
98		- {},
99		- ),
100		- ...(applyFilters(
101		- 'blocks.codeBlockPro.additionalOutputAttributes',
102		- {},
103		- attributes,
104		- ) as object),
105		- } as React.CSSProperties
106		- }>
107		- {code?.length > 0 ? (
108		- <>
109		- <HeaderType {...attributes} />
110		- <ButtonList {...attributes} />
111		- <RichText.Content value={codeHTML} />
112		- <FooterType {...attributes} />
113		- <SeeMoreType {...attributes} />
114		- </>
115		- ) : null}
116		- </div>
117		- );
118		-};
	39	+ '--cbp-line-number-width': attributes.lineNumbersWidth
	40	+ ? `${attributes.lineNumbersWidth}px`
	41	+ : undefined,
	42	+ '--cbp-line-highlight-color': attributes?.enableHighlighting
	43	+ ? attributes.lineHighlightColor
	44	+ : undefined,
	45	+ lineHeight: maybeClamp(
	46	+ attributes.lineHeight,
	47	+ attributes.clampFonts,
	48	+ ),
	49	+ } as React.CSSProperties
	50	+ }>
	51	+ {attributes.code?.length > 0 ? (
	52	+ <>
	53	+ <HeaderType {...attributes} />
	54	+ {attributes.copyButton && (
	55	+ <CopyButton attributes={attributes} />
	56	+ )}
	57	+ <RichText.Content value={attributes.codeHTML} />
	58	+ <FooterType {...attributes} />
	59	+ <SeeMoreType {...attributes} />
	60	+ </>
	61	+ ) : null}
	62	+ </div>
	63	+);