See CHANGELOG.md for changes

CHANGELOG.html

@@ -1,4 +1,14 @@
 <h1 id="changelog">CHANGELOG</h1>
+<h2 id="0-2">0.2</h2>
+<ul>
+<li>Added support for featured image</li>
+<li>Disabled and moved unnecessary functions if not logged in and not on frontend</li>
+<li>Added unsaved changes warning if leaving page</li>
+</ul>
+<h2 id="0-1-2">0.1.2</h2>
+<ul>
+<li>Removed submodule link of plugin updater</li>
+</ul>
 <h2 id="0-1-1">0.1.1</h2>
 <ul>
 <li>Added updating functionality through github, curtesy of <a href="https://github.com/YahnisElsts/plugin-update-checker">YahnisElsts</a>, as well as automatic background updates</li>

CHANGELOG.md

@@ -1,5 +1,13 @@
 CHANGELOG
 =========
+## 0.2
+* Added support for featured image
+* Disabled and moved unnecessary functions if not logged in and not on frontend
+* Added unsaved changes warning if leaving page
+
+## 0.1.2
+* Removed submodule link of plugin updater
+
 ## 0.1.1
 * Added updating functionality through github, curtesy of [YahnisElsts](https://github.com/YahnisElsts/plugin-update-checker), as well as automatic background updates
 * Added oEmbed support (automatic conversion of valid oEmbed)

README.html

@@ -8,6 +8,7 @@ <h1 id="wa-fronted-wordpress-plugin">WA Fronted WordPress Plugin</h1>
 <p><img src="https://github.com/jesperbjerke/wa-fronted/blob/master/screenshots/screenshot-1.jpg" alt="">
 <img src="https://github.com/jesperbjerke/wa-fronted/blob/master/screenshots/screenshot-2.jpg" alt="">
 <img src="https://github.com/jesperbjerke/wa-fronted/blob/master/screenshots/screenshot-3.jpg" alt=""></p>
+<h2 id="configuration">Configuration</h2>
 <p>To enable an editable area, simply add a filter function to &#39;wa_fronted_options&#39; that passes and returns a multidimensional array. Note that both themes and plugins can call this filter before or after eachother and build upon or replace options.</p>
 <p>The first level of the array consists of the key &quot;defaults&quot; (optional) and &quot;post_types&quot;. In &quot;defaults&quot;, specify whatever you want to be set as default when you have not set anything else in that specific area. In &quot;post_types&quot; you create an array for each post type you want to enable frontend editing for (you can also use &#39;front_page&#39; if you just want to target your static front page). Inside, you set &quot;editable_areas&quot; with an array with options for each editable area on this post type.</p>
 <p>The following example will enable the regular post content on front page to be editable from frontend if logged in user has role &quot;administrator&quot;, with a toolbar consisting of only bold and italic buttons, but on posts we allow a full toolbar and leaving permission to the default (current_user_can(&#39;edit_posts&#39;)).</p>
@@ -49,12 +50,13 @@ <h1 id="wa-fronted-wordpress-plugin">WA Fronted WordPress Plugin</h1>
 <h2 id="options">Options</h2>
 <ul>
 <li><strong>container</strong> (required, string): selector of wrapping element of what you want to edit. Can be any valid jQuery selector string</li>
-<li><strong>field_type</strong> (required, string): <code>post_content</code>, <code>post_title</code>, <code>acf_{FIELD ID}</code> / <code>acf_sub_{SUBFIELD ID}</code> (if set and <strong>toolbar</strong> is not specified, <strong>toolbar</strong> will set itself based on what field it is)</li>
+<li><strong>field_type</strong> (required, string): <code>post_content</code>, <code>post_title</code>, <code>post_thumbnail</code> (note that if you don&#39;t use the<em>post_thumbnail() function, the image has to have the class &#39;attachment-post-thumbnail&#39;), `acf</em>{FIELD ID}<code>/</code>acf<em>sub</em>{SUBFIELD ID}` (if set and <strong>toolbar</strong> is not specified, <strong>toolbar</strong> will set itself based on what field it is)</li>
 <li><strong>permission</strong> (optional, string): <code>logged-in</code> (enable to all logged in users), <code>default</code> (default, enabled if user has capability <em>edit_posts</em>), <code>{USER ROLE}</code> (enable to specific user role)</li>
 <li><strong>post_id</strong> (optional, int): Insert post id to override the <code>global $post</code> variable. If used in combination with <code>acf_{FIELD ID}</code>, note that it can also be set to <em>options / taxonomies / users / etc</em></li>
 <li><strong>toolbar</strong> (optional, mixed bool/string): <code>full</code> (default, all buttons), <code>false</code> (do not show toolbar), <code>comma-separated string</code> (bold, italic, underline, anchor, header1, header2, quote, unorderedlist, orderedlist, justifyLeft, justifyCenter, justifyRight)</li>
 <li><strong>media_upload</strong> (optional, mixed bool/string): <code>true</code> (default, will allow user to insert/upload media to the editable area), <code>false</code> (disable media upload), <code>only</code> (constrain the editable area to only edit media. ie; no text, no toolbar)</li>
-<li><strong>output</strong> (optional, string): <em>only applies to ACF fields with complex output</em> value to retrieve from get_field() to output as a dot separated string representing the traversing of value array, ie. for an image field that should output the thumbnail: &quot;sizes.thumbnail&quot;.</li>
+<li><strong>image_size</strong> (optional, string): any registered image size <em>(only applicable if <strong>field_type</strong> is set and you want another image size than WP default, which is &#39;post-thumbnail&#39;)</em></li>
+<li><strong>output</strong> (optional, string): alue to retrieve from get_field() to output as a dot separated string representing the traversing of value array, ie. for an image field that should output the thumbnail: &quot;sizes.thumbnail&quot; <em>(only applicable to ACF fields with complex output)</em></li>
 <li><strong>output_to</strong> (optional, array): <em>if not specified, the returned data after save will be put directly into the container element</em> <pre><code class="lang-php">array(
   &quot;selector&quot; =&gt; (string) selector of element inside **container** to output content to. Can be any valid jQuery selector string,
   &quot;attr&quot;    =&gt; (mixed bool/string) if output should be set to an attribute of **selector**, otherwise false or not set
@@ -69,6 +71,7 @@ <h2 id="action-hooks">Action hooks</h2>
 <li><strong>wa_after_fronted_scripts</strong> runs after plugin has registered all its scripts and styles (passes complete options array as argument)</li>
 <li><strong>wa_fronted_save</strong> runs after regular save function (passes $data as argument)</li>
 <li><strong>wa_fronted_autosave</strong> runs after regular autosave function (passes $data as argument)</li>
+<li><strong>wa_fronted_toolbar</strong> runs when bottom toolbar renders (before ending </div>) (passes complete options array as argument)</li>
 </ul>
 <p><em>I&#39;ll try to add hooks where I see it could be useful, but if you are missing one, please post an issue requesting it</em></p>
 <h2 id="filters">Filters</h2>
@@ -91,17 +94,23 @@ <h2 id="supported-acf-field-types">Supported ACF field types</h2>
 <li>Image</li>
 <li>File</li>
 </ul>
-<h2 id="pending-features">Pending features</h2>
+<h2 id="features">Features</h2>
 <blockquote>
-<p>These are features that are planned to be implemented in the near future (in no particular order)</p>
+<p>Unchecked boxes are features that are planned to be implemented in the near future (in no particular order)</p>
 </blockquote>
 <ul>
-<li>[ ] Ability to edit featured image</li>
-<li>[ ] Show unsaved changes warning if leaving page</li>
-<li>[ ] Ability to edit other columns from the posts table (like post_author, post_date and so on)</li>
+<li>[x] Automatic changing of image size to load when changing size of image in content</li>
+<li>[x] Gallery shortcode editing</li>
+<li>[x] Advanced Custom Fields support (see supported ACF fields for more details)</li>
+<li>[x] Automatic oEmbed conversion upon paste</li>
+<li>[x] Automatic url to link conversion</li>
+<li>[x] Automatic updates</li>
+<li>[x] Ability to edit featured image</li>
+<li>[x] Show unsaved changes warning if leaving page</li>
+<li>[ ] Ability to edit other columns from the posts table (like post_author, post_date, post_status and so on)</li>
 <li>[ ] Native custom fields support</li>
 <li>[ ] Shortcodes support (other than gallery)</li>
-<li>[ ] Autosave</li>
+<li>[ ] Autosave (need some discussion on how to best implement this)</li>
 <li>[ ] WooCommerce support (other than standard WP-fields)</li>
 <li>[ ] Image upload by dropping an image into the editable area</li>
 <li>[ ] Drag image to move it within the editable area</li>
@@ -110,23 +119,25 @@ <h2 id="pending-features">Pending features</h2>
 <li>[ ] Choice-based fields like dropdown-select (click on content to show dropdown and select option to insert)</li>
 <li>[ ] More ACF fields support</li>
 <li>[ ] Smarter outputting of value (like if it&#39;s an image field and has no output options, determine by itself)</li>
-<li>[ ] Enable editing from archives/blog home</li>
 <li>[ ] Post revisions</li>
 <li>[ ] Edit taxonomies (and native tags and categories)</li>
-<li>[ ] Make it possible to create new posts from frontend</li>
 <li>[ ] How-to guide for integration and extensions</li>
-<li>[x] oEmbed support in wysiwyg</li>
-<li>[x] Updates</li>
-<li>[x] Automatic updates</li>
+<li>[ ] Translation</li>
+<li>[ ] Mirror style of current WP admin theme</li>
 </ul>
 <h2 id="proposed-features">Proposed features</h2>
 <blockquote>
 <p>These features requires further discussion, not yet set to be implemented</p>
 </blockquote>
 <ul>
-<li>[ ] Spellchecking and wordsuggestion, autocorrection</li>
+<li>[ ] Enhance UX by visualizing which area you are editing</li>
+<li>[ ] Make it possible to create new posts from frontend</li>
+<li>[ ] Change common ajax functions to make use of WP Rest API instead (when implemented into core)</li>
+<li>[ ] Spellchecking and word suggestion, auto correction</li>
 <li>[ ] Ability to update widget contents</li>
-<li>[ ] Column-maker</li>
+<li>[ ] Editing from archives/blog home</li>
+<li>[ ] Markdown parser</li>
+<li>[ ] Column-maker (made as an add-on?)</li>
 </ul>
 <h2 id="collaboration-notes">Collaboration notes</h2>
 <ul>

README.md

@@ -12,6 +12,7 @@ Frontend editor for WordPress, an experiment with a goal to enhance usability an
 ![](https://github.com/jesperbjerke/wa-fronted/blob/master/screenshots/screenshot-2.jpg)
 ![](https://github.com/jesperbjerke/wa-fronted/blob/master/screenshots/screenshot-3.jpg)
 
+##Configuration
 To enable an editable area, simply add a filter function to 'wa_fronted_options' that passes and returns a multidimensional array. Note that both themes and plugins can call this filter before or after eachother and build upon or replace options.
 
 The first level of the array consists of the key "defaults" (optional) and "post_types". In "defaults", specify whatever you want to be set as default when you have not set anything else in that specific area. In "post_types" you create an array for each post type you want to enable frontend editing for (you can also use 'front_page' if you just want to target your static front page). Inside, you set "editable_areas" with an array with options for each editable area on this post type.
@@ -57,12 +58,13 @@ add_filter('wa_fronted_options', 'my_editor_options');
 
 ## Options
 * **container** (required, string): selector of wrapping element of what you want to edit. Can be any valid jQuery selector string
-* **field_type** (required, string): `post_content`, `post_title`, `acf_{FIELD ID}` / `acf_sub_{SUBFIELD ID}` (if set and **toolbar** is not specified, **toolbar** will set itself based on what field it is)
+* **field_type** (required, string): `post_content`, `post_title`, `post_thumbnail` (note that if you don't use the_post_thumbnail() function, the image has to have the class 'attachment-post-thumbnail'), `acf_{FIELD ID}` / `acf_sub_{SUBFIELD ID}` (if set and **toolbar** is not specified, **toolbar** will set itself based on what field it is)
 * **permission** (optional, string): `logged-in` (enable to all logged in users), `default` (default, enabled if user has capability *edit_posts*), `{USER ROLE}` (enable to specific user role)
 * **post_id** (optional, int): Insert post id to override the `global $post` variable. If used in combination with `acf_{FIELD ID}`, note that it can also be set to *options / taxonomies / users / etc*
 * **toolbar** (optional, mixed bool/string): `full` (default, all buttons), `false` (do not show toolbar), `comma-separated string` (bold, italic, underline, anchor, header1, header2, quote, unorderedlist, orderedlist, justifyLeft, justifyCenter, justifyRight)
 * **media_upload** (optional, mixed bool/string): `true` (default, will allow user to insert/upload media to the editable area), `false` (disable media upload), `only` (constrain the editable area to only edit media. ie; no text, no toolbar)
-* **output** (optional, string): *only applies to ACF fields with complex output* value to retrieve from get_field() to output as a dot separated string representing the traversing of value array, ie. for an image field that should output the thumbnail: "sizes.thumbnail".
+* **image_size** (optional, string): any registered image size *(only applicable if **field_type** is set and you want another image size than WP default, which is 'post-thumbnail')*
+* **output** (optional, string): alue to retrieve from get_field() to output as a dot separated string representing the traversing of value array, ie. for an image field that should output the thumbnail: "sizes.thumbnail" *(only applicable to ACF fields with complex output)*
 * **output_to** (optional, array): *if not specified, the returned data after save will be put directly into the container element* 
 ```php
 array(
@@ -77,6 +79,7 @@ array(
 * **wa_after_fronted_scripts** runs after plugin has registered all its scripts and styles (passes complete options array as argument)
 * **wa_fronted_save** runs after regular save function (passes $data as argument)
 * **wa_fronted_autosave** runs after regular autosave function (passes $data as argument)
+* **wa_fronted_toolbar** runs when bottom toolbar renders (before ending </div>) (passes complete options array as argument)
 
 *I'll try to add hooks where I see it could be useful, but if you are missing one, please post an issue requesting it*
 
@@ -99,15 +102,21 @@ array(
 * Image
 * File
 
-##Pending features
-> These are features that are planned to be implemented in the near future (in no particular order)
+##Features
+> Unchecked boxes are features that are planned to be implemented in the near future (in no particular order)
 
-* [ ] Ability to edit featured image
-* [ ] Show unsaved changes warning if leaving page
-* [ ] Ability to edit other columns from the posts table (like post_author, post_date and so on)
+* [x] Automatic changing of image size to load when changing size of image in content
+* [x] Gallery shortcode editing
+* [x] Advanced Custom Fields support (see supported ACF fields for more details)
+* [x] Automatic oEmbed conversion upon paste
+* [x] Automatic url to link conversion
+* [x] Automatic updates
+* [x] Ability to edit featured image
+* [x] Show unsaved changes warning if leaving page
+* [ ] Ability to edit other columns from the posts table (like post_author, post_date, post_status and so on)
 * [ ] Native custom fields support
 * [ ] Shortcodes support (other than gallery)
-* [ ] Autosave
+* [ ] Autosave (need some discussion on how to best implement this)
 * [ ] WooCommerce support (other than standard WP-fields)
 * [ ] Image upload by dropping an image into the editable area
 * [ ] Drag image to move it within the editable area
@@ -116,21 +125,23 @@ array(
 * [ ] Choice-based fields like dropdown-select (click on content to show dropdown and select option to insert)
 * [ ] More ACF fields support
 * [ ] Smarter outputting of value (like if it's an image field and has no output options, determine by itself)
-* [ ] Enable editing from archives/blog home
 * [ ] Post revisions
 * [ ] Edit taxonomies (and native tags and categories)
-* [ ] Make it possible to create new posts from frontend
 * [ ] How-to guide for integration and extensions
-* [x] oEmbed support in wysiwyg
-* [x] Updates
-* [x] Automatic updates
+* [ ] Translation
+* [ ] Mirror style of current WP admin theme
 
 ##Proposed features
 > These features requires further discussion, not yet set to be implemented
 
-* [ ] Spellchecking and wordsuggestion, autocorrection
+* [ ] Enhance UX by visualizing which area you are editing
+* [ ] Make it possible to create new posts from frontend
+* [ ] Change common ajax functions to make use of WP Rest API instead (when implemented into core)
+* [ ] Spellchecking and word suggestion, auto correction
 * [ ] Ability to update widget contents
-* [ ] Column-maker
+* [ ] Editing from archives/blog home
+* [ ] Markdown parser
+* [ ] Column-maker (made as an add-on?)
 
 ##Collaboration notes
 * I'm using sass for styling and [PrePros](https://prepros.io/) for compiling (there's a free version if you wanna check it out)

css/style.css

@@ -6484,7 +6484,7 @@ body .ui-tooltip {
   border-radius: 8px;
 }
 
-.medium-editor-toolbar ul li button, .medium-wa-image-upload-action, .edit-acf-field, #wa-fronted-save-toolbar #wa-fronted-save, #acf-dialog #close-acf-dialog {
+.medium-editor-toolbar ul li button, .medium-wa-image-upload-action, .edit-acf-field, #wa-fronted-toolbar > button, #acf-dialog #close-acf-dialog {
   box-shadow: none !important;
   text-shadow: none !important;
   border-radius: 0;
@@ -6499,14 +6499,14 @@ body .ui-tooltip {
 .medium-editor-toolbar ul li button.medium-editor-button-active,
 .medium-editor-button-active.medium-wa-image-upload-action,
 .medium-editor-button-active.edit-acf-field,
-#wa-fronted-save-toolbar .medium-editor-button-active#wa-fronted-save,
+#wa-fronted-toolbar > button.medium-editor-button-active,
 #acf-dialog .medium-editor-button-active#close-acf-dialog,
 .medium-editor-toolbar ul li button.active,
 .active.medium-wa-image-upload-action,
 .active.edit-acf-field,
-#wa-fronted-save-toolbar .active#wa-fronted-save,
+#wa-fronted-toolbar > button.active,
 #acf-dialog .active#close-acf-dialog,
-.medium-editor-toolbar ul li button:hover, .medium-wa-image-upload-action:hover, .edit-acf-field:hover, #wa-fronted-save-toolbar #wa-fronted-save:hover, #acf-dialog #close-acf-dialog:hover {
+.medium-editor-toolbar ul li button:hover, .medium-wa-image-upload-action:hover, .edit-acf-field:hover, #wa-fronted-toolbar > button:hover, #acf-dialog #close-acf-dialog:hover {
   background: #333;
   color: #45bbe6;
 }
@@ -6669,28 +6669,38 @@ body .ui-tooltip {
   box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
 }
 
+.wa-fronted-editor img.wp-post-image,
 .wa-fronted-editor img[class*="wp-image"] {
   cursor: pointer;
 }
 
-#wa-fronted-save-toolbar {
+#wa-fronted-toolbar {
   position: fixed;
   bottom: 0;
   left: 0;
   display: block;
-  background-color: #222;
   width: 100%;
   text-align: center;
-  display: none;
+  font: 400 13px/32px "Open Sans", sans-serif;
 }
 
-#wa-fronted-save-toolbar #wa-fronted-save {
+#wa-fronted-toolbar > button {
+  background-color: #222;
   padding: 5px 10px;
   text-transform: uppercase;
   font-size: 14px;
   line-height: 2;
 }
 
+#wa-fronted-toolbar > button i {
+  vertical-align: middle;
+  margin-top: -5px;
+}
+
+#wa-fronted-toolbar #wa-fronted-save {
+  display: none;
+}
+
 #wa-fronted-spinner {
   position: fixed;
   top: 0;