diff --git a/docs/content-editing/_static/add-a-grid-block-01.jpeg b/docs/content-editing/_static/add-a-grid-block-01.jpeg new file mode 100644 index 000000000..25405bb86 Binary files /dev/null and b/docs/content-editing/_static/add-a-grid-block-01.jpeg differ diff --git a/docs/content-editing/_static/add-a-grid-block-02.jpeg b/docs/content-editing/_static/add-a-grid-block-02.jpeg new file mode 100644 index 000000000..c4e989305 Binary files /dev/null and b/docs/content-editing/_static/add-a-grid-block-02.jpeg differ diff --git a/docs/content-editing/_static/add-a-grid-block-03.jpeg b/docs/content-editing/_static/add-a-grid-block-03.jpeg new file mode 100644 index 000000000..ee88eee85 Binary files /dev/null and b/docs/content-editing/_static/add-a-grid-block-03.jpeg differ diff --git a/docs/content-editing/_static/add-a-grid-block-04.jpeg b/docs/content-editing/_static/add-a-grid-block-04.jpeg new file mode 100644 index 000000000..118a95e1e Binary files /dev/null and b/docs/content-editing/_static/add-a-grid-block-04.jpeg differ diff --git a/docs/content-editing/_static/add-a-grid-block-05.jpeg b/docs/content-editing/_static/add-a-grid-block-05.jpeg new file mode 100644 index 000000000..f964b5f3a Binary files /dev/null and b/docs/content-editing/_static/add-a-grid-block-05.jpeg differ diff --git a/docs/content-editing/_static/add-a-grid-block-06.jpeg b/docs/content-editing/_static/add-a-grid-block-06.jpeg new file mode 100644 index 000000000..83386b22e Binary files /dev/null and b/docs/content-editing/_static/add-a-grid-block-06.jpeg differ diff --git a/docs/content-editing/_static/add-a-grid-block-07.jpeg b/docs/content-editing/_static/add-a-grid-block-07.jpeg new file mode 100644 index 000000000..a3341dad7 Binary files /dev/null and b/docs/content-editing/_static/add-a-grid-block-07.jpeg differ diff --git a/docs/content-editing/_static/add-a-grid-block-08.jpeg b/docs/content-editing/_static/add-a-grid-block-08.jpeg new file mode 100644 index 000000000..dbc13363b Binary files /dev/null and b/docs/content-editing/_static/add-a-grid-block-08.jpeg differ diff --git a/docs/content-editing/_static/add-a-grid-block-09.jpeg b/docs/content-editing/_static/add-a-grid-block-09.jpeg new file mode 100644 index 000000000..26f430aae Binary files /dev/null and b/docs/content-editing/_static/add-a-grid-block-09.jpeg differ diff --git a/docs/content-editing/_static/add-a-grid-block-10.jpeg b/docs/content-editing/_static/add-a-grid-block-10.jpeg new file mode 100644 index 000000000..269e64169 Binary files /dev/null and b/docs/content-editing/_static/add-a-grid-block-10.jpeg differ diff --git a/docs/content-editing/_static/add-a-grid-block-11.jpeg b/docs/content-editing/_static/add-a-grid-block-11.jpeg new file mode 100644 index 000000000..e0d9aebe3 Binary files /dev/null and b/docs/content-editing/_static/add-a-grid-block-11.jpeg differ diff --git a/docs/content-editing/_static/add-a-grid-block-12.jpeg b/docs/content-editing/_static/add-a-grid-block-12.jpeg new file mode 100644 index 000000000..1d69b622a Binary files /dev/null and b/docs/content-editing/_static/add-a-grid-block-12.jpeg differ diff --git a/docs/content-editing/_static/add-html-block-01.jpeg b/docs/content-editing/_static/add-html-block-01.jpeg new file mode 100644 index 000000000..60ba0ad84 Binary files /dev/null and b/docs/content-editing/_static/add-html-block-01.jpeg differ diff --git a/docs/content-editing/_static/add-html-block-02.jpeg b/docs/content-editing/_static/add-html-block-02.jpeg new file mode 100644 index 000000000..55663af44 Binary files /dev/null and b/docs/content-editing/_static/add-html-block-02.jpeg differ diff --git a/docs/content-editing/_static/add-html-block-03.jpeg b/docs/content-editing/_static/add-html-block-03.jpeg new file mode 100644 index 000000000..c38f927b7 Binary files /dev/null and b/docs/content-editing/_static/add-html-block-03.jpeg differ diff --git a/docs/content-editing/_static/add-html-block-04.jpeg b/docs/content-editing/_static/add-html-block-04.jpeg new file mode 100644 index 000000000..b76e2df38 Binary files /dev/null and b/docs/content-editing/_static/add-html-block-04.jpeg differ diff --git a/docs/content-editing/_static/add-html-block-05.jpeg b/docs/content-editing/_static/add-html-block-05.jpeg new file mode 100644 index 000000000..a3ace4df2 Binary files /dev/null and b/docs/content-editing/_static/add-html-block-05.jpeg differ diff --git a/docs/content-editing/_static/add-html-block-06.jpeg b/docs/content-editing/_static/add-html-block-06.jpeg new file mode 100644 index 000000000..3ff05be44 Binary files /dev/null and b/docs/content-editing/_static/add-html-block-06.jpeg differ diff --git a/docs/content-editing/_static/add-html-block-07.jpeg b/docs/content-editing/_static/add-html-block-07.jpeg new file mode 100644 index 000000000..2fb2b33aa Binary files /dev/null and b/docs/content-editing/_static/add-html-block-07.jpeg differ diff --git a/docs/content-editing/add-a-grid-block.md b/docs/content-editing/add-a-grid-block.md new file mode 100644 index 000000000..f0ce78395 --- /dev/null +++ b/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_ + ```` diff --git a/docs/content-editing/add-html-block.md b/docs/content-editing/add-html-block.md new file mode 100644 index 000000000..6fab7dd35 --- /dev/null +++ b/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_ + ```` + diff --git a/docs/content-editing/index.md b/docs/content-editing/index.md index 32cee55c5..1a4aa08d7 100644 --- a/docs/content-editing/index.md +++ b/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