chore(docs): Docs for wrapRootElement + Head (#37519)

Co-authored-by: pieh <misiek.piechowiak@gmail.com>

docs/docs/reference/built-in-components/gatsby-head.md

@@ -111,7 +111,7 @@ You'll need to be aware of these things when using Gatsby Head:
 - Valid tags inside the `Head` function are: `link`, `meta`, `style`, `title`, `base`, `script`, and `noscript`.
 - `html` and `body` tags defined in `Head` overwrite the attributes defined in [`onRenderBody`](/docs/reference/config-files/gatsby-ssr/#onRenderBody) (`setHtmlAttributes` and `setBodyAttributes`).
 - Data block `<script>` tags such as `<script type="application/ld+json">` can go in the `Head` function, but dynamic scripts are better loaded with the [Gatsby Script Component](/docs/reference/built-in-components/gatsby-script/) in your pages or components.
-- As of now, `Head` can't access [React Context](https://reactjs.org/docs/context.html) that you defined in the [`wrapRootElement` API](/docs/reference/config-files/gatsby-browser/#wrapRootElement).
+- As of `gatsby@5.6.0`, `Head` can access [React Context](https://reactjs.org/docs/context.html) that you defined in the [`wrapRootElement` API](/docs/reference/config-files/gatsby-browser/#wrapRootElement). It's important to note that `wrapRootElement` should only be used to set up context providers. UI components should be defined in [`wrapPageElement` API](/docs/reference/config-files/gatsby-browser/#wrapPageElement).
 
 ## Properties
 

packages/gatsby/cache-dir/api-ssr-docs.js

@@ -151,7 +151,7 @@ exports.onPreRenderHTML = true
  * Allow a plugin to wrap the page element.
  *
  * This is useful for setting wrapper components around pages that won't get
- * unmounted on page changes. For setting Provider components, use [wrapRootElement](#wrapRootElement).
+ * unmounted on page changes. For setting context providers, use [wrapRootElement](#wrapRootElement).
  *
  * _Note:_
  * There is an equivalent hook in Gatsby's [Browser API](/docs/browser-apis/#wrapPageElement).
@@ -177,7 +177,7 @@ exports.wrapPageElement = true
 /**
  * Allow a plugin to wrap the root element.
  *
- * This is useful to set up any Provider components that will wrap your application.
+ * This is useful to set up any context providers that will wrap your application.
  * For setting persistent UI elements around pages use [wrapPageElement](#wrapPageElement).
  *
  * _Note:_

packages/gatsby/src/utils/api-browser-docs.ts

@@ -118,7 +118,7 @@ export const registerServiceWorker = true
  * Can be used to wrap each page element.
  *
  * This is useful for setting wrapper components around pages that won't get
- * unmounted on page changes. For setting Provider components, use [wrapRootElement](#wrapRootElement).
+ * unmounted on page changes. For setting context providers, use [wrapRootElement](#wrapRootElement).
  *
  * _Note:_
  * There is an equivalent hook in Gatsby's [SSR API](/docs/ssr-apis/#wrapPageElement).
@@ -144,7 +144,7 @@ export const wrapPageElement = true
 /**
  * Can be used to the wrap the root element.
  *
- * This is useful to set up any Provider components that will wrap your application.
+ * This is useful to set up any context providers that will wrap your application.
  * For setting persistent UI elements around pages use [wrapPageElement](#wrapPageElement).
  *
  * _Note:_