← All changes | src/front/BlockOutput.tsx +104 -102 trunk → 1.26.7 View file →

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