Docs: Added copy and code for style_data (#69920)

Co-authored-by: bph <[email protected]>
Co-authored-by: Mamaduka <[email protected]>

Author: bph

docs/reference-guides/block-api/block-styles.md

@@ -64,12 +64,13 @@ The properties of the style array must include `name` and `label`:
 -   `name`: The identifier of the style used to compute a CSS class.
 -   `label`: A human-readable label for the style.
 
-Besides the two mandatory properties, the styles properties array should also include an `inline_style` or a `style_handle` property:
+Besides the two mandatory properties, the styles properties array should also include an `inline_style` or a `style_handle` or a `style_data`property:
 
 -   `inline_style`: Contains inline CSS code that registers the CSS class required for the style.
 -   `style_handle`: Contains the handle to an already registered style that should be enqueued in places where block styles are needed.
+-   `style_data`: Contains a theme.json-like notation in an array of style properties.
 
-It is also possible to set the `is_default` property to `true` to mark one of the block styles as the default one.
+It is also possible to set the `is_default` property to `true` to mark one of the block styles as the default one, should one be mising.
 
 The following code sample registers a style for the quote block named "Blue Quote", and provides an inline style that makes quote blocks with the "Blue Quote" style have blue color:
 
@@ -102,6 +103,29 @@ register_block_style(
     )
 );
 ```
+Another way is using the `style_data`property, as in below code example. It adds a block style to the image block with an orange border and slightly rounded corners.
+
+```php
+register_block_style(
+       array( 'core/image' ),
+       array(
+           'name'         => 'orange-border',
+           'label'        => __( 'Orange Border', 'pauli' ),
+           'style_data'=> array(
+                           'border' => array(
+                           'color' => '#f5bc42',
+                           'style' => 'solid',
+                           'width' => '4px',
+                           'radius' => '15px'
+            )
+        )
+    )
+);
+```
+Using the `style_data` property empowers the user to change it with the Global Styles UI via the **Editor > Styles**. The `style_data`property was added in WordPress 6.6.
+
+More information via WordPress 6.6 Dev Note: [Section Styles](https://make.wordpress.org/core/2024/06/24/section-styles/).
+Also on the WordPress Developer Blog: [Styling sections, nested elements, and more with Block Style Variations in WordPress 6.6](https://developer.wordpress.org/news/2024/06/styling-sections-nested-elements-and-more-with-block-style-variations-in-wordpress-6-6/)
 
 ### unregister_block_style