← All changes | src/index.tsx +129 -39 1.1.0 → 1.13.0 View file →

		@@ -1,35 +1,28 @@
1		-import { RichText, useBlockProps as blockProps } from '@wordpress/block-editor';
2		-import { registerBlockType } from '@wordpress/blocks';
	1	+import { useBlockProps as blockProps } from '@wordpress/block-editor';
	2	+import { createBlock, registerBlockType } from '@wordpress/blocks';
3	3	import { addFilter } from '@wordpress/hooks';
4	4	import { __ } from '@wordpress/i18n';
	5	+import classnames from 'classnames';
5	6	import blockConfig from './block.json';
6	7	import { Edit } from './editor/Edit';
	8	+import { BlockFilter } from './editor/components/BlockFilter';
	9	+import { FooterType } from './editor/components/FooterSelect';
	10	+import { HeaderType } from './editor/components/HeaderSelect';
	11	+import { SeeMoreType } from './editor/components/SeeMoreSelect';
7	12	import { SidebarControls } from './editor/controls/Sidebar';
8	13	import { ToolbarControls } from './editor/controls/Toolbar';
9	14	import './editor/editor.css';
	15	+import { BlockOutput } from './front/BlockOutput';
10	16	import { CopyButton } from './front/CopyButton';
11		-import './front/style.css';
12		-import { Attributes } from './types';
	17	+import { blockIcon } from './icons';
	18	+import { Attributes, Lang } from './types';
	19	+import { fontFamilyLong, maybeClamp } from './util/fonts';
	20	+import { getMainAlias } from './util/languages';
13	21
14		-registerBlockType<Attributes>('kevinbatdorf/code-block-pro', {
	22	+registerBlockType<Attributes>(blockConfig.name, {
15	23	...blockConfig,
16		- icon: (
17		- <svg
18		- xmlns="http://www.w3.org/2000/svg"
19		- style={{ width: 24, height: 24 }}
20		- fill="none"
21		- viewBox="0 0 24 24"
22		- stroke="#1e1e1e"
23		- strokeWidth="2">
24		- <path
25		- fill="none"
26		- strokeLinecap="round"
27		- strokeLinejoin="round"
28		- d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
29		- />
30		- </svg>
31		- ),
	24	+ icon: blockIcon,
32	25	// Types seem to be mismatched if importing these from block.json
33	26	attributes: {
34	27	code: { type: 'string' },
35	28	codeHTML: { type: 'string' },
		@@ -34,19 +27,47 @@
34	27	code: { type: 'string' },
35	28	codeHTML: { type: 'string' },
36	29	language: { type: 'string' },
37	30	theme: { type: 'string' },
38		- align: { type: 'string', default: 'center' },
	31	+ align: { type: 'string' },
39	32	bgColor: { type: 'string', default: '#282a37' },
40	33	textColor: { type: 'string', default: '#f8f8f2' },
	34	+ fontSize: { type: 'string' },
	35	+ fontFamily: { type: 'string' },
	36	+ lineHeight: { type: 'string' },
	37	+ clampFonts: { type: 'boolean' },
	38	+ editorHeight: { type: 'string' },
41	39	lineNumbers: { type: 'boolean' },
42		- startingLineNumber: { type: 'number', default: 1 },
	40	+ headerType: { type: 'string' },
	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' },
43	60	frame: { type: 'boolean' },
44	61	renderType: { type: 'string', default: 'code' },
45	62	label: { type: 'string', default: '' },
46	63	copyButton: { type: 'boolean' },
47	64	},
48		-
	65	+ // Need to add these here to avoid TS type errors
	66	+ supports: {
	67	+ html: false,
	68	+ align: ['wide', 'full'],
	69	+ },
49	70	title: __('Code Pro', 'code-block-pro'),
50	71	edit: ({ attributes, setAttributes }) => (
51	72	<>
52	73	<SidebarControls
		@@ -52,23 +73,92 @@
52	73	<SidebarControls
53	74	attributes={attributes}
54	75	setAttributes={setAttributes}
55	76	/>
56		- <ToolbarControls attributes={attributes} />
57		- <pre {...blockProps({ className: 'code-block-pro-editor' })}>
	77	+ <ToolbarControls
	78	+ attributes={attributes}
	79	+ setAttributes={setAttributes}
	80	+ />
	81	+ <div
	82	+ {...blockProps({
	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	+ }),
	92	+ style: {
	93	+ fontSize: maybeClamp(
	94	+ attributes.fontSize,
	95	+ attributes.clampFonts,
	96	+ ),
	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(''),
	115	+ lineHeight: maybeClamp(
	116	+ attributes.lineHeight,
	117	+ attributes.clampFonts,
	118	+ ),
	119	+ },
	120	+ })}>
	121	+ <HeaderType {...attributes} />
	122	+ {attributes.copyButton && (
	123	+ <CopyButton attributes={attributes} />
	124	+ )}
58	125	<Edit attributes={attributes} setAttributes={setAttributes} />
59		- </pre>
	126	+ <FooterType {...attributes} />
	127	+ <SeeMoreType {...attributes} />
	128	+ </div>
60	129	</>
61	130	),
62		- save: ({ attributes }) => (
63		- <div {...blockProps.save()}>
64		- {attributes.code?.length > 0 ? (
65		- <>
66		- {attributes.copyButton && (
67		- <CopyButton attributes={attributes} />
68		- )}
69		- <RichText.Content value={attributes.codeHTML} />
70		- </>
71		- ) : null}
72		- </div>
73		- ),
	131	+ save: ({ attributes }) => <BlockOutput attributes={attributes} />,
	132	+ transforms: {
	133	+ from: [
	134	+ {
	135	+ type: 'block',
	136	+ blocks: ['core/code', 'syntaxhighlighter/code'],
	137	+ transform: (attrs) => {
	138	+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
	139	+ // @ts-ignore-next-line - Why is this reading the block generic?
	140	+ const { content, language } = attrs;
	141	+ const decode = (value: string) => {
	142	+ const txt = document.createElement('textarea');
	143	+ txt.innerHTML = value;
	144	+ return txt.value;
	145	+ };
	146	+ return createBlock(blockConfig.name, {
	147	+ code: content ? decode(content) : undefined,
	148	+ language: getMainAlias(language) as Lang,
	149	+ });
	150	+ },
	151	+ },
	152	+ ],
	153	+ },
74	154	});
	155	+
	156	+addFilter(
	157	+ 'editor.BlockEdit',
	158	+ blockConfig.name,
	159	+ (CurrentMenuItems) =>
	160	+ // Not sure how to type these incoming props
	161	+ // eslint-disable-next-line
	162	+ (props: any) =>
	163	+ BlockFilter(CurrentMenuItems, props),
	164	+);