Title: - Editing with the In-Place Editor
Section: Basic Page Management
File name: content-in-place-edit.txt
Covers: Finding the pencil icons by hovering. Toggling all pencil icons on/off. Using them to edit just the Body section of the page without going into the full Edit. Follow-on: Mention finding page in navigation and clicking Edit to get to the full edit page (or mention this in the steps when you get there).
See https://userguide_new-drupal.dev.devdrupal.org/guidelines/guidelines.htm...
Previous work:
Written and edited by https://www.drupal.org/u/davidlee55[David Lee] and
https://www.drupal.org/u/jhodgdon[Jennifer Hodgdon].
If someone else works on this, add your name to the attributions.
- Does it follow the template?
- Have the comments and placeholder text been removed from the template?
- Is everything the topic was supposed to cover included, and nothing extra?
- If there are @todo notes, are they clear?
- If there are images included, do they include instructions for how to redo them in a comment? (Note: Screenshots do not need to be perfect. Just make a rough cut.)
- Is attribution provided?
| Comment | File | Size | Author |
|---|---|---|---|
| #20 | content-in-place-edit-hover-box.png | 19.48 KB | jhodgdon |
| #20 | content-in-place-edit-save-box.png | 23.92 KB | jhodgdon |
| #20 | content-in-place-edit.txt | 2.81 KB | jhodgdon |
Comments
Comment #1
davidlee55 commentedComment #2
davidlee55 commentedThis is a first rough draft using in-place-edit, not to concise yet, but somewhat thorough.
—David Lee—
As the floating edit box's contents are a little confusing, I do have some suggestions that I will submit in the correct place, of course.
•First use the cursor to find the content region's pencil icon. It will appear in the upper right corner of the region as the cursor hovers over any part of the region.
•Once it appears click on the pencil icon. Choices will appear in a contextual box right below it.
•Click on Quick edit for the ability to edit in place.
•The content region is now live for editing and will be highlighted with a border around it, and a floating box will appear describing, and pointing to the live field as the cursor moves about.
•This description box that has appeared, moves, as the cursor moves over the region, and the bar will describe and point to the different fields of the content region that can be edited.
•This description box includes an "x" to escape the Quit edit mode at any time. Just click on it.
•This description box's contents will change as the editing process progresses.
•Double click on the field that you what you want to edit.
•The description box will now include an editing toolbar e.g. it will include choices for bold, italic, etc.
•If you have double clicked within a text field the cursor will have changed from a pointing finger to a flashing pipe within the text field. The text is now ready to edit.
•Once any editing has started a Save button will appear in the floating description box. Either press save when done or press "x" to exit without saving.
•If you have double clicked within an image filed the description bar will have the editing toolbar added to it but the cursor will still be the pointing finger, and you will need to double-click again to edit the image.
•Double click on the image again to to edit it. This will cause a new box to open with choices to edit the image, and also an "x" to escape.
•When the image has been double-clicked a new floating box will open with choices to edit the image—both a SAVE button and the "x" will be present to end the edit.
Comment #3
jhodgdonDavid: This looks good!
You may not know about it, but there is also a grand-master pencil icon that is in the Toolbar. This pencil icon turns on all the other pencil icons. That may be good to mention? You can possibly point out both.
You might also look at the Help page within Drupal 8 for the ... what's the module called, Edit or Quick Edit? Click on Help and look for the topic. There may be something useful there you can use in your description.
Comment #4
davidlee55 commentedVersion two of the instructions. Next I will start adding some screen shots.
Thank you for the help Jennifer.—David
QUICK-EDIT INSTRUCTIONS TO EDIT-IN-PLACE
Quick-edit is a shortcut for editing directly in the Content region of a page.
•To quick-edit first find the pencil icon for the main content.
•Find the pencil icon for the Content region.
•There is a grand master pencil icon visible in the upper right corner of the admin toolbar, and clicking it will toggle all of the pencil icons into visible mode.
•Otherwise use the cursor to find the content region's pencil icon. It will appear in the upper right corner of the region as the cursor hovers over any part of the region.
•Once found, click on the pencil icon. Choices will appear in a contextual box right below it.
•Click on Quick-edit for the ability to Edit-in-place.
•The pencil icons do not all have options for Quick-edit—Only the Content region does.
•Once Quick-Edit has been clicked the Content region becomes live for editing. It will be highlighted with a border around it, and a floating Quick-Edit box will appear on the page.
QUICK–EDIT BOX:
•The quick-edit box that has appeared, moves, as the cursor moves over the Content region, and theQuick-edit box will describe, and point to the different fields of the content region that can be edited.
•The Quick-edit box includes an "x" to escape Quit-edit mode at any time. Just click on it.
•The Quick-edit box's contents will change as the editing process progresses, but it will alway show the title of the article and the "x" to escape.
•Double click on the field that you want to edit, and the Quick-edit box will now include an editing toolbar e.g. it will include choices for bold, italic, etc.
•If you have double clicked within a text field the cursor will have changed from a pointing finger to a flashing pipe within the text field. The text is now ready to edit.
•Once any changes have been made a Save button will appear in the Quick-edit box. When done either press save, or press "x" to exit without saving.
•If you want to edit an image, and have double clicked on an image field within the body the Quick-edit box will add the editing toolbar, but the cursor will still be the pointing finger, and you will need to double-click again on the image to edit it. After double clicking it again a larger box will open with choices to edit the image, including also an "x" to escape
•When done, either click SAVE to save, or click the "x" to exit without saving.
Comment #5
jhodgdonThis looks very comprehensive David!
I think that a concrete example could help when you get to actually writing up your topic. So instead of being generic like "... the region you want... " or "... the field you want...", orient the person by using a specific example (like editing the Body field to add more information) and refer to that throughout the task steps.
Comment #6
jhodgdonWe decided to use separate issues for each phase of writing/editing.
Comment #7
davidlee55 commentedThank you for the guidance Jennifer. Is it possible to introduce images?
—David
QUICK-EDIT INSTRUCTIONS TO EDIT-IN-PLACE
Quick-edit is a shortcut for editing directly in the Content region of a page.
•First find the pencil icon for the Main Content region.
• There are two ways to find the correct pencil icon: 1) Click the Grand Master pencil icon found in the upper right corner of the screen to make all hidden pencil icons visible. 2) Use the cursor—As the cursor hovers over any part of a region that region's pencil icon will become visible in the upper right corner of that region.
•Once found, click on the Content region's pencil icon. Choices will appear in a contextual box right below it.
•Choose Quick-edit by clicking on it for the ability to Edit-in-place.
Comment #8
davidlee55 commentedSo the instructions will include no images?
How is it best to communicate with you Jennifer?
David
Comment #9
jhodgdonImages - YES! See
https://userguide-drupal.redesign.devdrupal.org/guidelines/good-writing.... (guidelines)
and
https://userguide-drupal.redesign.devdrupal.org/guidelines/formatting.ht... (practical instructions).
Communication with me: this issue seems to be working pretty well? It is best to communicate about this project on the issue.
Comment #10
jhodgdonAlso as a note on images: When you make a screen shot, do not worry about making it perfect. Just upload something close, and add notes (see instructions linked above) about how you made the screen shot. Drupal 8's user interface is still changing so the images will need to be redone anyway.
[I'm updating those instructions now to indicate this]
Comment #11
jhodgdonHi! Are you still working on this? Hopefully yes -- if not, please comment here and let us know we need to find someone else. And if you are, do you know when you might finish writing this topic?
By the way... there have been quite a few updates to our processes since the sprint where you took this on. For one thing, we have a more concise guide to contributing (with links to specific instructions) on the project page:
https://www.drupal.org/project/user_guide
Also, the templates and some guidelines have changed, especially in the area of screen shots and images.
And we've finally made a complete outline for the guide! See
https://userguide-drupal.redesign.devdrupal.org/d8guide/en/index.html
to find your topic, along with its new template. We also put more notes about what each topic should cover in the tracking spreadsheet; see
https://docs.google.com/spreadsheets/d/1ov0FyJhKrJe7PYvohzV5UrrLyRaVCy2A...
for that.
Thanks!
Comment #12
jhodgdonOne more note on this issue: The usability studies that they did at the Twin Cities Drupal Camp uncovered some problems with this functionality. So, it may be changing. I think we should postpone writing this topic until the user interface is stable.
Comment #13
davidlee55 commentedHi J,
I have seen this is postponed. Sorry for being so slow, but am still interested to help in some way. To learn I have been observing some of the other documentation.
David Lee
Comment #14
jhodgdonGreat! Yes, this has been postponed because due to the usability studies at the Twin Cities Drupal Camp, they found that the pencil icon thing was not very good and I think they are considering how to revise it. So we should wait to document it until the user interface becomes more stable.
If you'd like to pick a new topic and work on that instead, that would be lovely! Meanwhile I will unassign this one... When it comes time to un-postpone, we can at least use your proposed text and images here, and credit you for the work. Thanks again!
Comment #15
jhodgdonUpdating summary. This is still Postponed.
Comment #16
jhodgdonAt this point, the user interface for Drupal 8.0 is not going to be updated any more. So we should get back to this one.
David: Do you want to get back to writing this, or should we find someone else?
Comment #17
jhodgdonWell at this point I will just assume that David doesn't want to finish this. David: If you would like to come back to this, that is still fine -- just assign the issue to yourself and forge ahead!
If not, someone else can use the text in #4 and #7 as a starting point (there may have been some changes to how it works in the meantime), and write this topic. Thanks!
Comment #18
jhodgdonComment #19
jhodgdonI'll take this on.
Comment #20
jhodgdonHow's this?
Comment #21
HezzieB commentedI'm working on this at 2016 Boston Sprint Weekend
Comment #22
HezzieB commentedI'm working on this at #SprintWeekend2016 #SprintWeekendBOS
Comment #23
HezzieB commentedI read through the .txt file and looked at the corresponding screenshots and this makes sense. Changing status to Reviewed & tested by the community.
Comment #24
jhodgdonThanks for the review!
Comment #26
eojthebraveI made a couple of minor changes to the formatting to ensure that this meets our guidelines (mostly so we don't need to do another separate guidelines review of this topic) and then committed this. Thanks @davidlee55, @HezzieB, and @jhodgdon.
Comment #27
jhodgdon