← All changes | src/index.tsx +18 -61 1.5.2 → 1.2.4 View file →

		@@ -1,22 +1,18 @@
1		-import { useBlockProps as blockProps } from '@wordpress/block-editor';
2		-import { createBlock, registerBlockType } from '@wordpress/blocks';
	1	+import { RichText, useBlockProps as blockProps } from '@wordpress/block-editor';
	2	+import { registerBlockType } from '@wordpress/blocks';
3	3	import { addFilter } from '@wordpress/hooks';
4	4	import { __ } from '@wordpress/i18n';
5		-import classnames from 'classnames';
6		-import { Lang } from 'shiki';
7	5	import blockConfig from './block.json';
8	6	import { Edit } from './editor/Edit';
9	7	import { BlockFilter } from './editor/components/BlockFilter';
10		-import { HeaderType } from './editor/components/HeaderType';
11	8	import { SidebarControls } from './editor/controls/Sidebar';
12	9	import { ToolbarControls } from './editor/controls/Toolbar';
13	10	import './editor/editor.css';
14		-import { BlockOutput } from './front/BlockOutput';
	11	+import { CopyButton } from './front/CopyButton';
	12	+import './front/style.css';
15	13	import { blockIcon } from './icons';
16	14	import { Attributes } from './types';
17		-import { fontFamilyLong, maybeClamp } from './util/fonts';
18		-import { getMainAlias } from './util/languages';
19	15
20	16	registerBlockType<Attributes>(blockConfig.name, {
21	17	...blockConfig,
22	18	icon: blockIcon,
		@@ -25,18 +21,12 @@
25	21	code: { type: 'string' },
26	22	codeHTML: { type: 'string' },
27	23	language: { type: 'string' },
28	24	theme: { type: 'string' },
29		- align: { type: 'string' },
	25	+ align: { type: 'string', default: 'none' },
30	26	bgColor: { type: 'string', default: '#282a37' },
31	27	textColor: { type: 'string', default: '#f8f8f2' },
32		- fontSize: { type: 'string' },
33		- fontFamily: { type: 'string' },
34		- lineHeight: { type: 'string' },
35		- clampFonts: { type: 'boolean', default: false },
36	28	lineNumbers: { type: 'boolean' },
37		- headerType: { type: 'string' },
38		- disablePadding: { type: 'boolean', default: false },
39	29	startingLineNumber: { type: 'number', default: 1 },
40	30	frame: { type: 'boolean' },
41	31	renderType: { type: 'string', default: 'code' },
42	32	label: { type: 'string', default: '' },
		@@ -41,13 +31,8 @@
41	31	renderType: { type: 'string', default: 'code' },
42	32	label: { type: 'string', default: '' },
43	33	copyButton: { type: 'boolean' },
44	34	},
45		- // Need to add these here to avoid TS type errors
46		- supports: {
47		- html: false,
48		- align: ['wide', 'full'],
49		- },
50	35	title: __('Code Pro', 'code-block-pro'),
51	36	edit: ({ attributes, setAttributes }) => (
52	37	<>
53	38	<SidebarControls
		@@ -57,53 +42,25 @@
57	42	<ToolbarControls
58	43	attributes={attributes}
59	44	setAttributes={setAttributes}
60	45	/>
61		- <div
62		- {...blockProps({
63		- className: classnames('code-block-pro-editor', {
64		- 'padding-disabled': attributes.disablePadding,
65		- }),
66		- style: {
67		- fontSize: maybeClamp(
68		- attributes.fontSize,
69		- attributes.clampFonts,
70		- ),
71		- fontFamily: fontFamilyLong(attributes.fontFamily),
72		- lineHeight: maybeClamp(
73		- attributes.lineHeight,
74		- attributes.clampFonts,
75		- ),
76		- },
77		- })}>
78		- <HeaderType {...attributes} />
	46	+ <div {...blockProps({ className: 'code-block-pro-editor' })}>
79	47	<Edit attributes={attributes} setAttributes={setAttributes} />
80	48	</div>
81	49	</>
82	50	),
83		- save: ({ attributes }) => <BlockOutput attributes={attributes} />,
84		- transforms: {
85		- from: [
86		- {
87		- type: 'block',
88		- blocks: ['core/code', 'syntaxhighlighter/code'],
89		- transform: (attrs) => {
90		- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
91		- // @ts-ignore-next-line - Why is this reading the block generic?
92		- const { content, language } = attrs;
93		- const decode = (value: string) => {
94		- const txt = document.createElement('textarea');
95		- txt.innerHTML = value;
96		- return txt.value;
97		- };
98		- return createBlock(blockConfig.name, {
99		- code: content ? decode(content) : undefined,
100		- language: getMainAlias(language) as Lang,
101		- });
102		- },
103		- },
104		- ],
105		- },
	51	+ save: ({ attributes }) => (
	52	+ <div {...blockProps.save()}>
	53	+ {attributes.code?.length > 0 ? (
	54	+ <>
	55	+ {attributes.copyButton && (
	56	+ <CopyButton attributes={attributes} />
	57	+ )}
	58	+ <RichText.Content value={attributes.codeHTML} />
	59	+ </>
	60	+ ) : null}
	61	+ </div>
	62	+ ),
106	63	});
107	64
108	65	addFilter(
109	66	'editor.BlockEdit',