Merge pull request #905 from plone/20241215-tkn-add-pages

add pages to Content Editing guide
plone · Dec 16, 2024 · 0e0b284 · 0e0b284
2 parents fa09de1 + a681997
commit 0e0b284
Show file tree

Hide file tree

Showing 23 changed files with 286 additions and 0 deletions.
diff --git a/docs/content-editing/_static/create-a-link-01.jpeg b/docs/content-editing/_static/create-a-link-01.jpeg
diff --git a/docs/content-editing/_static/create-a-link-02.jpeg b/docs/content-editing/_static/create-a-link-02.jpeg
diff --git a/docs/content-editing/_static/create-a-link-03.jpeg b/docs/content-editing/_static/create-a-link-03.jpeg
diff --git a/docs/content-editing/_static/create-a-link-04.jpeg b/docs/content-editing/_static/create-a-link-04.jpeg
diff --git a/docs/content-editing/_static/create-a-link-05.jpeg b/docs/content-editing/_static/create-a-link-05.jpeg
diff --git a/docs/content-editing/_static/create-a-link-06.jpeg b/docs/content-editing/_static/create-a-link-06.jpeg
diff --git a/docs/content-editing/_static/create-a-link-08.jpeg b/docs/content-editing/_static/create-a-link-08.jpeg
diff --git a/docs/content-editing/_static/create-a-link-09.jpeg b/docs/content-editing/_static/create-a-link-09.jpeg
diff --git a/docs/content-editing/_static/create-a-link-10.jpeg b/docs/content-editing/_static/create-a-link-10.jpeg
diff --git a/docs/content-editing/_static/create-a-link-11.jpeg b/docs/content-editing/_static/create-a-link-11.jpeg
diff --git a/docs/content-editing/_static/create-a-link-12.jpeg b/docs/content-editing/_static/create-a-link-12.jpeg
diff --git a/docs/content-editing/_static/create-a-link-13.jpeg b/docs/content-editing/_static/create-a-link-13.jpeg
diff --git a/docs/content-editing/_static/create-a-link-14.jpeg b/docs/content-editing/_static/create-a-link-14.jpeg
diff --git a/docs/content-editing/_static/format-block-text-01.jpeg b/docs/content-editing/_static/format-block-text-01.jpeg
diff --git a/docs/content-editing/_static/format-block-text-02.jpeg b/docs/content-editing/_static/format-block-text-02.jpeg
diff --git a/docs/content-editing/_static/format-block-text-03.jpeg b/docs/content-editing/_static/format-block-text-03.jpeg
diff --git a/docs/content-editing/_static/format-block-text-04.jpeg b/docs/content-editing/_static/format-block-text-04.jpeg
diff --git a/docs/content-editing/_static/format-block-text-05.jpeg b/docs/content-editing/_static/format-block-text-05.jpeg
diff --git a/docs/content-editing/_static/format-block-text-06.jpeg b/docs/content-editing/_static/format-block-text-06.jpeg
diff --git a/docs/content-editing/_static/format-block-text-07.jpeg b/docs/content-editing/_static/format-block-text-07.jpeg
diff --git a/docs/content-editing/create-a-link.md b/docs/content-editing/create-a-link.md
@@ -0,0 +1,168 @@
+---
+myst:
+  html_meta:
+    "description": "Create a Link"
+    "property=og:description": "Create a Link"
+    "property=og:title": "Create a Link"
+    "keywords": "Plone, Create, Link, Text"
+---
+
+# Create a Link
+
+We create a link from text inside a block.
+
+First we show how to link to an external web address.
+
+Then we show how to link to another item in the site. 
+
+## Create a Link to an External Web Address
+
+1. To turn block text into a link, you must be editing the page.
+
+    In this example, we want to make the word "Plone" into a link to the web address `https://plone.org`
+
+   ````{card}
+   ```{image} _static/create-a-link-01.jpeg
+   :alt: Select the text that will be the link
+   :target: _static/create-a-link-01.jpeg
+   ```
+   +++
+   _Select the text that will be the link_
+   ````
+
+2. Highlight the word "Plone" then click the {guilabel}`Link` button in the formatting toolbar that appears.
+
+   ````{card}
+   ```{image} _static/create-a-link-02.jpeg
+   :alt: Click the Link button
+   :target: _static/create-a-link-02.jpeg
+   ```
+   +++
+   _Click the Link button_
+   ````
+
+3. Click in the web address field and type {kbd}`https://plone.org`
+
+   ````{card}
+   ```{image} _static/create-a-link-03.jpeg
+   :alt: Type or paste the web address in this field
+   :target: _static/create-a-link-03.jpeg
+   ```
+   +++
+   _Type or paste the web address in this field_
+   ````
+
+4. Click the right arrow button to apply the web address.
+
+   ````{card}
+   ```{image} _static/create-a-link-04.jpeg
+   :alt: Click the right arrow button
+   :target: _static/create-a-link-04.jpeg
+   ```
+   +++
+   _Click the right arrow button_
+   ````
+
+5. The word "Plone" now appears as a link: underlined, with a small icon showing that the link will open in a new browser window or tab.
+
+   ````{card}
+   ```{image} _static/create-a-link-05.jpeg
+   :alt: The selected text has become a link
+   :target: _static/create-a-link-05.jpeg
+   ```
+   +++
+   _The selected text has become a link_
+   ````
+
+## Edit or Remove a Link
+
+1. To edit or remove a link, you must first place the cursor within the link text or select the link text.
+
+    Then click the {guilabel}`Link` button in the formatting toolbar that appears.
+
+   ````{card}
+   ```{image} _static/create-a-link-06.jpeg
+   :alt: Click the Link button to change or remove an existing link
+   :target: _static/create-a-link-06.jpeg
+   ```
+   +++
+   _Click the Link button to change or remove an existing link_
+   ````
+
+2. To completely remove the existing web address, click the {guilabel}`X` button.
+
+   ````{card}
+   ```{image} _static/create-a-link-08.jpeg
+   :alt: Click the X to delete the web address
+   :target: _static/create-a-link-08.jpeg
+   ```
+   +++
+   _Click the X to delete the web address_
+   ````
+## Create a Link to an Item on the Site
+
+1. To link to an item on the site, instead of to an external web address, click the Navigate button.
+
+   ````{card}
+   ```{image} _static/create-a-link-09.jpeg
+   :alt: Click the Navigate button
+   :target: _static/create-a-link-09.jpeg
+   ```
+   +++
+   _Click the Navigate button_
+   ````
+
+2. In this example, we click the {guilabel}`greater than` button to navigate into the "Content Types" page.
+
+   ````{card}
+   ```{image} _static/create-a-link-10.jpeg
+   :alt: Click the greater than icon to navigate into the item
+   :target: _static/create-a-link-10.jpeg
+   ```
+   +++
+   _Click the greater than icon to navigate into the item_
+   ````
+
+3. Click the icon to the left of the item you that should be the link target.
+
+   ````{card}
+   ```{image} _static/create-a-link-11.jpeg
+   :alt: Click the icon to the left of the item
+   :target: _static/create-a-link-11.jpeg
+   ```
+   +++
+   _Click the icon to the left of the item_
+   ````
+
+4. Click the {guilabel}`right arrow` button to save the link target.
+
+   ````{card}
+   ```{image} _static/create-a-link-12.jpeg
+   :alt: Click the right arrow button
+   :target: _static/create-a-link-12.jpeg
+   ```
+   +++
+   _Click the right arrow button_
+   ````
+
+5. The path to the link target is shown in the web address field.
+
+   ````{card}
+   ```{image} _static/create-a-link-13.jpeg
+   :alt: The path to the link target
+   :target: _static/create-a-link-13.jpeg
+   ```
+   +++
+   _The path to the link target_
+   ````
+
+6. If you'd like the link target to send an email message, in the web address field type the prefix {kbd}`mailto:` followed by the destination email address, e.g., {kbd}`[email protected]`, then click the right arrow button.
+
+   ````{card}
+   ```{image} _static/create-a-link-14.jpeg
+   :alt: Click the right arrow button to save the link address
+   :target: _static/create-a-link-14.jpeg
+   ```
+   +++
+   _Click the right arrow button to save the link address_
+   ````
diff --git a/docs/content-editing/format-block-text.md b/docs/content-editing/format-block-text.md
@@ -0,0 +1,116 @@
+---
+myst:
+  html_meta:
+    "description": "How to Format Text in a Block"
+    "property=og:description": "How to Format Text in a Block"
+    "property=og:title": "How to Format Text in a Block"
+    "keywords": "Plone, Format, Block, Text"
+---
+
+# How to Format Text in a Block
+
+We show how to select text in order to format it.
+
+1. In this example, we are editing a page. 
+
+    It contains a block in which we would like to format this text.
+
+   ````{card}
+   ```{image} _static/format-block-text-01.jpeg
+   :alt: Highlight the text to be formatted
+   :target: _static/format-block-text-01.jpeg
+   ```
+   +++
+   _Highlight the text to be formatted_
+   ````
+
+
+2. Use the mouse to select the text you want to format.
+
+    The formatting toolbar appears.
+
+    In this example, we click {guilabel}`B` to boldface the selected text.
+
+   ````{card}
+   ```{image} _static/format-block-text-02.jpeg
+   :alt: Click B to boldface the selected text
+   :target: _static/format-block-text-02.jpeg
+   ```
+   +++
+   _Click B to boldface the selected text_
+   ````
+
+
+3. This is the text after being bolded.
+
+   ````{card}
+   ```{image} _static/format-block-text-03.jpeg
+   :alt: The text after being formatted
+   :target: _static/format-block-text-03.jpeg
+   ```
+   +++
+   _The text after being formatted_
+   ````
+
+
+4. You can remove a particular format by clicking it again. 
+
+    In this case, we have clicked {guilabel}`B` again to unbold the text.
+
+   ````{card}
+   ```{image} _static/format-block-text-04.jpeg
+   :alt: Click B again to unbold currently bolded text
+   :target: _static/format-block-text-04.jpeg
+   ```
+   +++
+   _Click B again to unbold currently bolded text_
+   ````
+
+
+5. You can apply more than one format to the selected text.
+
+    In this example, we click {guilabel}`I` to italicize the already bolded text.
+
+   ````{card}
+   ```{image} _static/format-block-text-05.jpeg
+   :alt: Click I to italicize text
+   :target: _static/format-block-text-05.jpeg
+   ```
+   +++
+   _Click I to italicize text_
+   ````
+
+
+6. This is the resulting bolded, italicized text.
+
+   ````{card}
+   ```{image} _static/format-block-text-06.jpeg
+   :alt: Bolded, italicized text
+   :target: _static/format-block-text-06.jpeg
+   ```
+   +++
+   _Bolded, italicized text_
+   ````
+
+
+7. The other formats you can apply are:
+   - strikethrough
+   - creating a link
+   - creating a heading
+   - creating a subheading
+   - subscripting
+   - superscripting
+   - inserting a numbered list
+   - inserting an unordered list 
+   - creating a blockquote
+
+   ````{card}
+   ```{image} _static/format-block-text-07.jpeg
+   :alt: Other formats that can be applied to selected text
+   :target: _static/format-block-text-07.jpeg
+   ```
+   +++
+   _Other formats that can be applied to selected text_
+   ````
+
+
diff --git a/docs/content-editing/index.md b/docs/content-editing/index.md
@@ -54,6 +54,8 @@ tour-of-plone
 logging-in-and-out
 content-creation-to-publication
 pages
+format-block-text
+create-a-link
 use-pages-to-organize-content
 add-a-file
 add-a-link