Merge branch 'integratel-coredev.buildout-2' into coredev.buildout-continuous-integration-fixes

Author: stevepiercy

docs/classic-ui/images.md

@@ -285,18 +285,34 @@ To access image scales, which are normally not accessible to the current user, o
 
 ## Responsive image support
 
-Plone supports the generation of picture tags with `srcset`s for image optimization.
+Plone supports the generation of [`picture`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) tags with `srcset`s for image optimization.
 Additionally, you can define [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) for [art direction](classic-ui-images-responsive-image-support-art-direction) and further optimization.
 
-The configuration allows you to define different picture variants, such as `Large`, `Medium`, or `Small`.
+The configuration allows you to define different `picture` variants, such as `Large`, `Medium`, or `Small`.
 Users can choose from them in editors, such as TinyMCE, and developers can use them in templates.
 
+To generate a `picture` tag, use the following code.
+
+```python
+from plone import api
+
+scale_util = api.content.get_view("images", context, request)
+tag = scale_util.picture("image", scale="larger", picture_variant="large")
+```
+
+The same can be done from a template.
+
+```xml
+<div tal:define="scale_view context/@@images">
+  <img tal:replace="structure python:scale_view.picture('image', scale='larger', picture_variant='large'" />
+</div>
+```
 
 (classic-ui-images-responsive-image-support-picture-variants)=
 
-### Picture variants
+### `picture` variants
 
-In `/@@imaging-controlpanel` Plone allows you to define picture variants with a list of available image scales.
+In `/@@imaging-controlpanel` Plone allows you to define `picture` variants with a list of available image scales.
 These are used for HTML {term}`srcset` attributes.
 A `srcset` attribute can help the browser to serve the best fitting image size for the current user's display.
 
@@ -396,10 +412,10 @@ This means the generated `srcset` will contain the scales from `preview` up to `
 
 (classic-ui-images-responsive-image-support-picture-variant-in-editor)=
 
-#### Hiding a picture variant in editors
+#### Hiding a `picture` variant in editors
 
-It is possible to hide a picture variant in editors.
-This is useful when you want to define a picture variant to be used in templates only.
+It is possible to hide a `picture` variant in editors.
+This is useful when you want to define a `picture` variant to be used in templates only.
 
 ```json
     "leadimage": {
@@ -533,4 +549,4 @@ This information shows we have everything we need to generate our image URLs, wi
     width="${python: preview['width']}"
     height="${python: preview['height']}" />
 </li>
-```
+```

docs/classic-ui/mockup.md

@@ -3,16 +3,39 @@ myst:
   html_meta:
     "description": "Mockup together with Patternslib are used to build the UI toolkit for Classic UI, a frontend for Plone."
     "property=og:description": "Mockup together with Patternslib are used to build the UI toolkit for Classic UI, a frontend for Plone."
-    "property=og:title": "Mockup"
-    "keywords": "Mockup, Patternslib, Classic UI, frontend, Plone"
+    "property=og:title": "Mockup and Patternslib"
+    "keywords": "Mockup, Patternslib, Classic UI, plonecli, bobtemplates.plone, mr.bob, frontend, Plone"
 ---
 
-(mockup-label)=
+(mockup-and-patternslib-label)=
 
-# Mockup
+# Mockup and Patternslib
 
 {term}`Mockup` together with {term}`Patternslib` are used to build the UI toolkit for {term}`Classic UI`, a frontend for Plone.
 
 View the [interactive documentation of Mockup](https://plone.github.io/mockup/).
 
-For more information, visit the [Mockup repository on GitHub](https://github.com/plone/mockup).
+
+## Get started
+
+[bobtemplates.plone](https://github.com/plone/bobtemplates.plone) provides [mr.bob](https://mrbob.readthedocs.io/en/latest/) templates to generate packages for Plone projects.
+[plonecli](https://github.com/plone/plonecli) provides a command line client for bobtemplates.plone.
+
+Install plonecli into your Python user packages to make it available to all your projects.
+
+```shell
+pip install plonecli --user
+```
+
+Create a theme package add-on with {term}`plonecli`.
+
+```shell
+plonecli add mockup_pattern
+```
+
+
+## References
+
+-   {ref}`v60-mockup-resource-registry-label` in Plone 6.0
+-   [Mockup repository on GitHub](https://github.com/plone/mockup)
+-   [Patternslib](https://patternslib.com/)

docs/classic-ui/module-federation.md

@@ -59,24 +59,24 @@ const package_json_patternslib = require("@patternslib/patternslib/package.json"
 Then find the following line.
 
 ```js
-    config = patternslib_config(env, argv, config, ["@plone/mockup"]);
+config = patternslib_config(env, argv, config, ["@plone/mockup"]);
 ```
 
 Below this line add the following.
 
 ```js
-    config.plugins.push(
-        mf_config({
-            name: "myaddon",
-            filename: "myaddon-remote.min.js",
-            remote_entry: config.entry["myaddon.min"],
-            dependencies: {
-                ...package_json_patternslib.dependencies,
-                ...package_json_mockup.dependencies,
-                ...package_json.dependencies,
-            },
-        })
-    );
+config.plugins.push(
+    mf_config({
+        name: "myaddon",
+        filename: "myaddon-remote.min.js",
+        remote_entry: config.entry["myaddon.min"],
+        dependencies: {
+            ...package_json_patternslib.dependencies,
+            ...package_json_mockup.dependencies,
+            ...package_json.dependencies,
+        },
+    })
+);
 ```
 
 Replace the name `myaddon` with your add-on bundle's unique name.
@@ -93,7 +93,7 @@ To preserve compatibility with older add-ons and JavaScript implementations, the
 Constructs like the following still work:
 
 ```js
-    (function($) {
-        // JS code which uses $
-    })(jQuery);
+(function($) {
+    // JS code which uses $
+})(jQuery);
 ```

docs/classic-ui/static-resources.md

@@ -14,6 +14,10 @@ myst:
 We often want to ship a website with a static resource, such as an image, icon, CSS, or JavaScript file.
 For this, we need to register static resources.
 
+```{seealso}
+For some additional implementation information, see {ref}`classic-ui-theming-from-scratch-theme-label`.
+```
+
 
 (classic-ui-static-resources-registering-label)=
 
@@ -96,4 +100,4 @@ The following attributes are available for registering a static resource:
 
 ## Loading order of resources
 
-`depends` is used to define the loading order of resources, by specifying the name of the depending bundle.
+`depends` is used to define the loading order of resources by specifying the name of the depending bundle.

docs/classic-ui/theming/from-scratch.md

@@ -25,6 +25,8 @@ Theming based on a filesystem package without any dependency.
 -   No Diazo needed
 
 
+(classic-ui-theming-from-scratch-package-label)=
+
 ## Theme package
 
 -   Create a theme package as explained here.
@@ -33,6 +35,8 @@ Theming based on a filesystem package without any dependency.
 -   Static files
 
 
+(classic-ui-theming-from-scratch-static-files-label)=
+
 ## Static files
 
 Register directory to keep static files
@@ -49,6 +53,9 @@ Directory: `src/plonetheme/munich/browser/static`
     />
 ```
 
+
+(classic-ui-theming-from-scratch-theme-label)=
+
 ## Theme
 
 ### Manifest
@@ -161,7 +168,7 @@ To do so, follow this guide.
 -   Add a script in {file}`package.json` to compile the CSS.
 
     ```json
-      "css-compile-main": "sass --load-path=node_modules --style expanded --source-map --embed-sources --no-error-css plone.scss:../static/plone.css"
+    "css-compile-main": "sass --load-path=node_modules --style expanded --source-map --embed-sources --no-error-css plone.scss:../static/plone.css"
     ```
 
     ```{tip}