Adding line numbers to the code

docs/reference-guides/core-blocks.md

@@ -88,7 +88,7 @@ Display code snippets that respect your spacing and tabs. ([Source](https://gith
 -	**Name:** core/code
 -	**Category:** text
 -	**Supports:** align (wide), anchor, color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
--	**Attributes:** content
+-	**Attributes:** content, showLineNumbers
 
 ## Column
 

packages/block-library/src/code/block.json

@@ -12,6 +12,10 @@
 			"source": "rich-text",
 			"selector": "code",
 			"__unstablePreserveWhiteSpace": true
+		},
+		"showLineNumbers": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"supports": {

packages/block-library/src/code/edit.js

@@ -2,8 +2,14 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	InspectorControls,
+} from '@wordpress/block-editor';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import { useState, useEffect } from '@wordpress/element';
+import { PanelBody, ToggleControl } from '@wordpress/components';
 
 export default function CodeEdit( {
 	attributes,
@@ -13,23 +19,74 @@ export default function CodeEdit( {
 	mergeBlocks,
 } ) {
 	const blockProps = useBlockProps();
+	const [ lineNumbers, setLineNumbers ] = useState( [] );
+	const { content, showLineNumbers } = attributes;
+
+	// eslint-disable-next-line no-shadow
+	const calculateLineNumbers = ( content ) => {
+		return content.split( '\n' ).map( ( _, index ) => index + 1 );
+	};
+
+	// Update line numbers whenever the content changes
+	useEffect( () => {
+		const contentString =
+			typeof content === 'string'
+				? content
+				: content.toHTMLString( {
+						preserveWhiteSpace: true,
+				  } );
+		setLineNumbers( calculateLineNumbers( contentString ) );
+	}, [ content ] );
+
 	return (
-		<pre { ...blockProps }>
-			<RichText
-				tagName="code"
-				identifier="content"
-				value={ attributes.content }
-				onChange={ ( content ) => setAttributes( { content } ) }
-				onRemove={ onRemove }
-				onMerge={ mergeBlocks }
-				placeholder={ __( 'Write code…' ) }
-				aria-label={ __( 'Code' ) }
-				preserveWhiteSpace
-				__unstablePastePlainText
-				__unstableOnSplitAtDoubleLineEnd={ () =>
-					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
-				}
-			/>
-		</pre>
+		<>
+			{ /* Inspector Controls */ }
+			<InspectorControls>
+				<PanelBody title={ __( 'Code Block Settings' ) }>
+					<ToggleControl
+						label={ __( 'Show Line Numbers' ) }
+						__nextHasNoMarginBottom
+						checked={ showLineNumbers }
+						onChange={ ( value ) =>
+							setAttributes( { showLineNumbers: value } )
+						}
+					/>
+				</PanelBody>
+			</InspectorControls>
+
+			{ /* Block Content */ }
+			<div { ...blockProps } className="wp-block-code-with-line-numbers">
+				{ /* Line Numbers */ }
+				{ showLineNumbers && (
+					<div className="line-numbers">
+						{ lineNumbers.map( ( num ) => (
+							<div key={ num }>{ num }</div>
+						) ) }
+					</div>
+				) }
+
+				{ /* Code Content */ }
+				<pre className="code-content">
+					<RichText
+						tagName="code"
+						identifier="content"
+						value={ content }
+						// eslint-disable-next-line no-shadow
+						onChange={ ( content ) => setAttributes( { content } ) }
+						onRemove={ onRemove }
+						onMerge={ mergeBlocks }
+						placeholder={ __( 'Write code…' ) }
+						aria-label={ __( 'Code' ) }
+						preserveWhiteSpace
+						__unstablePastePlainText
+						__unstableOnSplitAtDoubleLineEnd={ () =>
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
+						}
+					/>
+				</pre>
+			</div>
+		</>
 	);
 }

packages/block-library/src/code/save.js

@@ -9,21 +9,43 @@ import { RichText, useBlockProps } from '@wordpress/block-editor';
 import { escape } from './utils';
 
 export default function save( { attributes } ) {
+	const { content, showLineNumbers } = attributes;
+
+	// eslint-disable-next-line no-shadow
+	const calculateLineNumbers = ( content ) => {
+		return content.split( '\n' ).map( ( _, index ) => index + 1 );
+	};
+
+	const contentString =
+		typeof content === 'string'
+			? content
+			: content.toHTMLString( {
+					preserveWhiteSpace: true,
+			  } );
+
+	const lineNumbers = calculateLineNumbers( contentString );
+
 	return (
-		<pre { ...useBlockProps.save() }>
-			<RichText.Content
-				tagName="code"
-				// To do: `escape` encodes characters in shortcodes and URLs to
-				// prevent embedding in PHP. Ideally checks for the code block,
-				// or pre/code tags, should be made on the PHP side?
-				value={ escape(
-					typeof attributes.content === 'string'
-						? attributes.content
-						: attributes.content.toHTMLString( {
-								preserveWhiteSpace: true,
-						  } )
-				) }
-			/>
-		</pre>
+		<div
+			{ ...useBlockProps.save() }
+			className="wp-block-code-with-line-numbers"
+		>
+			{ /* Conditionally render line numbers */ }
+			{ showLineNumbers && (
+				<div className="line-numbers">
+					{ lineNumbers.map( ( num ) => (
+						<div key={ num }>{ num }</div>
+					) ) }
+				</div>
+			) }
+
+			{ /* Render code content */ }
+			<pre className="code-content">
+				<RichText.Content
+					tagName="code"
+					value={ escape( contentString ) }
+				/>
+			</pre>
+		</div>
 	);
 }

packages/block-library/src/code/style.scss

@@ -16,3 +16,21 @@
 		/*!rtl:end:ignore*/
 	}
 }
+.wp-block-code-with-line-numbers {
+	display: flex;
+}
+
+.line-numbers {
+	padding-right: 8px;
+	text-align: right;
+	border-right: 1px solid #ddd;
+	color: #6a737d;
+	user-select: none;
+	margin: 1em 0;
+}
+
+.code-content {
+	flex-grow: 1;
+	padding-left: 8px;
+	overflow: auto;
+}