wp simple blocks plugin
Just saving this here for later testing:
This is just AI generated crap that does not work, ignore it... ;)
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.
---
### Fresh Plugin: Single Block Version
#### Directory Structure
```
/wp-content/plugins/simple-gutenberg-block/
    index.php          // Main plugin file
    /blocks/
        /simple-block/
            block.js   // Block definition
            block.css  // Optional styling
```
#### `index.php`
```php
<?php
/*
Plugin Name: Simple Gutenberg Block
Description: A simple plugin to load a single custom Gutenberg block
Version: 1.0.0
Author: Grok
*/
// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}
// Enqueue block editor assets
function simple_gutenberg_block_scripts() {
    // Enqueue the block JavaScript
    wp_enqueue_script(
        'simple-block-script',
        plugins_url('/blocks/simple-block/block.js', __FILE__),
        array('wp-blocks', 'wp-element', 'wp-editor'), // Dependencies
        filemtime(plugin_dir_path(__FILE__) . 'blocks/simple-block/block.js'), // Version for cache busting
        true // Load in footer
    );
    // Enqueue the block CSS (optional)
    wp_enqueue_style(
        'simple-block-style',
        plugins_url('/blocks/simple-block/block.css', __FILE__),
        array('wp-edit-blocks'),
        filemtime(plugin_dir_path(__FILE__) . 'blocks/simple-block/block.css')
    );
}
add_action('enqueue_block_editor_assets', 'simple_gutenberg_block_scripts');
// Register the block
function simple_gutenberg_block_register() {
    register_block_type('simple-gutenberg/simple-block', array(
        'editor_script' => 'simple-block-script', // Links to the enqueued JS
        'style' => 'simple-block-style',         // Links to the enqueued CSS
    ));
}
add_action('init', 'simple_gutenberg_block_register');
```
#### `blocks/simple-block/block.js`
```javascript
const { registerBlockType } = wp.blocks;
const { RichText } = wp.blockEditor;
registerBlockType('simple-gutenberg/simple-block', {
    title: 'Simple Block',
    icon: 'smiley',
    category: 'common',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },
    edit: (props) => {
        const { attributes: { content }, setAttributes } = props;
        return (
            <RichText
                tagName="p"
                value={content}
                onChange={(newContent) => setAttributes({ content: newContent })}
                placeholder="Enter your message here..."
            />
        );
    },
    save: (props) => {
        const { attributes: { content } } = props;
        return (
            <RichText.Content
                tagName="p"
                value={content}
            />
        );
    },
});
```
#### `blocks/simple-block/block.css` (Optional)
```css
.wp-block-simple-gutenberg-simple-block {
    padding: 20px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
}
```
---
### Installation Steps
1. **Create the Folder:**
   - In your WordPress installation, go to `/wp-content/plugins/`.
   - Create a new folder named `simple-gutenberg-block`.
2. **Add the Files:**
   - Save the first code block as `index.php` in `/wp-content/plugins/simple-gutenberg-block/`.
   - Create a `blocks` subfolder: `/wp-content/plugins/simple-gutenberg-block/blocks/`.
   - Create a `simple-block` subfolder: `/wp-content/plugins/simple-gutenberg-block/blocks/simple-block/`.
   - Save the second code block as `block.js` in `blocks/simple-block/`.
   - Save the third code block as `block.css` in `blocks/simple-block/` (optional).
3. **Activate the Plugin:**
   - Go to **Plugins > Installed Plugins** in your WordPress admin panel.
   - Find "Simple Gutenberg Block" and click "Activate".
4. **Test in the Editor:**
   - Go to **Pages > Add New** or edit an existing page.
   - Click the "+" button to open the block inserter.
   - Search for "Simple Block" or look under the "Common Blocks" category.
   - Add the block and type a message to test it.
---
### Adding More Blocks Manually
If this works and you want to add another block later, you can duplicate the pattern in `index.php`. For example, to add a `fancy-block`:
1. **Create the New Block Files:**
   - Add `/blocks/fancy-block/block.js` (copy `simple-block/block.js` and adjust the name to `simple-gutenberg/fancy-block` and `title`).
   - Add `/blocks/fancy-block/block.css` (optional).
2. **Update `index.php`:**
   ```php
   <?php
   /*
   Plugin Name: Simple Gutenberg Block
   Description: A simple plugin to load custom Gutenberg blocks
   Version: 1.0.0
   Author: Grok
   */
   if (!defined('ABSPATH')) {
       exit;
   }
   function simple_gutenberg_block_scripts() {
       // First block: simple-block
       wp_enqueue_script(
           'simple-block-script',
           plugins_url('/blocks/simple-block/block.js', __FILE__),
           array('wp-blocks', 'wp-element', 'wp-editor'),
           filemtime(plugin_dir_path(__FILE__) . 'blocks/simple-block/block.js'),
           true
       );
       wp_enqueue_style(
           'simple-block-style',
           plugins_url('/blocks/simple-block/block.css', __FILE__),
           array('wp-edit-blocks'),
           filemtime(plugin_dir_path(__FILE__) . 'blocks/simple-block/block.css')
       );
       // Second block: fancy-block
       wp_enqueue_script(
           'fancy-block-script',
           plugins_url('/blocks/fancy-block/block.js', __FILE__),
           array('wp-blocks', 'wp-element', 'wp-editor'),
           filemtime(plugin_dir_path(__FILE__) . 'blocks/fancy-block/block.js'),
           true
       );
       wp_enqueue_style(
           'fancy-block-style',
           plugins_url('/blocks/fancy-block/block.css', __FILE__),
           array('wp-edit-blocks'),
           filemtime(plugin_dir_path(__FILE__) . 'blocks/fancy-block/block.css')
       );
   }
   add_action('enqueue_block_editor_assets', 'simple_gutenberg_block_scripts');
   function simple_gutenberg_block_register() {
       // Register simple-block
       register_block_type('simple-gutenberg/simple-block', array(
           'editor_script' => 'simple-block-script',
           'style' => 'simple-block-style',
       ));
       // Register fancy-block
       register_block_type('simple-gutenberg/fancy-block', array(
           'editor_script' => 'fancy-block-script',
           'style' => 'fancy-block-style',
       ));
   }
   add_action('init', 'simple_gutenberg_block_register');
   ```
3. **Repeat as Needed:**
   - Add more blocks by duplicating the `wp_enqueue_script`, `wp_enqueue_style`, and `register_block_type` calls with unique handles and paths.
---
### Troubleshooting Tips
If the block doesn’t appear:
- **Check Activation:** Ensure "Simple Gutenberg Block" is active in the Plugins list.
- **Verify Paths:** Double-check the folder structure matches exactly as above.
- **Debug Loading:**
  - Add `error_log('Script URL: ' . plugins_url('/blocks/simple-block/block.js', __FILE__));` in `simple_gutenberg_block_scripts()` and check `wp-content/debug.log` after enabling `WP_DEBUG` and `WP_DEBUG_LOG`.
- **Console Errors:** Open the editor, press F12 > Console, and look for errors.
- **Clear Cache:** Hard refresh (Ctrl+F5) the editor page.
---
### Why This Should Work
- It’s a minimal setup with no dynamic loading—just one block hardcoded.
- The namespace (`simple-gutenberg`) is consistent across PHP and JS.
- File paths are explicitly defined relative to `index.php`.
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.
 
    
   
	
