🎨 add page for adding a listing block

plone · Dec 31, 2024 · eba28a2 · eba28a2
1 parent 993b0d9
commit eba28a2
Show file tree

Hide file tree

Showing 29 changed files with 330 additions and 0 deletions.
diff --git a/docs/content-editing/_static/add-a-listing-block-01.jpeg b/docs/content-editing/_static/add-a-listing-block-01.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-02.jpeg b/docs/content-editing/_static/add-a-listing-block-02.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-03.jpeg b/docs/content-editing/_static/add-a-listing-block-03.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-04.jpeg b/docs/content-editing/_static/add-a-listing-block-04.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-05.jpeg b/docs/content-editing/_static/add-a-listing-block-05.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-06.jpeg b/docs/content-editing/_static/add-a-listing-block-06.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-07.jpeg b/docs/content-editing/_static/add-a-listing-block-07.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-08.jpeg b/docs/content-editing/_static/add-a-listing-block-08.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-09.jpeg b/docs/content-editing/_static/add-a-listing-block-09.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-10.jpeg b/docs/content-editing/_static/add-a-listing-block-10.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-11.jpeg b/docs/content-editing/_static/add-a-listing-block-11.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-12.jpeg b/docs/content-editing/_static/add-a-listing-block-12.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-13.jpeg b/docs/content-editing/_static/add-a-listing-block-13.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-14.jpeg b/docs/content-editing/_static/add-a-listing-block-14.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-15.jpeg b/docs/content-editing/_static/add-a-listing-block-15.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-16.jpeg b/docs/content-editing/_static/add-a-listing-block-16.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-17.jpeg b/docs/content-editing/_static/add-a-listing-block-17.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-18.jpeg b/docs/content-editing/_static/add-a-listing-block-18.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-19.jpeg b/docs/content-editing/_static/add-a-listing-block-19.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-20.jpeg b/docs/content-editing/_static/add-a-listing-block-20.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-21.jpeg b/docs/content-editing/_static/add-a-listing-block-21.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-22.jpeg b/docs/content-editing/_static/add-a-listing-block-22.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-23.jpeg b/docs/content-editing/_static/add-a-listing-block-23.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-24.jpeg b/docs/content-editing/_static/add-a-listing-block-24.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-25.jpeg b/docs/content-editing/_static/add-a-listing-block-25.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-26.jpeg b/docs/content-editing/_static/add-a-listing-block-26.jpeg
diff --git a/docs/content-editing/_static/add-a-listing-block-27.jpeg b/docs/content-editing/_static/add-a-listing-block-27.jpeg
diff --git a/docs/content-editing/add-a-listing-block.md b/docs/content-editing/add-a-listing-block.md
@@ -0,0 +1,329 @@
+---
+myst:
+  html_meta:
+    "description": "Add a Listing Block"
+    "property=og:description": "Add a Listing Block"
+    "property=og:title": "Add a Listing Block"
+    "keywords": "Plone, Add, Listing, Block"
+---
+
+# Add a Listing Block
+
+A listing block lets you display a listing of content items on your site that meet criteria you set.
+
+In this example, we create a page containing a listing block. The listing block will show the most recently modified pages on the site.
+
+1. Click the {guilabel}`add item` button.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-01.jpeg
+   :alt: The add item button
+   :target: _static/add-a-listing-block-01.jpeg
+   ```
+   +++
+   _The add item button_
+   ````
+
+2. Click {guilabel}`Page`
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-02.jpeg
+   :alt: Choose Page
+   :target: _static/add-a-listing-block-02.jpeg
+   ```
+   +++
+   _Choose Page_
+   ````
+
+
+3. Click {guilabel}`Type the title...`
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-03.jpeg
+   :alt: The title field
+   :target: _static/add-a-listing-block-03.jpeg
+   ```
+   +++
+   _The title field_
+   ````
+
+
+4. Type {kbd}`My Page` as the title.
+
+
+5. Click {guilabel}`Type text...` in the next block.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-04.jpeg
+   :alt: The empty text block
+   :target: _static/add-a-listing-block-04.jpeg
+   ```
+   +++
+   _The empty text block_
+   ````
+
+6. Click the {guilabel}`+` button to change the text block to a listing block.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-05.jpeg
+   :alt: The + button
+   :target: _static/add-a-listing-block-05.jpeg
+   ```
+   +++
+   _The + button_
+   ````
+
+
+7. Click {guilabel}`Listing`
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-06.jpeg
+   :alt: The listing block choice
+   :target: _static/add-a-listing-block-06.jpeg
+   ```
+   +++
+   _The listing block choice_
+   ````
+
+8. The new listing block does not list any items because we have not yet set its search criteria.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-07.jpeg
+   :alt: The listing block is empty
+   :target: _static/add-a-listing-block-07.jpeg
+   ```
+   +++
+   _The listing block is empty_
+   ````
+
+9. Click the {guilabel}`Headline` field to set the display name of the listing block.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-08.jpeg
+   :alt: The Headline field
+   :target: _static/add-a-listing-block-08.jpeg
+   ```
+   +++
+   _The Headline field_
+   ````
+
+10. Type {kbd}`Recent Pages On This Site` as the display name of the listing block.
+
+
+11. Click {guilabel}`Add criteria`.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-09.jpeg
+   :alt: Click to add criteria
+   :target: _static/add-a-listing-block-09.jpeg
+   ```
+   +++
+   _Click to add criteria_
+   ````
+
+12. Click {guilabel}`Type` to specify the content type of items we want to list.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-10.jpeg
+   :alt: Click to search by content type
+   :target: _static/add-a-listing-block-10.jpeg
+   ```
+   +++
+   _Click to search by content type_
+   ````
+
+13. Click {guilabel}`Select...` to display the content types to choose from.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-11.jpeg
+   :alt: Click to choose the content type to search for
+   :target: _static/add-a-listing-block-11.jpeg
+   ```
+   +++
+   _Click to choose the content type to search for_
+   ````
+
+14. Click {guilabel}`Page`.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-12.jpeg
+   :alt: Choose the Page content type
+   :target: _static/add-a-listing-block-12.jpeg
+   ```
+   +++
+   _Choose the Page content type_
+   ````
+
+15. Click {guilabel}`Sort on` to set the sort order.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-13.jpeg
+   :alt: Click to set the sort order
+   :target: _static/add-a-listing-block-13.jpeg
+   ```
+   +++
+   _Click to set the sort order_
+   ````
+
+16. Click {guilabel}`Modification date` to sort by.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-14.jpeg
+   :alt: Sort on modification date
+   :target: _static/add-a-listing-block-14.jpeg
+   ```
+   +++
+   _Sort on modification date_
+   ````
+
+17. Click {guilabel}`Reversed order` to display the most recently modified items at the top of the listing block.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-15.jpeg
+   :alt: Choose to display in reversed order
+   :target: _static/add-a-listing-block-15.jpeg
+   ```
+   +++
+   _Choose to display in reversed order_
+   ````
+
+18. Click the {guilabel}`Item batch size` field to set how many items should be shown per batch. 
+
+    If there are more than this number of items to show, the block will show {guilabel}`Next Page` and {guilabel}`Previous Page` buttons at the bottom of the block.
+
+    In this example, we do not set the {guilabel}`Results limit`, which is the maximum number of items to display.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-16.jpeg
+   :alt: Click to set the batch size
+   :target: _static/add-a-listing-block-16.jpeg
+   ```
+   +++
+   _Click to set the batch size_
+   ````
+
+19. Type {kbd}`10` as the batch size.
+
+
+20. The listing block now shows the 10 most recently modified pages on the site.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-17.jpeg
+   :alt: The listing block shows the most recently modified pages
+   :target: _static/add-a-listing-block-17.jpeg
+   ```
+   +++
+   _The listing block shows the most recently modified pages_
+   ````
+
+21. This is the default listing display.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-18.jpeg
+   :alt: The default listing display
+   :target: _static/add-a-listing-block-18.jpeg
+   ```
+   +++
+   _The default listing display_
+   ````
+
+22. The {guilabel}`Variation` drop down lets you choose how to display the listed items. 
+
+    In this example, we will not use the {guilabel}`Image` variation since it works only for displaying images.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-19.jpeg
+   :alt: Change the display using the Variation field
+   :target: _static/add-a-listing-block-19.jpeg
+   ```
+   +++
+   _Change the display using the Variation field_
+   ````
+
+23. If you click {guilabel}`Summary`, the listing display changes to show the title and description (if there is one) for each item.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-20.jpeg
+   :alt: Choose the Summary variation
+   :target: _static/add-a-listing-block-20.jpeg
+   ```
+   +++
+   _Choose the Summary variation_
+   ````
+
+24. This is the summary listing variation.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-21.jpeg
+   :alt: The summary listing variation
+   :target: _static/add-a-listing-block-21.jpeg
+   ```
+   +++
+   _The summary listing variation_
+   ````
+
+25. Click {guilabel}`Variation` again.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-22.jpeg
+   :alt: Click Variation
+   :target: _static/add-a-listing-block-22.jpeg
+   ```
+   +++
+   _Click Variation_
+   ````
+
+26. Click {guilabel}`Grid`.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-23.jpeg
+   :alt: Choose the grid variation
+   :target: _static/add-a-listing-block-23.jpeg
+   ```
+   +++
+   _Choose the grid variation_
+   ````
+
+27. The block shows a grid of the content items.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-24.jpeg
+   :alt: The grid listing variation
+   :target: _static/add-a-listing-block-24.jpeg
+   ```
+   +++
+   _The grid listing variation_
+   ````
+
+28. Click {guilabel}`Variation` again and choose {guilabel}`Summary`.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-25.jpeg
+   :alt: Choose the summary listing variation
+   :target: _static/add-a-listing-block-25.jpeg
+   ```
+   +++
+   _Choose the summary listing variation_
+   ````
+
+29. Click {guilabel}`Save`.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-26.jpeg
+   :alt: The Save button
+   :target: _static/add-a-listing-block-26.jpeg
+   ```
+   +++
+   _The Save button_
+   ````
+
+30. At the bottom of the listing block, you can see the controls that let you view the batched items.
+
+   ````{card}
+   ```{image} _static/add-a-listing-block-27.jpeg
+   :alt: The batched listing controls
+   :target: _static/add-a-listing-block-27.jpeg
+   ```
+   +++
+   _The batched listing controls_
+   ````
diff --git a/docs/content-editing/index.md b/docs/content-editing/index.md
@@ -64,6 +64,7 @@ add-an-image-block-to-a-page
 add-a-video-block
 add-html-block
 add-a-grid-block
+add-a-listing-block
 deleting-a-block
 search
 contents-view