WordPress full width block

—

### 1. **Enable Wide and Full Alignment in the Theme**
In your `functions.php` (or in a `setup.php` if using a structured theme like Sage), add support for align-wide and align-full:

add_theme_support('align-wide');

This allows blocks to use the wide and full alignment options in the Block Editor.

—

### 2. **Set Full Width in Block Settings**
When editing a block in the WordPress Block Editor (Gutenberg):
1. Select the block you want to make full width.
2. Open the block settings panel.
3. Look for the alignment options and select **Full width**.

—

### 3. **Add CSS for Full Width**
Ensure your theme’s stylesheet properly supports full-width blocks. Add the following CSS to your theme:

.alignfull {
    width: 100vw; /* Makes the block span the entire viewport width */
    margin-left: calc(-50vw + 50%); /* Adjusts to account for the viewport */
    max-width: 100%;
}

.alignwide {
    width: 90%; /* Customize as needed */
    margin-left: auto;
    margin-right: auto;
}

—

### 4. **Ensure Theme Container Width Doesn't Restrict Alignment**
In some themes, the container might restrict full-width alignment. Check the parent container and ensure it doesn't limit the block width. If necessary, adjust the container CSS:

.wp-block {
    overflow-x: hidden;
}

—

### 5. **Customize for Specific Blocks**
For certain blocks, like `group` or `cover`, you might want additional styling. For example:

.wp-block-group.alignfull,
.wp-block-cover.alignfull {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
}

—

### 6. **Test in the Editor and Frontend**
Ensure your changes are reflected both in the Block Editor and on the frontend. You can use the WordPress Full Site Editor (if enabled) or a child theme’s stylesheet for further adjustments.

—

Let me know if you're encountering specific challenges, and I can guide you further!