How can I create a custom Gutenberg block for my theme?

<!-- BEGIN COPY / PASTE -->
    // Step 1: Set up your environment
    // Run these commands in your theme's directory
    npm init -y
    npm install @wordpress/scripts --save-dev

    // Step 2: Create a block
    // Create a new file in your theme, e.g., my-block.js
    import { registerBlockType } from '@wordpress/blocks';
    import { RichText } from '@wordpress/block-editor';

    registerBlockType('mytheme/my-block', {
      title: 'My Custom Block',
      icon: 'smiley',
      category: 'common',
      attributes: {
        content: {
          type: 'string',
          source: 'html',
          selector: 'p',
        },
      },
      edit: ({ attributes, setAttributes }) => {
        const onChangeContent = (content) => {
          setAttributes({ content });
        };

        return (
          <RichText
            tagName="p"
            onChange={onChangeContent}
            value={attributes.content}
          />
        );
      },
      save: ({ attributes }) => {
        return <RichText.Content tagName="p" value={attributes.content} />;
      },
    });

    // Step 3: Build the block
    // Add a script in package.json to build your block
    // "scripts": {
    //   "build": "wp-scripts build my-block.js"
    // }
    // Run npm run build to compile your block
    <!-- END COPY / PASTE -->