Merge pull request #903 from plone/20241214-tkn-add-blocks

Add HTML and grid block pages to Content Editing guide

docs/content-editing/add-a-grid-block.md

@@ -0,0 +1,150 @@
+---
+myst:
+  html_meta:
+    "description": "Add a Grid Block"
+    "property=og:description": "Add a Grid Block"
+    "property=og:title": "Add a Grid Block"
+    "keywords": "Plone, Add, Grid, Block"
+---
+
+# Add a Grid Block
+
+You can add a grid block to create columns on a page.
+
+Here we add a grid block and show how to select blocks to fill its columns.
+
+1. Click in a new block. 
+
+    To create a new block, click in an existing block and press Enter.
+
+   ````{card}
+   ```{image} _static/add-a-grid-block-01.jpeg
+   :alt: Click in a new block
+   :target: _static/add-a-grid-block-01.jpeg
+   ```
+   +++
+   _Click in a new block_
+   ````
+
+2. Click the {guilabel}`+` icon to change to a new block type.
+
+   ````{card}
+   ```{image} _static/add-a-grid-block-02.jpeg
+   :alt: Open the block chooser
+   :target: _static/add-a-grid-block-02.jpeg
+   ```
+   +++
+   _Open the block chooser_
+   ````
+
+3. Choose the {guilabel}`Grid` block.
+
+   ````{card}
+   ```{image} _static/add-a-grid-block-03.jpeg
+   :alt: Choose the Grid block
+   :target: _static/add-a-grid-block-03.jpeg
+   ```
+   +++
+   _Choose the Grid block_
+   ````
+
+4. Select the number of columns you want in your grid.
+
+   ````{card}
+   ```{image} _static/add-a-grid-block-04.jpeg
+   :alt: Choose the number of columns
+   :target: _static/add-a-grid-block-04.jpeg
+   ```
+   +++
+   _Choose the number of columns_
+   ````
+
+5. Click on the grid to select the type of block you want in each column.
+
+   ````{card}
+   ```{image} _static/add-a-grid-block-05.jpeg
+   :alt: Choose this column's block
+   :target: _static/add-a-grid-block-05.jpeg
+   ```
+   +++
+   Choose this column's block_
+   ````
+
+6. Select the type of block you want. In this example, we choose {guilabel}`Image`.
+
+   ````{card}
+   ```{image} _static/add-a-grid-block-06.jpeg
+   :alt: Choose an Image block
+   :target: _static/add-a-grid-block-06.jpeg
+   ```
+   +++
+   _Choose an Image block_
+   ````
+
+7. What you do next depends on the type of block you chose to add.
+
+    In this example, because we are adding an Image block, click the {guilabel}`Navigate` icon to browse to the source of the image.
+
+   ````{card}
+   ```{image} _static/add-a-grid-block-07.jpeg
+   :alt: Open the block chooser
+   :target: _static/add-a-grid-block-07.jpeg
+   ```
+   +++
+   _Open the block chooser_
+   ````
+
+8. Click the {guilabel}`Home` icon to navigate to the site root.
+
+   ````{card}
+   ```{image} _static/add-a-grid-block-08.jpeg
+   :alt: Navigate to Home (the site root)
+   :target: _static/add-a-grid-block-08.jpeg
+   ```
+   +++
+   _Navigate to Home (the site root)_
+   ````
+
+9. Click Images.
+
+   ````{card}
+   ```{image} _static/add-a-grid-block-09.jpeg
+   :alt: Navigate into the Images "folder"
+   :target: _static/add-a-grid-block-09.jpeg
+   ```
+   +++
+   _Navigate into the Images "folder"_
+   ````
+
+10. Click the image you want.
+
+    ````{card}
+    ```{image} _static/add-a-grid-block-10.jpeg
+    :alt: Select an image
+    :target: _static/add-a-grid-block-10.jpeg
+    ```
+    +++
+    _Select an image_
+    ````
+
+11. Repeat for all the columns in the grid block.
+
+    ````{card}
+    ```{image} _static/add-a-grid-block-11.jpeg
+    :alt: Choose a block for the remaining grid columns
+    :target: _static/add-a-grid-block-11.jpeg
+    ```
+    +++
+    Choose a block for the remaining grid columns_
+    ````
+
+12. Press {guilabel}`Save` to save your changes.
+
+    ````{card}
+    ```{image} _static/add-a-grid-block-12.jpeg
+    :alt: Save your changes
+    :target: _static/add-a-grid-block-12.jpeg
+    ```
+    +++
+    _Save your changes_
+    ````

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,8 @@ add-a-link
 add-an-image
 add-an-image-block-to-a-page
 add-a-video-block
+add-html-block
+add-a-grid-block
 deleting-a-block
 search
 contents-view