← All changes | src/front/BlockOutput.tsx +44 -20 1.4.0 → 1.13.0 View file →

		@@ -1,32 +1,54 @@
1	1	import { RichText, useBlockProps as blockProps } from '@wordpress/block-editor';
2		-import { HeaderType } from '../editor/components/HeaderType';
	2	+import classNames from 'classnames';
	3	+import { FooterType } from '../editor/components/FooterSelect';
	4	+import { HeaderType } from '../editor/components/HeaderSelect';
	5	+import { SeeMoreType } from '../editor/components/SeeMoreSelect';
3	6	import { Attributes } from '../types';
	7	+import { fontFamilyLong, maybeClamp } from '../util/fonts';
4	8	import { CopyButton } from './CopyButton';
5	9	import './style.css';
6	10
7	11	export const BlockOutput = ({ attributes }: { attributes: Attributes }) => (
8	12	<div
9		- {...blockProps.save()}
	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	+ })}
10	23	data-code-block-pro-font-family={attributes.fontFamily}
11		- style={{
12		- fontSize: attributes.fontSize,
13		- // Tiny check to avoid block invalidation error
14		- fontFamily: attributes.fontFamily
15		- ? [
16		- attributes.fontFamily,
17		- 'ui-monospace',
18		- 'SFMono-Regular',
19		- 'Menlo',
20		- 'Monaco',
21		- 'Consolas',
22		- 'monospace',
23		- ]
24		- .filter(Boolean)
25		- .join(',')
26		- : undefined,
27		- lineHeight: attributes.lineHeight,
28		- }}>
	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	+ }>
29	51	{attributes.code?.length > 0 ? (
30	52	<>
31	53	<HeaderType {...attributes} />
32	54	{attributes.copyButton && (
		@@ -32,8 +54,10 @@
32	54	{attributes.copyButton && (
33	55	<CopyButton attributes={attributes} />
34	56	)}
35	57	<RichText.Content value={attributes.codeHTML} />
	58	+ <FooterType {...attributes} />
	59	+ <SeeMoreType {...attributes} />
36	60	</>
37	61	) : null}
38	62	</div>
39	63	);