← All changes | src/front/BlockOutput.tsx +43 -11 1.5.0 → 1.13.0 View file →

		@@ -1,6 +1,9 @@
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';
4	7	import { fontFamilyLong, maybeClamp } from '../util/fonts';
5	8	import { CopyButton } from './CopyButton';
6	9	import './style.css';
		@@ -6,19 +9,46 @@
6	9	import './style.css';
7	10
8	11	export const BlockOutput = ({ attributes }: { attributes: Attributes }) => (
9	12	<div
10		- {...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	+ })}
11	23	data-code-block-pro-font-family={attributes.fontFamily}
12		- style={{
13		- fontSize: maybeClamp(attributes.fontSize, attributes.clampFonts),
14		- // Tiny check to avoid block invalidation error
15		- fontFamily: fontFamilyLong(attributes.fontFamily),
16		- lineHeight: maybeClamp(
17		- attributes.lineHeight,
18		- attributes.clampFonts,
19		- ),
20		- }}>
	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	+ }>
21	51	{attributes.code?.length > 0 ? (
22	52	<>
23	53	<HeaderType {...attributes} />
24	54	{attributes.copyButton && (
		@@ -24,8 +54,10 @@
24	54	{attributes.copyButton && (
25	55	<CopyButton attributes={attributes} />
26	56	)}
27	57	<RichText.Content value={attributes.codeHTML} />
	58	+ <FooterType {...attributes} />
	59	+ <SeeMoreType {...attributes} />
28	60	</>
29	61	) : null}
30	62	</div>
31	63	);