PluginProbe
Code Block Pro – Beautiful Syntax Highlighting / 1.13.0
Code Block Pro – Beautiful Syntax Highlighting v1.13.0
1.27.1 1.27.2 1.27.3 1.27.4 1.27.5 1.27.6 1.27.7 1.28.0 1.3.0 1.4.0 1.5.0 1.5.1 1.5.2 1.6.0 1.7.0 1.8.0 1.9.0 1.9.1 1.9.2 1.9.3 trunk 1.1.0 1.10.0 1.11.0 1.11.1 All 63 releases
← All changes | src/index.tsx +59 -7 1.5.01.13.0 View file →
@@ -1,19 +1,22 @@
1 1 import { useBlockProps as blockProps } from '@wordpress/block-editor';
2 2 import { createBlock, registerBlockType } from '@wordpress/blocks';
3 3 import { addFilter } from '@wordpress/hooks';
4 4 import { __ } from '@wordpress/i18n';
5 -import { Lang } from 'shiki';
5 +import classnames from 'classnames';
6 6 import blockConfig from './block.json';
7 7 import { Edit } from './editor/Edit';
8 8 import { BlockFilter } from './editor/components/BlockFilter';
9 -import { HeaderType } from './editor/components/HeaderType';
9 +import { FooterType } from './editor/components/FooterSelect';
10 +import { HeaderType } from './editor/components/HeaderSelect';
11 +import { SeeMoreType } from './editor/components/SeeMoreSelect';
10 12 import { SidebarControls } from './editor/controls/Sidebar';
11 13 import { ToolbarControls } from './editor/controls/Toolbar';
12 14 import './editor/editor.css';
13 15 import { BlockOutput } from './front/BlockOutput';
16 +import { CopyButton } from './front/CopyButton';
14 17 import { blockIcon } from './icons';
15 -import { Attributes } from './types';
18 +import { Attributes, Lang } from './types';
16 19 import { fontFamilyLong, maybeClamp } from './util/fonts';
17 20 import { getMainAlias } from './util/languages';
18 21
19 22 registerBlockType<Attributes>(blockConfig.name, {
@@ -30,12 +33,31 @@
30 33 textColor: { type: 'string', default: '#f8f8f2' },
31 34 fontSize: { type: 'string' },
32 35 fontFamily: { type: 'string' },
33 36 lineHeight: { type: 'string' },
34 - clampFonts: { type: 'boolean', default: false },
37 + clampFonts: { type: 'boolean' },
38 + editorHeight: { type: 'string' },
35 39 lineNumbers: { type: 'boolean' },
36 40 headerType: { type: 'string' },
37 - startingLineNumber: { type: 'number', default: 1 },
41 + headerString: { type: 'string' },
42 + disablePadding: { type: 'boolean' },
43 + footerType: { type: 'string' },
44 + footerString: { type: 'string' },
45 + footerLink: { type: 'string' },
46 + footerLinkTarget: { type: 'boolean' },
47 + enableMaxHeight: { type: 'boolean' },
48 + seeMoreType: { type: 'string' },
49 + seeMoreString: { type: 'string' },
50 + seeMoreAfterLine: { type: 'string' },
51 + seeMoreTransition: { type: 'boolean' },
52 + startingLineNumber: { type: 'string' },
53 + lineNumbersWidth: { type: 'number' },
54 + enableHighlighting: { type: 'boolean' },
55 + lineHighlights: { type: 'string' },
56 + lineHighlightColor: { type: 'string' },
57 + enableBlurring: { type: 'boolean' },
58 + lineBlurs: { type: 'string' },
59 + removeBlurOnHover: { type: 'boolean' },
38 60 frame: { type: 'boolean' },
39 61 renderType: { type: 'string', default: 'code' },
40 62 label: { type: 'string', default: '' },
41 63 copyButton: { type: 'boolean' },
@@ -57,15 +79,40 @@
57 79 setAttributes={setAttributes}
58 80 />
59 81 <div
60 82 {...blockProps({
61 - className: 'code-block-pro-editor',
83 + className: classnames('code-block-pro-editor', {
84 + 'padding-disabled': attributes.disablePadding,
85 + 'padding-bottom-disabled':
86 + attributes?.footerType &&
87 + attributes?.footerType !== 'none',
88 + 'cbp-has-line-numbers': attributes.lineNumbers,
89 + 'cbp-blur-enabled': attributes.enableBlurring,
90 + 'cbp-unblur-on-hover': attributes.removeBlurOnHover,
91 + }),
62 92 style: {
63 93 fontSize: maybeClamp(
64 94 attributes.fontSize,
65 95 attributes.clampFonts,
66 96 ),
67 - fontFamily: fontFamilyLong(attributes.fontFamily),
97 + '--cbp-line-number-color': attributes?.lineNumbers
98 + ? attributes.textColor
99 + : undefined,
100 + '--cbp-line-number-start':
101 + Number(attributes?.startingLineNumber) > 1
102 + ? attributes.startingLineNumber
103 + : undefined,
104 + '--cbp-line-number-width': attributes.lineNumbersWidth
105 + ? `${attributes.lineNumbersWidth}px`
106 + : undefined,
107 + '--cbp-line-highlight-color':
108 + attributes?.enableHighlighting
109 + ? attributes.lineHighlightColor
110 + : undefined,
111 + '--cbp-line-height': attributes.lineHeight,
112 + // Disabled as ligatures will break the editor line widths
113 + // fontFamily: fontFamilyLong(attributes.fontFamily),
114 + fontFamily: fontFamilyLong(''),
68 115 lineHeight: maybeClamp(
69 116 attributes.lineHeight,
70 117 attributes.clampFonts,
71 118 ),
@@ -71,9 +118,14 @@
71 118 ),
72 119 },
73 120 })}>
74 121 <HeaderType {...attributes} />
122 + {attributes.copyButton && (
123 + <CopyButton attributes={attributes} />
124 + )}
75 125 <Edit attributes={attributes} setAttributes={setAttributes} />
126 + <FooterType {...attributes} />
127 + <SeeMoreType {...attributes} />
76 128 </div>
77 129 </>
78 130 ),
79 131 save: ({ attributes }) => <BlockOutput attributes={attributes} />,