Docs: Update Callout documentation on links (#50131)

* Fixes #50125
* HTML encoding needed
* add call out to the link section, too.
* use absolute URLs instead

Props to @gziolo

docs/contributors/documentation/README.md

@@ -103,6 +103,10 @@ Use the full directory and filename from the Gutenberg repository, not the publi
 
 An example, the link to this page is: `/docs/contributors/documentation/README.md`
 
+<div class="callout callout-warning">
+<b>Note:</b> The usual link transformation is not applied to links in callouts. See below. 
+</div>
+
 ### Code examples
 
 The code example in markdown should be wrapped in three tick marks \`\`\` and should additionally include a language specifier. See this [GitHub documentation around fenced code blocks](https://help.github.com/en/github/writing-on-github/creating-and-highlighting-code-blocks).
@@ -132,7 +136,7 @@ The preferred format for code examples is JSX, this should be the default view.
 
 The Block Editor handbook supports the same [notice styles as other WordPress handbooks](https://make.wordpress.org/docs/handbook/documentation-team-handbook/handbooks-style-and-formatting-guide/#formatting). However, the shortcode implementation is not ideal with the different locations the block editor handbook documentation is published (npm, GitHub).
 
-The recommended way to implement in markdown is to use the raw HTML and `callout callout-LEVEL` classes. For example:
+The recommended way to implement in markdown is to use the raw HTML and`callout callout-LEVEL` classes. For example:
 
 ```html
 <div class="callout callout-info">This is an **info** callout.</div>
@@ -156,6 +160,14 @@ This is an **alert** callout.
 This is a **warning** callout.
 </div>
 
+<div class="callout callout-warning">
+Note: In callout notices, links also need to be HTML `&lt;a href>&lt;/a>` notations. 
+The usual link transformation is not applied to links in callouts.
+For instance, to reach the Getting started > Create Block page the URL in GitHub is
+https://developer.wordpress.org/docs/getting-started/create-block/README.md
+and will have to be hardcoded for the endpoint in the Block Editor Handbook as 
+<a href="https://developer.wordpress.org/block-editor/getting-started/create-block/">https://developer.wordpress.org/block-editor/getting-started/create-block/</a> to link correctly in the handbook. 
+</div>
 ### Editor config
 
 You should configure your editor to use Prettier to auto-format markdown documents. See the [Getting Started documentation](/docs/contributors/code/getting-started-with-code-contribution.md) for complete details.

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

@@ -3,8 +3,9 @@
 Block registration API reference.
 
 <div class="callout callout-alert">
-You can use the functions documented on this page to register a block with JavaScript only on the client, but the recommended method is to register new block types also with PHP on the server using the `block.json` metadata file. See <a href="/docs/reference-guides/block-api/block-metadata.md">metadata documentation for complete information</a>
-<a href="/docs/getting-started/create-block/README.md">Learn how to create your first block</a> for the WordPress block editor. From setting up your development environment, tools, and getting comfortable with the new development model, this tutorial covers all you need to know to get started with creating blocks.
+You can use the functions documented on this page to register a block with JavaScript only on the client, but the recommended method is to register new block types also with PHP on the server using the `block.json` metadata file. See <a href="https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/">metadata documentation for complete information</a>
+<br/>
+<a href="https://developer.wordpress.org/block-editor/getting-started/create-block/">Learn how to create your first block</a> for the WordPress block editor. From setting up your development environment, tools, and getting comfortable with the new development model, this tutorial covers all you need to know to get started with creating blocks.
 </div>
 
 ## `registerBlockType`