Another attempt at deprecation...

Author: mkaz

package.json

@@ -19,5 +19,8 @@
   "scripts": {
     "start": "wp-scripts start",
     "build": "wp-scripts build"
+  },
+  "dependencies": {
+    "lodash.omit": "^4.5.0"
   }
 }

src/block-attributes.js

@@ -0,0 +1,24 @@
+const blockAttributes = {
+	content: {
+		type: 'string',
+		source: 'html',
+		selector: 'code',
+	},
+	datalang: {
+		type: 'string',
+		selector: 'code',
+		source: 'attribute',
+		attribute: 'data-lang',
+	},
+	lineNumbers: {
+		type: 'boolean',
+	},
+	title: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'pre',
+		attribute: 'title',
+	},
+};
+
+export default blockAttributes;

src/deprecated.js

@@ -0,0 +1,40 @@
+import omit from 'lodash.omit';
+
+const deprecated = {
+	// old attributes
+	attributes: {
+		content: {
+			type: 'string',
+			source: 'html',
+			selector: 'code',
+		},
+		language: {
+			type: 'string',
+			selector: 'code',
+			source: 'attribute',
+			attribute: 'lang',
+		},
+	},
+	migrate: ( attributes ) => {
+		return {
+			datalang: attributes.language,
+			content: attributes.content,
+		};
+	},
+	// old save function
+	save: ( { attributes } ) => {
+		let cls = '';
+		cls = attributes.language ? 'language-' + attributes.language : '';
+		cls = attributes.lineNumbers ? cls + ' line-numbers' : cls;
+
+		return (
+			<pre className="wp-block-code">
+				<code lang={ attributes.language } className={ cls }>
+					{ attributes.content }
+				</code>
+			</pre>
+		);
+	},
+};
+
+export default deprecated;

src/edit.js

@@ -21,12 +21,12 @@ import { __ } from '@wordpress/i18n';
 
 /* global mkaz_code_syntax_languages, mkaz_code_syntax_default_lang, Prism */
 
-const edit = ( { attributes, className, setAttributes } ) => {
+const Edit = ( { attributes, className, setAttributes } ) => {
 	useEffect( () => {
-		if ( ! attributes.language && mkaz_code_syntax_default_lang ) {
-			setAttributes( { language: mkaz_code_syntax_default_lang } );
+		if ( ! attributes.datalang && mkaz_code_syntax_default_lang ) {
+			setAttributes( { datalang: mkaz_code_syntax_default_lang } );
 		}
-	}, [ attributes.language ] );
+	}, [ attributes.datalang ] );
 
 	// Onload fetch color scheme option
 	useEffect( () => {
@@ -61,7 +61,7 @@ const edit = ( { attributes, className, setAttributes } ) => {
 	];
 
 	const updateColorScheme = ( colorScheme ) => {
-		let path = '/mkaz/code-syntax/v1/set/color-scheme/' + colorScheme;
+		const path = '/mkaz/code-syntax/v1/set/color-scheme/' + colorScheme;
 		apiFetch( { path } )
 			.then( () => {
 				setAttributes( { colorScheme } );
@@ -71,10 +71,6 @@ const edit = ( { attributes, className, setAttributes } ) => {
 			} );
 	};
 
-	let cls = '';
-	cls = attributes.language ? 'language-' + attributes.language : '';
-	cls = attributes.lineNumbers ? cls + ' line-numbers' : cls;
-
 	// shared props for text areas
 	const textAreaProps = {
 		value: attributes.content || '',
@@ -96,7 +92,7 @@ const edit = ( { attributes, className, setAttributes } ) => {
 				<PanelBody title={ __( 'Settings' ) }>
 					<SelectControl
 						label={ __( 'Language' ) }
-						value={ attributes.language }
+						value={ attributes.datalang }
 						options={ [
 							{
 								label: __(
@@ -113,8 +109,8 @@ const edit = ( { attributes, className, setAttributes } ) => {
 								} )
 							)
 						) }
-						onChange={ ( language ) =>
-							setAttributes( { language } )
+						onChange={ ( datalang ) =>
+							setAttributes( { datalang } )
 						}
 					/>
 					<ToggleControl
@@ -204,11 +200,11 @@ const edit = ( { attributes, className, setAttributes } ) => {
 
 				{ /* Language label, uses wp-block class to keep within editor bounds */ }
 				<div className="wp-block mkaz-code-syntax-block__lang_label">
-					{ mkaz_code_syntax_languages[ attributes.language ] }
+					{ mkaz_code_syntax_languages[ attributes.datalang ] }
 				</div>
 			</>
 		</>
 	);
 };
 
-export default edit;
+export default Edit;

src/index.js

@@ -11,6 +11,8 @@ import { addFilter } from '@wordpress/hooks';
 /**
  * Internal dependencies
  */
+import blockAttributes from './block-attributes';
+import deprecated from './deprecated';
 import edit from './edit';
 import save from './save';
 
@@ -19,61 +21,13 @@ const addSyntaxToCodeBlock = ( settings ) => {
 		return settings;
 	}
 
-	const blockAttributes = {
-		...settings.attributes,
-		language: {
-			type: 'string',
-			selector: 'code',
-			source: 'attribute',
-			attribute: 'data-lang',
-		},
-		lineNumbers: {
-			type: 'boolean',
-		},
-		title: {
-			type: 'string',
-			source: 'attribute',
-			selector: 'pre',
-			attribute: 'title',
-		},
-	};
-
 	return {
 		...settings,
-
-		attributes: blockAttributes,
-
-		deprecated: [{
-			// old attributes
-			attributes: {
-				...blockAttributes,
-				language: {
-					type: 'string',
-					selector: 'code',
-					source: 'attribute',
-					attribute: 'lang',
-				},
-			},
-			migrate: ( attributes ) => { return attributes; },
-			// old save function
-			save: ( { attributes } ) => {
-				let cls = '';
-				cls = ( attributes.language ) ? 'language-' + attributes.language : '';
-				cls = ( attributes.lineNumbers ) ? cls + ' line-numbers' : cls;
-				return (
-					<pre title={ attributes.title }>
-						<code lang={ attributes.language } className={ cls }>
-							{ attributes.content }
-						</code>
-					</pre>
-				);
-			},
-		}],
-
+		attributes: { ...blockAttributes },
+		deprecated: [ deprecated ],
 		edit,
 		save,
 	};
-
 };
 
 // Register Filter

src/save.js

@@ -5,7 +5,7 @@ import { RichText, useBlockProps } from '@wordpress/block-editor';
 
 const save = ( { attributes } ) => {
 	let cls = '';
-	cls = attributes.language ? 'language-' + attributes.language : '';
+	cls = attributes.datalang ? 'language-' + attributes.datalang : '';
 	cls = attributes.lineNumbers ? cls + ' line-numbers' : cls;
 
 	// WP 5.6 / GB 9.2
@@ -17,7 +17,7 @@ const save = ( { attributes } ) => {
 					<RichText.Content
 						tagName="code"
 						value={ attributes.content }
-						lang={ attributes.language }
+						data-lang={ attributes.datalang }
 						className={ cls }
 					/>
 				</pre>
@@ -28,7 +28,7 @@ const save = ( { attributes } ) => {
 	// Backward compatibility < WP 5.6
 	return (
 		<pre className="wp-block-code" title={ attributes.title }>
-			<code data-lang={ attributes.language } className={ cls }>
+			<code data-lang={ attributes.datalang } className={ cls }>
 				{ attributes.content }
 			</code>
 		</pre>