add page for adding an HTML block

docs/content-editing/add-html-block.md

@@ -0,0 +1,99 @@
+---
+myst:
+  html_meta:
+    "description": "Add an HTML Block"
+    "property=og:description": "Add an HTML Block"
+    "property=og:title": "Add an HTML Block"
+    "keywords": "Plone, Add, HTML, Block"
+---
+
+# Add an HTML Block
+
+Here we show how to add an HTML block.
+
+1. While you are editing a page, add a new block by pressing {kbd}`Enter` and click the {guilabel}`+` icon to open the Block Chooser.
+
+   ````{card}
+   ```{image} _static/add-html-block-01.jpeg
+   :alt: Open the block chooser
+   :target: _static/add-html-block--01.jpeg
+   ```
+   +++
+   _Open the block chooser_
+   ````
+
+
+2. Click the block {guilabel}`Search` field, and type {kbd}`ht`
+
+   ````{card}
+   ```{image} _static/add-html-block-02.jpeg
+   :alt: Use the block search
+   :target: _static/add-html-block--02.jpeg
+   ```
+   +++
+   _Use the block search_
+   ````
+
+
+3. Click the {guilabel}`HTML` block
+
+   ````{card}
+   ```{image} _static/add-html-block-03.jpeg
+   :alt: Choose the HTML block
+   :target: _static/add-html-block--03.jpeg
+   ```
+   +++
+   _Choose the HTML block_
+   ````
+
+
+4. Type some HTML code
+
+   ````{card}
+   ```{image} _static/add-html-block-04.jpeg
+   :alt: Enter some HTML code
+   :target: _static/add-html-block--04.jpeg
+   ```
+   +++
+   _Enter some HTML code_
+   ````
+
+
+5. Click the {guilabel}`Preview` button to preview your HTML code.
+
+   ````{card}
+   ```{image} _static/add-html-block-05.jpeg
+   :alt: Preview the HTML code
+   :target: _static/add-html-block--05.jpeg
+   ```
+   +++
+   _Preview the HTML code_
+   ````
+
+
+6. Click the {guilabel}`Code` button to return to viewing the block's HTML code.
+
+   ````{card}
+   ```{image} _static/add-html-block-06.jpeg
+   :alt: Return to the HTML code view
+   :target: _static/add-html-block--06.jpeg
+   ```
+   +++
+   _Return to the HTML code view_
+   ````
+
+
+
+7. You can continue to edit the HTML code.
+
+    Press the Save button to save your changes.
+
+   ````{card}
+   ```{image} _static/add-html-block-07.jpeg
+   :alt: Continue editing the HTML code
+   :target: _static/add-html-block--07.jpeg
+   ```
+   +++
+   _Continue editing the HTML code_
+   ````
+

docs/content-editing/index.md

@@ -60,6 +60,7 @@ add-a-link
 add-an-image
 add-an-image-block-to-a-page
 add-a-video-block
+add-html-block
 deleting-a-block
 search
 contents-view