Accessibility fix, switch attribute from "lang" to "data-lang"

index.php

@@ -215,9 +215,11 @@ function mkaz_prism_theme_css_ver() {
 add_filter( 'wp_kses_allowed_html', function( $tags ) {
 
 	if ( is_array( $tags['code'] ) ) {
+		$tags['code']['data-lang'] = array();
 		$tags['code']['lang'] = array();
 	} else {
 		$tags['code'] = array(
+			'data-lang' => array(),
 			'lang' => array(),
 		);
 	}

package.json

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

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

@@ -19,16 +19,19 @@ const addSyntaxToCodeBlock = ( settings ) => {
 		return settings;
 	}
 
-	const newCodeBlockSettings = {
+	return {
 		...settings,
-
 		attributes: {
-			...settings.attributes,
-			language: {
+			content: {
+				type: 'string',
+				source: 'html',
+				selector: 'code',
+			},
+			datalang: {
 				type: 'string',
 				selector: 'code',
 				source: 'attribute',
-				attribute: 'lang',
+				attribute: 'data-lang',
 			},
 			lineNumbers: {
 				type: 'boolean',
@@ -40,11 +43,48 @@ const addSyntaxToCodeBlock = ( settings ) => {
 				attribute: 'title',
 			},
 		},
+		deprecated: [
+			{
+				// old attributes
+				attributes: {
+					...settings.attributes,
+					language: {
+						type: 'string',
+						selector: 'code',
+						source: 'attribute',
+						attribute: 'lang',
+					},
+				},
+				migrate: ( attributes ) => {
+					return {
+						...attributes,
+						datalang: attributes.language,
+					};
+				},
+				// old save function
+				save: ( { attributes } ) => {
+					let cls = '';
+					cls = attributes.language
+						? 'language-' + attributes.language
+						: '';
+					cls = attributes.lineNumbers ? cls + ' line-numbers' : cls;
+
+					return (
+						<pre>
+							<code
+								lang={ attributes.language }
+								className={ cls }
+							>
+								{ attributes.content }
+							</code>
+						</pre>
+					);
+				},
+			},
+		],
 		edit,
 		save,
 	};
-
-	return newCodeBlockSettings;
 };
 
 // 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 lang={ attributes.language } className={ cls }>
+			<code data-lang={ attributes.datalang } className={ cls }>
 				{ attributes.content }
 			</code>
 		</pre>