wp simple blocks plugin
<p>Just saving this here for later testing:</p>
<p>This is just AI generated crap that does not work, ignore it... ;)</p>
<p> </p>
<p>Absolutely, let’s start fresh with a simple WordPress plugin that loads a single custom Gutenberg block. This version will be straightforward, and you can manually add more blocks to the index.php file as needed. We’ll keep it minimal and focused on getting one block working reliably, then you can scale it up by duplicating the pattern.</p>
<p>---</p>
<p>### Fresh Plugin: Single Block Version</p>
<p>#### Directory Structure<br />``<br />/wp-content/plugins/simple-gutenberg-block/<br /> index.php // Main plugin file<br /> /blocks/<br /> /simple-block/<br /> block.js // Block definition<br /> block.css // Optional styling<br />`</p>index.php
<p>#### <br />`php<br /><?php<br />/<br />Plugin Name: Simple Gutenberg Block<br />Description: A simple plugin to load a single custom Gutenberg block<br />Version: 1.0.0<br />Author: Grok<br />/</p>`
<p>// Prevent direct access<br />if (!defined('ABSPATH')) {<br /> exit;<br />}</p>
<p>// Enqueue block editor assets<br />function simplegutenbergblockscripts() {<br /> // Enqueue the block JavaScript<br /> wpenqueuescript(<br /> 'simple-block-script',<br /> pluginsurl('/blocks/simple-block/block.js', FILE),<br /> array('wp-blocks', 'wp-element', 'wp-editor'), // Dependencies<br /> filemtime(plugindirpath(FILE) . 'blocks/simple-block/block.js'), // Version for cache busting<br /> true // Load in footer<br /> );</p>
<p> // Enqueue the block CSS (optional)<br /> wpenqueuestyle(<br /> 'simple-block-style',<br /> pluginsurl('/blocks/simple-block/block.css', FILE),<br /> array('wp-edit-blocks'),<br /> filemtime(plugindirpath(FILE) . 'blocks/simple-block/block.css')<br /> );<br />}<br />addaction('enqueueblockeditorassets', 'simplegutenbergblockscripts');</p>
<p>// Register the block<br />function simplegutenbergblockregister() {<br /> registerblocktype('simple-gutenberg/simple-block', array(<br /> 'editorscript' => 'simple-block-script', // Links to the enqueued JS<br /> 'style' => 'simple-block-style', // Links to the enqueued CSS<br /> ));<br />}<br />addaction('init', 'simplegutenbergblockregister');<br /></p>blocks/simple-block/block.js
<p>#### <br />`javascript<br />const { registerBlockType } = wp.blocks;<br />const { RichText } = wp.blockEditor;</p>`
<p>registerBlockType('simple-gutenberg/simple-block', {<br /> title: 'Simple Block',<br /> icon: 'smiley',<br /> category: 'common',<br /> attributes: {<br /> content: {<br /> type: 'string',<br /> source: 'html',<br /> selector: 'p',<br /> },<br /> },<br /> edit: (props) => {<br /> const { attributes: { content }, setAttributes } = props;<br /> return (<br /> <RichText<br /> tagName="p"<br /> value={content}<br /> onChange={(newContent) => setAttributes({ content: newContent })}<br /> placeholder="Enter your message here..."<br /> /><br /> );<br /> },<br /> save: (props) => {<br /> const { attributes: { content } } = props;<br /> return (<br /> <RichText.Content<br /> tagName="p"<br /> value={content}<br /> /><br /> );<br /> },<br />});<br /></p>blocks/simple-block/block.css
<p>#### (Optional)<br />`css<br />.wp-block-simple-gutenberg-simple-block {<br /> padding: 20px;<br /> background-color: #f5f5f5;<br /> border: 1px solid #ddd;<br /> border-radius: 4px;<br />}<br />`</p>/wp-content/plugins/
<p>---</p>
<p>### Installation Steps<br />1. Create the Folder:<br /> - In your WordPress installation, go to .<br /> - Create a new folder named simple-gutenberg-block.</p>index.php
<p>2. Add the Files:<br /> - Save the first code block as in /wp-content/plugins/simple-gutenberg-block/.<br /> - Create a blocks subfolder: /wp-content/plugins/simple-gutenberg-block/blocks/.<br /> - Create a simple-block subfolder: /wp-content/plugins/simple-gutenberg-block/blocks/simple-block/.<br /> - Save the second code block as block.js in blocks/simple-block/.<br /> - Save the third code block as block.css in blocks/simple-block/ (optional).</p>index.php
<p>3. Activate the Plugin:<br /> - Go to Plugins > Installed Plugins in your WordPress admin panel.<br /> - Find "Simple Gutenberg Block" and click "Activate".</p>
<p>4. Test in the Editor:<br /> - Go to Pages > Add New or edit an existing page.<br /> - Click the "+" button to open the block inserter.<br /> - Search for "Simple Block" or look under the "Common Blocks" category.<br /> - Add the block and type a message to test it.</p>
<p>---</p>
<p>### Adding More Blocks Manually<br />If this works and you want to add another block later, you can duplicate the pattern in . For example, to add a fancy-block:</p>/blocks/fancy-block/block.js
<p>1. Create the New Block Files:<br /> - Add (copy simple-block/block.js and adjust the name to simple-gutenberg/fancy-block and title).<br /> - Add /blocks/fancy-block/block.css (optional).</p>index.php
<p>2. Update :<br /> `php<br /> <?php<br /> /<br /> Plugin Name: Simple Gutenberg Block<br /> Description: A simple plugin to load custom Gutenberg blocks<br /> Version: 1.0.0<br /> Author: Grok<br /> /<br /> if (!defined('ABSPATH')) {<br /> exit;<br /> }</p>`
<p> function simplegutenbergblockscripts() {<br /> // First block: simple-block<br /> wpenqueuescript(<br /> 'simple-block-script',<br /> pluginsurl('/blocks/simple-block/block.js', FILE),<br /> array('wp-blocks', 'wp-element', 'wp-editor'),<br /> filemtime(plugindirpath(FILE) . 'blocks/simple-block/block.js'),<br /> true<br /> );<br /> wpenqueuestyle(<br /> 'simple-block-style',<br /> pluginsurl('/blocks/simple-block/block.css', FILE),<br /> array('wp-edit-blocks'),<br /> filemtime(plugindirpath(FILE) . 'blocks/simple-block/block.css')<br /> );</p>
<p> // Second block: fancy-block<br /> wpenqueuescript(<br /> 'fancy-block-script',<br /> pluginsurl('/blocks/fancy-block/block.js', FILE),<br /> array('wp-blocks', 'wp-element', 'wp-editor'),<br /> filemtime(plugindirpath(FILE) . 'blocks/fancy-block/block.js'),<br /> true<br /> );<br /> wpenqueuestyle(<br /> 'fancy-block-style',<br /> pluginsurl('/blocks/fancy-block/block.css', FILE),<br /> array('wp-edit-blocks'),<br /> filemtime(plugindirpath(FILE) . 'blocks/fancy-block/block.css')<br /> );<br /> }<br /> addaction('enqueueblockeditorassets', 'simplegutenbergblockscripts');</p>
<p> function simplegutenbergblockregister() {<br /> // Register simple-block<br /> registerblocktype('simple-gutenberg/simple-block', array(<br /> 'editorscript' => 'simple-block-script',<br /> 'style' => 'simple-block-style',<br /> ));</p>
<p> // Register fancy-block<br /> registerblocktype('simple-gutenberg/fancy-block', array(<br /> 'editorscript' => 'fancy-block-script',<br /> 'style' => 'fancy-block-style',<br /> ));<br /> }<br /> addaction('init', 'simplegutenbergblockregister');<br /> </p>wpenqueuescript
<p>3. Repeat as Needed:<br /> - Add more blocks by duplicating the , wpenqueuestyle, and registerblocktype calls with unique handles and paths.</p>errorlog('Script URL: ' . pluginsurl('/blocks/simple-block/block.js', FILE));
<p>---</p>
<p>### Troubleshooting Tips<br />If the block doesn’t appear:<br />- Check Activation: Ensure "Simple Gutenberg Block" is active in the Plugins list.<br />- Verify Paths: Double-check the folder structure matches exactly as above.<br />- Debug Loading:<br /> - Add in simplegutenbergblockscripts() and check wp-content/debug.log after enabling WPDEBUG and WPDEBUG_LOG.<br />- Console Errors: Open the editor, press F12 > Console, and look for errors.<br />- Clear Cache: Hard refresh (Ctrl+F5) the editor page.</p>simple-gutenberg
<p>---</p>
<p>### Why This Should Work<br />- It’s a minimal setup with no dynamic loading—just one block hardcoded.<br />- The namespace () is consistent across PHP and JS.<br />- File paths are explicitly defined relative to index.php`.</p>
<p>Let me know if this works or if you hit any snags! We’ll get that first block showing up, then you can add more at your pace.</p>
View Statistics
Add Comment
Other Items in wordpress
Related Search Terms
Other Categories in Code
