🎨 add a map block

plone · Jan 2, 2025 · b1379bf · b1379bf
1 parent 2b8b3a8
commit b1379bf
Show file tree

Hide file tree

Showing 29 changed files with 320 additions and 0 deletions.
diff --git a/docs/content-editing/_static/add-a-map-block-01.jpeg b/docs/content-editing/_static/add-a-map-block-01.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-02.jpeg b/docs/content-editing/_static/add-a-map-block-02.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-03.jpeg b/docs/content-editing/_static/add-a-map-block-03.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-04.jpeg b/docs/content-editing/_static/add-a-map-block-04.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-05.jpeg b/docs/content-editing/_static/add-a-map-block-05.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-06.jpeg b/docs/content-editing/_static/add-a-map-block-06.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-07.jpeg b/docs/content-editing/_static/add-a-map-block-07.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-08.jpeg b/docs/content-editing/_static/add-a-map-block-08.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-09.jpeg b/docs/content-editing/_static/add-a-map-block-09.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-10.jpeg b/docs/content-editing/_static/add-a-map-block-10.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-11.jpeg b/docs/content-editing/_static/add-a-map-block-11.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-12.jpeg b/docs/content-editing/_static/add-a-map-block-12.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-13.jpeg b/docs/content-editing/_static/add-a-map-block-13.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-14.jpeg b/docs/content-editing/_static/add-a-map-block-14.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-15.jpeg b/docs/content-editing/_static/add-a-map-block-15.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-16.jpeg b/docs/content-editing/_static/add-a-map-block-16.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-17.jpeg b/docs/content-editing/_static/add-a-map-block-17.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-18.jpeg b/docs/content-editing/_static/add-a-map-block-18.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-19.jpeg b/docs/content-editing/_static/add-a-map-block-19.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-20.jpeg b/docs/content-editing/_static/add-a-map-block-20.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-21.jpeg b/docs/content-editing/_static/add-a-map-block-21.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-22.jpeg b/docs/content-editing/_static/add-a-map-block-22.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-23.jpeg b/docs/content-editing/_static/add-a-map-block-23.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-24.jpeg b/docs/content-editing/_static/add-a-map-block-24.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-25.jpeg b/docs/content-editing/_static/add-a-map-block-25.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-26.jpeg b/docs/content-editing/_static/add-a-map-block-26.jpeg
diff --git a/docs/content-editing/_static/add-a-map-block-27.jpeg b/docs/content-editing/_static/add-a-map-block-27.jpeg
diff --git a/docs/content-editing/add-a-map-block.md b/docs/content-editing/add-a-map-block.md
@@ -0,0 +1,319 @@
+---
+myst:
+  html_meta:
+    "description": "Adding a Map Block"
+    "property=og:description": "Adding a Map Block"
+    "property=og:title": "Adding a Map Block"
+    "keywords": "Plone, Adding, Map, Block"
+---
+
+# Adding a Map Block
+
+We create a page and add a map block.
+
+1. To create a new page, click the {guilabel}`add new` button.
+
+   ````{card}
+   ```{image} _static/add-a-map-block-01.jpeg
+   :alt: The add new button
+   :target: _static/add-a-map-block-01.jpeg
+   ```
+   +++
+   _The add new button_
+   ````
+
+2. Click {guilabel}`Page`
+
+   ````{card}
+   ```{image} _static/add-a-map-block-02.jpeg
+   :alt: Click Page
+   :target: _static/add-a-map-block-02.jpeg
+   ```
+   +++
+   _Click Page_
+   ````
+
+3. Click {guilabel}`Type the title...`
+
+   ````{card}
+   ```{image} _static/add-a-map-block-03.jpeg
+   :alt: The title field
+   :target: _static/add-a-map-block-03.jpeg
+   ```
+   +++
+   _The title field_
+   ````
+
+4. Type {kbd}`A Page`
+
+5. Click {guilabel}`Type text...`
+
+   ````{card}
+   ```{image} _static/add-a-map-block-04.jpeg
+   :alt: The next text block
+   :target: _static/add-a-map-block-04.jpeg
+   ```
+   +++
+   _The next text block_
+   ````
+
+6. Click the {guilabel}`+` button.
+
+   ````{card}
+   ```{image} _static/add-a-map-block-05.jpeg
+   :alt: The + button
+   :target: _static/add-a-map-block-05.jpeg
+   ```
+   +++
+   _The + button_
+   ````
+
+7. Click the {guilabel}`Common` set of blocks.
+
+   ````{card}
+   ```{image} _static/add-a-map-block-06.jpeg
+   :alt: The Common block set
+   :target: _static/add-a-map-block-06.jpeg
+   ```
+   +++
+   _The Common block set_
+   ````
+
+8. Click the {guilabel}`Maps` block.
+
+   ````{card}
+   ```{image} _static/add-a-map-block-07.jpeg
+   :alt: The map block
+   :target: _static/add-a-map-block-07.jpeg
+   ```
+   +++
+   _The map block_
+   ````
+
+9. Click the {guilabel}`Enter map Embed Code` field.
+
+   ````{card}
+   ```{image} _static/add-a-map-block-08.jpeg
+   :alt: The map embed code field
+   :target: _static/add-a-map-block-08.jpeg
+   ```
+   +++
+   _The map embed code field_
+   ````
+
+10. Open or switch to another browser window or tab, use Google Maps and navigate to the location you want to embed in the Maps block.
+
+     To copy the embed code, click the {guilabel}`Share` button.
+
+    ````{card}
+    ```{image} _static/add-a-map-block-09.jpeg
+    :alt: The Share button
+    :target: _static/add-a-map-block-09.jpeg
+    ```
+    +++
+    _The Share button_
+    ````
+
+11. Click {guilabel}`Embed a map`.
+
+    ````{card}
+    ```{image} _static/add-a-map-block-10.jpeg
+    :alt: The Embed a map button
+    :target: _static/add-a-map-block-10.jpeg
+    ```
+    +++
+    _The Embed a map button_
+    ````
+
+12. Click {guilabel}`Copy HTML`. The embed code has been copied to your clipboard.
+
+    ````{card}
+    ```{image} _static/add-a-map-block-11.jpeg
+    :alt: The Copy HTML button
+    :target: _static/add-a-map-block-11.jpeg
+    ```
+    +++
+    _The Copy HTML button_
+    ````
+
+13. Switch back to the window or tab in which you are adding a maps block.
+
+     Paste the embed code in the {guilabel}`Enter map Embed Code` field.
+
+     Click the {guilabel}`right arrow` button to save the embed code.
+
+    ````{card}
+    ```{image} _static/add-a-map-block-12.jpeg
+    :alt: The right arrow button
+    :target: _static/add-a-map-block-12.jpeg
+    ```
+    +++
+    _The right arrow button_
+    ````
+
+14. The map block shows the location you entered.
+
+    ````{card}
+    ```{image} _static/add-a-map-block-13.jpeg
+    :alt: The resulting map
+    :target: _static/add-a-map-block-13.jpeg
+    ```
+    +++
+    _The resulting map_
+    ````
+
+15. Click the {guilabel}`Alt text` field.
+
+    ````{card}
+    ```{image} _static/add-a-map-block-14.jpeg
+    :alt: The alt text field
+    :target: _static/add-a-map-block-14.jpeg
+    ```
+    +++
+    _The alt text field_
+    ````
+
+16. Type {kbd}`The University of Jyväskylä`.
+
+17. This is the "wide" default alignment of the map block, relative to other blocks around it. Other blocks will be shown only above or below this block.
+
+    ````{card}
+    ```{image} _static/add-a-map-block-15.jpeg
+    :alt: The wide alignment button
+    :target: _static/add-a-map-block-15.jpeg
+    ```
+    +++
+    _The wide alignment button_
+    ````
+
+18. Click this icon to set the map block to the "left" alignment so other blocks are shown to the right and below it.
+
+    ````{card}
+    ```{image} _static/add-a-map-block-16.jpeg
+    :alt: The left alignment button
+    :target: _static/add-a-map-block-16.jpeg
+    ```
+    +++
+    _The left alignment button_
+    ````
+
+19. This is how the left alignment looks.
+
+    ````{card}
+    ```{image} _static/add-a-map-block-17.jpeg
+    :alt: The left alignment
+    :target: _static/add-a-map-block-17.jpeg
+    ```
+    +++
+    _The left alignment_
+    ````
+
+20. Click this icon to set the map block's "right" alignment so other blocks are shown to the left and below it.
+
+    ````{card}
+    ```{image} _static/add-a-map-block-18.jpeg
+    :alt: The right alignment button
+    :target: _static/add-a-map-block-18.jpeg
+    ```
+    +++
+    _The right alignment button_
+    ````
+
+21. This is how the right alignment looks.
+
+    ````{card}
+    ```{image} _static/add-a-map-block-19.jpeg
+    :alt: The right alignment
+    :target: _static/add-a-map-block-19.jpeg
+    ```
+    +++
+    _The right alignment_
+    ````
+
+22. Click this icon to set the map block's "center" alignment so other blocks are shown only above and below it.
+
+    ````{card}
+    ```{image} _static/add-a-map-block-20.jpeg
+    :alt: The center alignment button
+    :target: _static/add-a-map-block-20.jpeg
+    ```
+    +++
+    _The center alignment button_
+    ````
+
+23. This is how the "center" alignment looks.
+
+    ````{card}
+    ```{image} _static/add-a-map-block-21.jpeg
+    :alt: The center alignment
+    :target: _static/add-a-map-block-21.jpeg
+    ```
+    +++
+    _The center alignment_
+    ````
+
+24. Click this icon to set the map block's "wide" alignment so this block fills the main content column and other blocks are shown only above and below it.
+
+    ````{card}
+    ```{image} _static/add-a-map-block-22.jpeg
+    :alt: The wide alignment button
+    :target: _static/add-a-map-block-22.jpeg
+    ```
+    +++
+    _The wide alignment button_
+    ````
+
+25. This is how the "wide" alignment looks.
+
+    ````{card}
+    ```{image} _static/add-a-map-block-23.jpeg
+    :alt: The wide alignment
+    :target: _static/add-a-map-block-23.jpeg
+    ```
+    +++
+    _The wide alignment_
+    ````
+
+26. Click this icon to set the map block's "full" alignment so this block fills the width of the browser window and other blocks are shown above and below it.
+
+    ````{card}
+    ```{image} _static/add-a-map-block-24.jpeg
+    :alt: The full alignment button
+    :target: _static/add-a-map-block-24.jpeg
+    ```
+    +++
+    _The full alignment button_
+    ````
+
+27. This is how the "full" alignment looks.
+
+    ````{card}
+    ```{image} _static/add-a-map-block-25.jpeg
+    :alt: The full alignment
+    :target: _static/add-a-map-block-25.jpeg
+    ```
+    +++
+    _The full alignment_
+    ````
+
+28. Save the page.
+
+    ````{card}
+    ```{image} _static/add-a-map-block-26.jpeg
+    :alt: The Save button
+    :target: _static/add-a-map-block-26.jpeg
+    ```
+    +++
+    _The Save button_
+    ````
+
+29. You can see the new map block on the page.
+
+    ````{card}
+    ```{image} _static/add-a-map-block-27.jpeg
+    :alt: The resulting map
+    :target: _static/add-a-map-block-27.jpeg
+    ```
+    +++
+    _The resulting map_
+    ````
diff --git a/docs/content-editing/index.md b/docs/content-editing/index.md
@@ -65,6 +65,7 @@ add-a-video-block
 add-html-block
 add-a-grid-block
 add-a-listing-block
+add-a-map-block
 deleting-a-block
 block-operations
 search