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 ( -
+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() ) - ) - } - /> -