diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 0715b1e3547e2a..724b7f3db85b7c 100644 --- a/docs/reference-guides/core-blocks.md +++ b/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 diff --git a/packages/block-library/src/code/block.json b/packages/block-library/src/code/block.json index 4465c8554fc125..e9a50662437b01 100644 --- a/packages/block-library/src/code/block.json +++ b/packages/block-library/src/code/block.json @@ -12,6 +12,10 @@ "source": "rich-text", "selector": "code", "__unstablePreserveWhiteSpace": true + }, + "showLineNumbers": { + "type": "boolean", + "default": true } }, "supports": { diff --git a/packages/block-library/src/code/edit.js b/packages/block-library/src/code/edit.js index c649a1fad6a5c2..6e0c5227084571 100644 --- a/packages/block-library/src/code/edit.js +++ b/packages/block-library/src/code/edit.js @@ -1,9 +1,15 @@ /** * WordPress dependencies */ -import { RichText, useBlockProps } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; +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, @@ -14,49 +20,73 @@ export default function CodeEdit( { } ) { const blockProps = useBlockProps(); const [ lineNumbers, setLineNumbers ] = useState( [] ); + const { content, showLineNumbers } = attributes; - // Function to calculate line numbers dynamically + // 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 content = - typeof attributes.content === 'string' - ? attributes.content - : attributes.content.toHTMLString( { + const contentString = + typeof content === 'string' + ? content + : content.toHTMLString( { preserveWhiteSpace: true, } ); - setLineNumbers( calculateLineNumbers( content ) ); - }, [ attributes.content ] ); + setLineNumbers( calculateLineNumbers( contentString ) ); + }, [ content ] ); return ( -
-
- { lineNumbers.map( ( num ) => ( -
{ num }
- ) ) } + <> + { /* Inspector Controls */ } + + + + setAttributes( { showLineNumbers: value } ) + } + /> + + + + { /* Block Content */ } +
+ { /* Line Numbers */ } + { showLineNumbers && ( +
+ { lineNumbers.map( ( num ) => ( +
{ num }
+ ) ) } +
+ ) } + + { /* Code Content */ } +
+					 setAttributes( { content } ) }
+						onRemove={ onRemove }
+						onMerge={ mergeBlocks }
+						placeholder={ __( 'Write code…' ) }
+						aria-label={ __( 'Code' ) }
+						preserveWhiteSpace
+						__unstablePastePlainText
+						__unstableOnSplitAtDoubleLineEnd={ () =>
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
+						}
+					/>
+				
-
-				 setAttributes( { content } ) }
-					onRemove={ onRemove }
-					onMerge={ mergeBlocks }
-					placeholder="Write code…"
-					aria-label="Code"
-					preserveWhiteSpace
-					__unstablePastePlainText
-					__unstableOnSplitAtDoubleLineEnd={ () =>
-						insertBlocksAfter(
-							createBlock( getDefaultBlockName() )
-						)
-					}
-				/>
-			
-
+ ); } diff --git a/packages/block-library/src/code/save.js b/packages/block-library/src/code/save.js index 699e28ca22c016..49bd834b004ea2 100644 --- a/packages/block-library/src/code/save.js +++ b/packages/block-library/src/code/save.js @@ -9,37 +9,41 @@ import { RichText, useBlockProps } from '@wordpress/block-editor'; import { escape } from './utils'; export default function save( { attributes } ) { - // Calculate the number of lines dynamically + const { content, showLineNumbers } = attributes; + + // eslint-disable-next-line no-shadow const calculateLineNumbers = ( content ) => { return content.split( '\n' ).map( ( _, index ) => index + 1 ); }; - const content = - typeof attributes.content === 'string' - ? attributes.content - : attributes.content.toHTMLString( { + const contentString = + typeof content === 'string' + ? content + : content.toHTMLString( { preserveWhiteSpace: true, } ); - const lineNumbers = calculateLineNumbers( content ); + const lineNumbers = calculateLineNumbers( contentString ); return (
-
- { lineNumbers.map( ( num ) => ( -
{ num }
- ) ) } -
+ { /* Conditionally render line numbers */ } + { showLineNumbers && ( +
+ { lineNumbers.map( ( num ) => ( +
{ num }
+ ) ) } +
+ ) } + + { /* Render code content */ }