Page Contents
Classic vs. Gutenberg (Block) Editor
- The advice given on this page was prepared and intended for use with the Classic Editor.
- Some of this content may not be applicable to editing with the Gutenberg (block) editor but some of the knowledge gained will be useful when using Gutenberg.
- Unless a page is very simple, we advise against converting a page from Classic to Block — avoid frustration.
- Refer to Gutenberg Block Editor – First Steps if choosing to try out the Block editor.
Entering / Editing text
Editors can start writing a page by merrily typing away and / or dropping content (pasting) from another document. BUT, save time and frustration by noting the info in the next paragraphs. In subsequent discussion, the abbreviation, WP is used to denote WordPress and applies to editing documents for RiderwoodLife.com. Also read about not losing edits below in View / Recover Previous Edits.
Choice of Monitor
Icon for Expanding / Collapsing left menu
Facilitate writing and editing by using a large monitor. Expand the browser window to make sure that all menus are visible and that browser doesn’t force horizontal scrolling. Zooming can be done with shortcut keys:
ctrl-minus and ctrl-plus. The “master” menu on the left sometimes collapses to a thin, vertical ribbon with icons. Use the expand / contract icon to change modes.
Editing / Creating A Page
Pages Moved from RiderwoodLife.org
During the early stages of creating RiderwoodLife.com, Writers were invited to edit pages for which the content had been transferred, by the Admin, from RiderwoodLIfe.org to RiderwoodLife.com. Edits are accomplished in WordPress. Writers generally moved forward with edits to such content, probably by plunging right in. After review by an Admin, the Page “goes live” and becomes visible to public viewers, most commonly, Riderwood residents.
New Pages
New pages may be created at the request of an individual or Admin. initiate new page requests and coordinate through an Admin.
Writers are advised to not compose documents destined for WP in document processors such as WORD. it is much better to write directly in WP. Contrary to statements extent, WP leaves formatting codes and other “detritus” that is difficult to clean up in WP. Tips on this appear in the following instructions.
Contact for Page Revisions / New Pages
To add information about a club or activity to RiderwoodLife.com or to update an existing page, contact an Admin by via email:
update@riderwoodlife.com.
Beginning Writer Steps
Writers who are working on existing pages, transferring text from other documents, etc., may benefit from skipping ahead to
Moving Content / Shortcuts.
Avoid Loosing New Content
A lesson learned the hard way: be sure to save drafts, etc., before clicking on Pages and other menu items in the left bar. If not saved, the freshly entered text will disappear into a cyberspace black hole.
Use Screen Options / Avoiding Confusion
WP has been causing confusion during editing when Screen Options,
is not set to Classic View. Access screen options by clicking the drop-down arrow on the Screen options selector, pictured above. If “Default view shows, click on Classic view to change to the preferred view mode.
If Use WordPress.com view appears, do not choose it. AND, menus may loose important options making tools inaccessible with the WP view invoked.
Draft vs. Published Page
An understanding of the status of a page – publicly viewable / published / draft helps avoid confusion and avoid changes to live pages that may be confusing for viewers, i.e., sudden changes – especially repeated changes in a short period of time.
For an existing page, a small edit might not cause confusion for viewers of live pages.
Draft Page – When a new page is created, it is initially in DRAFT mode.
One may edit Draft pages, adding text, etc., and it will not appear live on RiderwoodLife.com. Use Preview Changes to see what a live page will look like. ADDENDUM (Aug, 2022): updates by WP have resulted in the Preview option disappearing! So, it may be necessary to Update the page to view changes.
Save intermediate edits by clicking Save Draft. Save before moving off of the edit pane, e.g., to the black / left menu, or some edits will be lost. BUT, they can be recovered – see the section on
View / Recover Previous Edits.
Warning: Be careful when changing a live page’s Status to Draft. Use Preview to see what changes will be effected. Addendum: See above note. When satisfied, Publish. Some actions can lead to “embarrassment” with viewers of a live page being greeted with WP error page like this:
Publishing A Page – A page can not be viewed by the public until it is published, accomplished by clicking the Publish button.
The status of the page changes from Status Draft to Status Published.
Revising A Published Page – Click on the Published drop-down arrow and select Draft. In this mode, page edits can be made, and Saved, without affecting the public appearance of a saved Published page. View the appearance of the edited page with the Preview button. Addendum (Aug, 2022) the Preview button disappeared with a recent update to WP!
When editing is complete and ready to go public, Click Publish.
- This will change the Status from Draft to Published.
- Remember to Save Draft before exiting the editing screen if the draft has not been Updated or Published.
- BUT, Update has the same effect as Publish – changes will be visible on the publicly viewable page.
Using the Toolbar
Formatting Text
- Before starting anything, become familiar with:
Know that ordinary text is styled as “Paragraph” text, as revealed by Paragraph ▼ – the paragraph “button.” Text with another style applied can be re-styled as Paragraph with this button. - Drop-down Arrows. While we’re at it, note the little, black, drop-down arrow (▼) on the right on the button: Paragraph ▼. Drop-downs are used to reveal options for selections in various menus. Upward pointing arrows (▲) commonly reverse a drop-down menu.
- Section Headers are assigned by using on the “text mode” button. To create a header, highlight the text to be assigned as a header and select the header type with the drop-down arrow.
- When writing text, a new Paragraph is initiated with the <enter> key. This puts vertical space before the new paragraph. To avoid the “extra” space, <shift>+<enter> (hold down shift and then the enter key). But, beware:
- NOTE: the text entered after a <shift>+<enter> inherits the properties of the preceding text. If done after Header, the succeeding text would take on the Header style. This has caused some consternation for some writers. This “feature” – inheritance – applies to other styling too, e.g., italics. Further, don’t use the Header style to make text bold. Instead,
- Use the Bold icon in the styling bar. Note that a tool tip appears over the icon when the mouse pointer hovers over it.
- Take a minute to hover over the icons in the Toolbar to examine the formatting options available – hover over each. Note that the formatting options available expand and contract by clicking the Toolbar Toggle.
Creating Links to Other Web Pages (URLs)
To create a link, use the link tool 
This reveals a box for entry of link properties. Click on the gear icon to expand the options.
- The link properties box opens.
Fill-in the url.box (the link for RiderwoodLife.com in this example). - Fill-in the name viewer will see a live page.
- Click to activate the option to Open in a new link tab so that viewers will see the destination page in a new tab and not close the page being viewed.
- Finally, click Add Link.
Notes About Links
- Links to insecure web sties are strongly discouraged. I.e., SSL secured sites have links starting with “https:” while insecure sites have the old, insecure link type of “http.”
- Insecure links (http:) are commonly blocked by modern browsers to protect web surfers from malicious actors.
- DO NOT add styling to links. They are automatically styled and will appear as illustrated below.
- Attempts to add styles to links may be over ridden by WP and / or lead to frustration when working with links. Example:
- In some cases, repeated attempts to add styling to links has led to compound, “internal” coding errors with overlapping and contradictory styling. Just don’t do it!
- If all else fails, delete a bad link and start over In blank white space.
- Old links, which refer viewers to MyErickson for info about contacts, should be replaced by forwarding addresses available through site Admins.
Appearance of links – Computer Screen
Links have a different appearance in the WP editor as compared to live links. The differences are illustrated here in screen shots taken from a computer monitor.
- Link as it appears in WP editor
- Link on live site as it will be seen by visitors to the page – un-visited link.
- Link on live site when hovering over un-visited link prior to clicking it. The background lights up to focus viewer’s attention on the link which will be visited if clicked.
- Visited link – appears lighter shade of blue.
- Hovering over a visited link bring up the background highlight before clicking the link.
Additional Notes
- These links may look different on live pages depending on what device is used to view a page. This comparison is for viewing on a PC monitor. YMMV.
- If “old” formatting, which used styling with color blue and bold, is retained, the appearance of links will be different. The old styling is to be removed as the formerly used styling conflicts with the custom style adapted more recently.
Appearance of links – Cell Phones / Tablets
Links to other pages, from RiderwoodLife.com, appear as shown in the accompanying screen shots which were taken while viewing the Chatterwood page and are significantly different from what is viewed on a computer monitor.
- Un-visitied links are bright, bold blue. Touch the link and a new screen (“tab”) is opened, nearly instantaneously, and the page to be visited appears.
- Upon returning to the originating screen (“tab”) the visited link is highlighted with a colored background and the link is a lighter shade of blue to help distinguish it from visited links.. Touch the screen, in an area other than a link, and the link reverts to appearance 1.
Bullet List Creation
First, note that there are illustrations below that include screen shots of actions to execute. They are not active / actionable icons but illustrative images. (Your Tipster actually did that a couple of times when creating these tips!)
The following example text will be used to illustrate creation of a bullet list. At first it is just a few bits of text in Paragraph mode, indented to set it apart for illustrative purposes:
Begin the list, blah, blah. NOTICE how the paragraphs are separated by vertical white space. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Another item to be “bullet-ized. “Blah, blah. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Yet another item to be “bullet-ized.” Blah, blah. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Last item to be “bullet-ized. “Blah, blah. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
To select text, hold down the left mouse button and drag the cursor over the text to be selected. The resulting selection is continuous and highlighted in blue. It appears like this in the WP editor:
Clicking on the Bullet styling button transforms the selection into a bulleted list. Notice that clicking, the content is still in Paragraph mode.
After clicking the Bullet style button, the text appears as below, indented here for illustrative purposes.
-
- Begin the list, blah, blah. NOTICE how the paragraphs are separated by vertical white space. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Another item to be “bullet-ized.”Blah, blah. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Yet another item to be “bullet-ized.”Blah, blah. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Last item to be “bullet-ized.”Blah, blah. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Notice also that, after activating the Bulleted list button, the icon changes appearance, having a gray background. But the Paragraph mode indicator is unchanged.
Creating Numbered Lists
Numbered lists can be created using the above technique but use the Numbered list option after a selection is made.
Bullet and Numbered Lists – Tips
-
“Un-bulleting” – Reverting Text to Paragraph Mode
- If text has been mistakenly styled in Bullet or Numbered list mode, it can be reverted to “normal” / “Paragraph” mode by, first, selecting the text in list mode.
- Then, click the applicable button, e.g., to undo a Bulleted list, click the Bulleted list button.
- Bullets disappear and the Bullet button is no longer “lit up.”
-
Allow Vertical Space for Lists
- Make sure “empty space” appears above and below a selection before it is made. Otherwise, the style, e.g., Bullets, may be “inherited” by content that one does not wish to include a list.
- Avoid the shift-enter trick to avoid a paragraph break and unwanted white space. Else, the content preceding the break will also acquire the style characteristic applied, e.g., turning preceding text into list mode.
- Images: if an image is included in a selection, it may end up having an unwanted list bullets or numbering. This is a tricky situation to deal with: In some cases, this problem can be avoided by placing the cursor at the beginning of a paragraph, inserting the image and specifying that it be right-justified and sizing smaller. BUT, if the paragraph is small, controlling vertical white space can be a challenge. Take a look in both a wide format viewer such as a PC monitor and a small screen device, e.g., a cell phone.
-
Problems with Preformatted / Copied Content
- Your Tipster has warned against copying formatted text from a word processor, e.g., WORD, and pasting it into the WP editor. In the case of bulleted and numbered lists, unwanted characters will come along, e.g., bullet characters ( • ).
- This is another example of utility of saving such content as text (.txt format) and copying from the .txt file and using WP formatting.
Moving Content From Another Document
Writers can copy and past content from other documents into a WordPress doc. BUT, beware: applications like WORD, etc., embed hidden codes that control formatting. Such text is better pasted without formatting into WP. Read more, below, about
helpful shortcuts for copy, paste, etc.
Headings / Generated TOCs
Understanding headings is important to the understanding of web page structures as well as a page’s Table of Contents (TOC). H1, H2, H3, etc. properties are assigned by changing a line of text from Paragraph mode to a heading mode with the Paragraph ▼ button. Use a hierarchy of Headings to denote sections and subsections of a page – a standard policy for writing web pages.
TOCs
Example Table of Contents
The image at right illustrates what viewers will see when TOCs are activated. The small icon, upper right, turns the TOC on and off.
- The TOC will NOT appear on an edit screen.
- Don’t use headings style to make other content stand out or that text will be included. Use bold or some other style.
- Activate automatic generation of a TOC for a page by scrolling down in the editor to see the TOC controls.
- The screen shot appearing below illustrates what will appear when scrolling.
- Click on the drop down / up arrows to toggle viewing the TOC options: ▼/ ▲
- If the Disable box is checked, no Page TOC will be generated.
- There must be at least four Headings for a TOC to be generated.
- In this example, h1, h2, and h3 are selected for inclusion in the TOC. Going further down the hierarchy can lead to TOCs that are cluttered.
View / Recover Previous Edits
Method 1.
Save intermediate draft.- Use the Browse mode to view previously edited versions of a page.
- The revision screen appears, shown below. (Excuse the poor resolution – WP compresses images resulting in loss of resolution.)
- NOTE that the Revisions dialog sometimes appears below the area illustrated here. OR, sometimes at the bottom of the text editing area. Sadly, WP is somewhat inconsistent with where tools appear.
- Before-and-after versions of revisions appear in two columns which can be compared by scrolling vertically.
- View different versions by clicking on blocks in the ribbon, highlighted in the illustration.
- The double-headed arrow to the right of the ribbon indicates the latest auto-save version.
- When a particular revision is selected on the ribbon, clicking on Restore This Revision, which does just that.
Recover from lost edits: Some times it appears that one’s edits have been lost, e.g., by jumping out of an edit screen, power loss, etc. Recover by placing the cursor over the right-most block on the ribbon. The AutoSave advisory appears (illustrated above, right).
Click the Restore This Revision button to recover edits made up to the last Autosave.- Editors are encouraged to practice this to become familiar with the procedure, e.g., by using dummy text.
- One can return to the editing screen without making changes with ← Go to editor option.
Method 2.
Before using this method, be sure to Save a draft or current changes may be lost.
Reviews of previously saved versions of a Page can be accessed by using the Revisions viewer.
A list of saved versions appears. Clicking on a date for a given version brings into view a comparison of the current and older version.
Then select the version and view comparisons on the left.
When the desired version has been selected, click on
Restore This Revision
button.
Alternatively, if reversion is not desired, return to the editing screen without making changes with the ← Go to editor option.
Moving Content / Shortcuts: Copy, Paste, etc.
Moving Text from Other Sources
- First, it bears repeating: do not compose info destined for WP in document processors, e.g., WORD. it is much better to enter info and edit in WP.
- Images should be saved to a local folder and uploaded to incorporation into a document. (Ref: Media – Tips for Writers)
- For short moves of content from other sources, use the shortcuts discussed below.
- For large documents, EXPORT / Save-As from a formatted document to text format, usually as a “.txt” document.
- Open the .txt document, copy from the .txt source and paste into WP using shortcuts.
Moving Content Between WP Pages
Alert: these operations can be confusing and are intended for more advanced users of WP.
“Move” By Copying A Page
The easiest way to “move” content to a new page is to Copy it from the Pages menu. This usually preserves all attributes of a page, e.g., the template, custom html, etc. Be sure to give it a new name if Publish is chosen for a reviewers consideration. The URL for the page must be given because the copy will not appear in menus on the live RiderwoodLife.com site.
Advance Methods – Visual Mode
This is a trick operation so be careful. One can create a copy of content and paste it into a new page for purposes of drafting major changes in a page, Publish and allow others to view. The page will not appear in the Menus on RiderwoodLife.com but the Writer of the page can provide a URL for the reviewer to use for review. Caution: the test page may appear if viewers of RiderwoodLife.com use the search function.
To facilitate this approach, in edit mode, use two browser tabs: one for the source document and the other for the destination document.
To copy text from one page to another, working in Visual mode for all steps:
- Place the cursor at the point to copy from, click and drag to select content.
- ctrl-c to copy to the clipboard
- If selection of a whole page is desired, place the cursor anywhere in the content area.
- ctrl-a to select all; ctrl-c to copy to the clipboard.
- Using a new tab in the browser, open a new page.
- Position the cursor in the edit area.
- ctrl-v pastes the content from the clipboard into the destination page.
- If working on a new page, be sure to name it something different from the original, Publish and copy the URL to access the page as a live page.
- Cautions:
- Certain attributes may not be copied with this method, e.g.,
- TOCs may need to be re-established.
- Page Attribute > Template may need to be set on the destination page to match that of the original.
- Examine the page in Preview mode to make sure it “looks right,” that attributes are as intended. Addendum (Aug, 2022) the Preview button disappeared after an update to WP.
- This approach helps overcomes these problems:
- Links for Drafts do not work for this approach because reviewers do not have access permissions for drafts.
- Converting a published page to Draft mode removes it from the menus on the home and other pages.
- Writers may wish to create test pages with content to added to original pages after completion of editing and review steps. This leaves the original page unmodified on the live site. When satisfied, use the above methods for selection and copy-to-clipboard to transfer the content into the original document.
- Remember: for a page to appear in RiderwoodLife.com menus, Writers must work with a site Admin to have it appear in menus on the site. Be aware of hierarchical relationships between parent and daughter pages.
Advance Methods – Text (html) Mode
To use this method, view a page in Text mode. Select all content and copy to the clipboard. Create a new document and, working in Text mode, paste content from the clipboard into the new document. This method should preserve custom html but other attributes may be lost, e.g., automatic generation of TOCs and previously selected page templates.
Example Shortcuts
Many shortcuts are available to facilitate moving and duplicating text; most are available in a many different applications aside from WP, e.g., document processors, plain text editors, etc.
Select text to operate on (copy, delete, and apply a style to) by placing the cursor at the beginning of the text to be selected. Hold down the left-mouse button* and drag is across the text to be selected. Release the button and selected text will be highlighted
(* unless the mouse is set with buttons reversed for left-handed operators).
In the following, “ctrl” indicates that one is to hold down the control-key (Mac: ⌘-key); shift-ctrl indicates holding the shift and ctrl key down simultaneously:
- select text by dragging a cursor over text to be selected, or,
- ctrl-a to select all content in a source
- ctrl-c – copy text selected text to the clipboard
- ctrl-x – copy selected text and delete it
- ctrl-v – paste copied text to new location, retaining formatting
- shift-ctrl-v – paste copied text to new location with formatting removed
- shift-ctrl-v is handy for moving text from a WORD, or other document editor, to remove invisible, embedded formatting characters, a highly recommended procedure.
Bonus – undo a mistake: ctrl-z. Very handy and repeating ctrl-z goes back to previous steps.
Keyboard Shortcuts – Built-in
WP has many built-in shortcuts accessible from the style bar. Some useful ones for moving text from other documents, etc., are discussed below.
Paste as text
This shortcut is useful for moving text from highly formatted documents produced with a word processor, e.g., WORD.
- Also remove formatting from content already entered into WP by selecting the text and using this tool as outlined below.
- Select text from a document and copying it to the clipboard.
- Position the cursor in a blank area where the text is to be dropped.
- Left-click
- Click on the Paste as text icon.
-
- The activated icon takes on a gray background.
- Press ctrl-v and the text will be dropped.
Click the Paste as text icon again to revert to normal editing mode.- The icon reverts to a white background.
Paste advisory
Clear Formatting
The clear formatting tool, also used to remove formatting, may not work as well as the Paste as text tool.
Expanded List of WP Shortcuts
WP has an expansive set of built-in keyboard shortcuts, accessed with the Keyboard Shortcuts icon on the style bar.
Clicking on that icon reveals a list of built-in shortcuts. Use the scroll bar to reveal even more.
All Shortcuts Revealed
These screen shots illustrate the large number of available shortcuts.
More Resources – Guide / Policies
- Media – Tips for Writers
- Tips – Login / Logout
- Instructions and Guidelines for Writers – a more comprehensive guide (PDF format).
- About general info about RiderwoodLife, including policies Writers should be familiar with and implement on their pages. These include,
- No personal info – email addresses, phone numbers, etc. Point to the Resident Directory on MyErickson, which is only accessible by Residents.
- Passwords – do not share with anyone. Each editor must have his/her own password. Do not share with a co-editor.
- Do not link to pages which are insecure – not using SSL, end-to-end encryption. Only link to pages showing https: in the url bar; don’t link to those only showing http, without an “s.”
- Unidentified contacts: if a page, being transferred from the old site to RiderwoodLife.com, has n
o contact listed, a possible resource is the Activities section on MyErickson, - If this page on the right comes up when logging out, do not use it to login. Use the Admin Login link. Otherwise, some menus, etc., may not be available.