wordpress block editor status on shadow for the group block

the issue

currently (25/09/2024) the group block does not have a native UI to control shadows (box-shadow) to it.

the reason is that the group block markup needs to be changed in order to get the shadows right both in the editor as well in the frontend, unclear why, but more testing is needed

the workaround is to add custom block styles to the group block with the specifc shadow, it is recommended (by me) to use the shadow presets in theme.json to make a consistent shadow styles accross the site, and use the presets in the custom block styles

resources

custom block styles

register block styles in PHP

function register_group_block_shadow_styles() {
    // Light shadow
    register_block_style(
        'core/group',
        array(
            'name'  => 'light-shadow',
            'label' => __('Light Shadow')
        )
    );

    // Medium shadow
    register_block_style(
        'core/group',
        array(
            'name'  => 'medium-shadow',
            'label' => __('Medium Shadow')
        )
    );

    // Heavy shadow
    register_block_style(
        'core/group',
        array(
            'name'  => 'heavy-shadow',
            'label' => __('Heavy Shadow')
        )
    );
}
add_action('init', 'register_group_block_shadow_styles');

add the CSS

/* Light shadow */
.wp-block-group.is-style-light-shadow {
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

/* Medium shadow */
.wp-block-group.is-style-medium-shadow {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/* Heavy shadow */
.wp-block-group.is-style-heavy-shadow {
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

add the presets to theme.json

{
  "version": 2,
  "settings": {
    "shadow": {
      "presets": [
        {
          "name": "Light Shadow",
          "slug": "light-shadow",
          "shadow": "0px 2px 5px rgba(0, 0, 0, 0.1)"
        },
        {
          "name": "Medium Shadow",
          "slug": "medium-shadow",
          "shadow": "0px 4px 10px rgba(0, 0, 0, 0.2)"
        },
        {
          "name": "Heavy Shadow",
          "slug": "heavy-shadow",
          "shadow": "0px 8px 15px rgba(0, 0, 0, 0.3)"
        }
      ]
    }
  }
}