Docs: Minor design updates using callout (#31398)

* Add callout to i18n Note * Add callout alert for experimental feature * Add info callout for reserved slugs * Add callout info and cleanup for ESNext syntax
WordPress · May 4, 2021 · c0a9161 · c0a9161
1 parent 90f67f9
commit c0a9161
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/docs/getting-started/tutorials/create-block/block-anatomy.md b/docs/getting-started/tutorials/create-block/block-anatomy.md
@@ -1,8 +1,10 @@
 # Anatomy of a Block
 
-At its simplest, a block in the WordPress block editor is a json object with a specific set of properties.
+At its simplest, a block in the WordPress block editor is a JSON object with a specific set of properties.
 
-**Note:** Block development uses ESNext syntax, this refers to the latest JavaScript standard. If this is unfamiliar, review the [ESNext syntax documentation](/docs/how-to-guides/javascript/esnext-js.md) to familiarize yourself with the newer syntax used in modern JavaScript development.
+<div class="callout callout-info">
+<strong>Note:</strong> Block development uses ESNext syntax, this refers to the latest JavaScript standard. If this is unfamiliar, review the <a href="/docs/how-to-guides/javascript/esnext-js.md">ESNext syntax documentation</a> to familiarize yourself with the newer syntax.
+</div>
 
 The javascript part is done in the `src/index.js` file.
 

diff --git a/docs/how-to-guides/internationalization.md b/docs/how-to-guides/internationalization.md
@@ -99,7 +99,9 @@ Common functions available, these mirror their PHP counterparts are:
 -   `_n( '%s Comment', '%s Comments', numberOfComments, 'my-text-domain' )` - Translate and retrieve the singular or plural form based on the supplied number.
 -   `_x( 'Default', 'block style', 'my-text-domain' )` - Translate a certain string with some additional context.
 
-**Note:** Every string displayed to the user should be wrapped in an i18n function.
+<div class="callout callout-alert">
+<strong>Note:</strong> Every string displayed to the user should be wrapped in an i18n function.
+</div>
 
 After all strings in your code is wrapped, the final step is to tell WordPress your JavaScript contains translations, using the [wp_set_script_translations()](https://developer.wordpress.org/reference/functions/wp_set_script_translations/) function.
 

diff --git a/docs/how-to-guides/themes/theme-support.md b/docs/how-to-guides/themes/theme-support.md
@@ -240,7 +240,9 @@ As an example for the regular font size, a theme may provide the following class
 }
 ```
 
-**Note:** The slugs `default` and `custom` are reserved and cannot be used by themes.
+<div class="callout callout-info">
+<strong>Note:</strong> The slugs `default` and `custom` are reserved and cannot be used by themes.
+</div>
 
 ### Disabling custom font sizes
 

diff --git a/docs/reference-guides/block-api/block-annotations.md b/docs/reference-guides/block-api/block-annotations.md
@@ -1,6 +1,8 @@
 # Annotations
 
-**Note: This API is experimental, that means it is subject to non-backward compatible changes or removal in any future version.**
+<div class="callout callout-alert">
+<strong>Note:</strong> This API is experimental, that means it is subject to non-backward compatible changes or removal in any future version.
+</div>
 
 Annotations are a way to highlight a specific piece in a post created with the block editor. Examples of this include commenting on a piece of text and spellchecking. Both can use the annotations API to mark a piece of text.