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

		@@ -1,116 +1,63 @@
1		-import { useBlockProps as blockProps, RichText } from '@wordpress/block-editor';
2		-import { applyFilters } from '@wordpress/hooks';
	1	+import { RichText, useBlockProps as blockProps } from '@wordpress/block-editor';
3	2	import classNames from 'classnames';
4		-import defaultThemes from '../defaultThemes.json';
5		-import { ButtonList } from '../editor/components/buttons/ButtonList';
6	3	import { FooterType } from '../editor/components/FooterSelect';
7	4	import { HeaderType } from '../editor/components/HeaderSelect';
8	5	import { SeeMoreType } from '../editor/components/SeeMoreSelect';
9		-import type { 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': 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		- );
116		-};
	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
	38	+ : undefined,
	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	+);