Add Checklists gutenberg panel #567

core/Requirement/Base_counter.php

@@ -200,7 +200,6 @@ public function filter_requirements_list($requirements, $post)
             'rule'      => $rule,
             'type'      => $this->type,
             'is_custom' => false,
-            'type'      => $this->type,
             'extra'     => $this->extra,
         ];
 

core/Requirement/Categories_count.php

@@ -61,6 +61,6 @@ public function get_current_status($post, $option_value)
 
         $count = count($categories);
 
-        return ($count >= $option_value[0]) && ($count <= $option_value[1]);
+        return ($count >= $option_value[0]) && ($option_value[1] == 0 || $count <= $option_value[1]);
     }
 }

core/Requirement/External_links.php

@@ -55,7 +55,7 @@ public function get_current_status($post, $option_value)
     {
         $count = count($this->extract_external_links($post->post_content));
 
-        return ($count >= $option_value[0]) && ($count <= $option_value[1]);
+        return ($count >= $option_value[0]) && ($option_value[1] == 0 || $count <= $option_value[1]);
     }
 
     /**

core/Requirement/Filled_excerpt.php

@@ -55,6 +55,6 @@ public function get_current_status($post, $option_value)
     {
         $count = strlen(trim(get_the_excerpt($post)));
 
-        return ($count >= $option_value[0]) && ($count <= $option_value[1]);
+        return ($count >= $option_value[0]) && ($option_value[1] == 0 || $count <= $option_value[1]);
     }
 }

core/Requirement/Internal_links.php

@@ -58,7 +58,7 @@ public function get_current_status($post, $option_value)
     {
         $count = count($this->extract_internal_links($post->post_content));
 
-        return ($count >= $option_value[0]) && ($count <= $option_value[1]);
+        return ($count >= $option_value[0]) && ($option_value[1] == 0 || $count <= $option_value[1]);
     }
 
     /**

core/Requirement/Tags_count.php

@@ -61,6 +61,6 @@ public function get_current_status($post, $option_value)
 
         $count = count($tags);
 
-        return ($count >= $option_value[0]) && ($count <= $option_value[1]);
+        return ($count >= $option_value[0]) && ($option_value[1] == 0 || $count <= $option_value[1]);
     }
 }

core/Requirement/Taxonomies_count.php

@@ -64,7 +64,7 @@ public function get_current_status($post, $option_value)
 
         $count = count($terms);
 
-        return ($count >= $option_value[0]) && ($count <= $option_value[1]);
+        return ($count >= $option_value[0]) && ($option_value[1] == 0 || $count <= $option_value[1]);
     }
 
     /**

core/Requirement/Title_count.php

@@ -53,6 +53,6 @@ public function get_current_status($post, $option_value)
     {
         $count = strlen(trim($post->post_title));
 
-        return ($count >= $option_value[0]) && ($count <= $option_value[1]);
+        return ($count >= $option_value[0]) && ($option_value[1] == 0 || $count <= $option_value[1]);
     }
 }

core/Requirement/Words_count.php

@@ -53,8 +53,8 @@ public function init_language()
      */
     public function get_current_status($post, $option_value)
     {
-        $count = str_word_count($post->post_content);
+        $count = str_word_count(strip_tags($post->post_content));
 
-        return ($count >= $option_value[0]) && ($count <= $option_value[1]);
+        return ($count >= $option_value[0]) && ($option_value[1] == 0 || $count <= $option_value[1]);
     }
 }

lib/vendor/composer/installed.php

@@ -5,7 +5,7 @@
         'type' => 'library',
         'install_path' => __DIR__ . '/../../',
         'aliases' => array(),
-        'reference' => '737870b78bd80326a02bda03492548087e4b4a2c',
+        'reference' => '5b82f8af8ec4b0e6084a854062031b06dfe40ffa',
         'name' => '__root__',
         'dev' => true,
     ),
@@ -16,7 +16,7 @@
             'type' => 'library',
             'install_path' => __DIR__ . '/../../',
             'aliases' => array(),
-            'reference' => '737870b78bd80326a02bda03492548087e4b4a2c',
+            'reference' => '5b82f8af8ec4b0e6084a854062031b06dfe40ffa',
             'dev_requirement' => false,
         ),
         'publishpress/instance-protection' => array(

modules/checklists/assets/css/post-editor-checklists.css

@@ -27,15 +27,47 @@
 
 /* Warning icon in the Publish button */
 body.ppch-show-publishing-warning-icon #publishing-action, /* Classic Editor */
-body.ppch-show-publishing-warning-icon .editor-post-publish-button,
-body.ppch-show-publishing-warning-icon .editor-post-publish-button__button {
+.pp-checklists-toolbar-icon {
     position: relative;
     overflow: visible;
 }
 
+.pp-checklists-toolbar-icon:after {
+    font-family: dashicons;
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    line-height: 23px;
+    width: 23px;
+    height: 23px;
+    font-size: 18px;
+    content: "\f147";
+    background-color: #66bb6a;
+    color: #ffede8;
+    font-weight: bold;
+    border: 1px solid white;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    border-radius: 50px;
+    text-shadow: none;
+    text-align: center;
+    transition: background-color 500ms, font-size 500ms, width 500ms, height 500ms, top 500ms, right 500ms, line-height 500ms;
+}
+
+.pp-checklists-toolbar-icon:hover:after {
+    background: #66bb6a;
+    font-size: 23px;
+    width: 25px;
+    height: 25px;
+    line-height: 25px;
+    top: -11px;
+    right: -11px;
+}
+
 body.ppch-show-publishing-warning-icon #publishing-action:after, /* Classic Editor - the input can't have pseudo-elements since can't have child nodes */
-body.ppch-show-publishing-warning-icon .editor-post-publish-button:after,
-body.ppch-show-publishing-warning-icon .editor-post-publish-button__button:after {
+body.ppch-show-publishing-warning-icon .pp-checklists-toolbar-icon:after {
+    font-family: inherit;
     position: absolute;
     top: -10px;
     right: -10px;
@@ -58,8 +90,7 @@ body.ppch-show-publishing-warning-icon .editor-post-publish-button__button:after
 }
 
 body.ppch-show-publishing-warning-icon #publishing-action:hover:after,
-body.ppch-show-publishing-warning-icon .editor-post-publish-button:hover:after,
-body.ppch-show-publishing-warning-icon .editor-post-publish-button__button:hover:after {
+body.ppch-show-publishing-warning-icon .pp-checklists-toolbar-icon:hover:after {
     background: #ff0000;
     font-size: 23px;
     width: 25px;
@@ -101,3 +132,20 @@ body.ppch-show-publishing-warning-icon .editor-post-publish-button__button:hover
 .pp-checklists-req.pp-checklists-custom-item .status-label {
     padding-left: 1px;
 }
+
+#pp-checklists-sidebar-content .pp-checklists-req.pp-checklists-custom-item .status-label {
+    padding-left: 4px;
+}
+
+.edit-post-layout:not(.show-icon-labels) .interface-pinned-items button.components-button[aria-label='Checklists'] {
+    padding: 6px 0;
+    background: transparent;
+}
+
+.pp-checklists-toolbar-icon {
+    padding: 10px 9px 8px;
+    background: #655997;
+    color: #ffffff;
+    border: 1px solid #a6b2be;
+    border-radius: 2px;
+}

modules/checklists/assets/js/gutenberg-panel.jsx

@@ -0,0 +1,196 @@
+const { registerPlugin } = wp.plugins;
+const { PluginSidebarMoreMenuItem, PluginSidebar } = wp.editPost;
+const { Fragment, Component } = wp.element;
+const { __ } = wp.i18n;
+const { hooks } = wp;
+
+import CheckListIcon from './CheckListIcon.jsx';
+
+class PPChecklistsPanel extends Component {
+    isMounted = false;
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            showRequiredLegend: false,
+            requirements: [],
+            failedRequirements: [],
+        };
+    }
+
+    componentDidMount() {
+        // Bind the arrow function to access 'this' inside subscribe
+        const boundPerformChecksBeforePostUpdate = this.performChecksBeforePostUpdate.bind(this);
+
+        // Subscribe to the data
+        this.unsubscribe = wp.data.subscribe(boundPerformChecksBeforePostUpdate);
+
+        this.isMounted = true;
+        this.updateRequirements(ppChecklists.requirements);
+
+        hooks.addAction('pp-checklists.update-failed-requirements', 'publishpress/checklists', this.updateFailedRequirements.bind(this), 10);
+        hooks.addAction('pp-checklists.requirements-updated', 'publishpress/checklists', this.handleRequirementStatusChange.bind(this), 10);
+    }
+
+    componentWillUnmount() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+
+        hooks.removeAction('pp-checklists.update-failed-requirements', 'publishpress/checklists');
+        hooks.removeAction('pp-checklists.requirements-updated', 'publishpress/checklists');
+
+        this.isMounted = false;
+    }
+
+    /**
+     * Hook to failed requirement to update block requirements.
+     * 
+     * @param {Array} failedRequirements 
+     */
+    updateFailedRequirements(failedRequirements) {
+        if (this.isMounted) {
+            this.setState({ failedRequirements: failedRequirements });
+        }
+    };
+
+    /**
+     * Handle requirement status change
+     */
+    handleRequirementStatusChange = () => {
+        this.updateRequirements(this.state.requirements);
+    };
+
+    /**
+     * Update sidebar requirements
+     * 
+     * @param {Array} Requirements 
+     */
+    updateRequirements = (Requirements) => {
+        if (this.isMounted) {
+            const showRequiredLegend = Object.values(Requirements).some((req) => req.rule === 'block');
+
+            const updatedRequirements = Object.entries(Requirements).map(([key, req]) => {
+                const id = req.id || key;
+                const element = document.querySelector(`#ppch_item_${id}`);
+
+                if (element) {
+                    req.status = element.value == 'yes' ? true : false;
+                }
+                req.id = id;
+
+                return req;
+            });
+
+            this.setState({ showRequiredLegend, requirements: updatedRequirements });
+        }
+    };
+
+    /**
+     * Add a method to perform checks before updating
+     */
+    performChecksBeforePostUpdate = () => {
+        var editor = wp.data.dispatch('core/editor');
+        var notices = wp.data.dispatch('core/notices');
+        var savePost = editor.savePost;
+
+        /**
+         * Our less problematic solution till gutenberg Add a way 
+         * for third parties to perform additional save validation 
+         * in https://github.com/WordPress/gutenberg/issues/13413
+         * is this issue as it also solves third party conflict with
+         * locking post (Rankmath, Yoast SEO etc)
+         */
+        editor.savePost = function () {
+            notices.removeNotices('publishpress-checklists-validation');
+
+            if (typeof this.state.failedRequirements.block === "undefined" || this.state.failedRequirements.block.length === 0) {
+                savePost();
+            } else {
+                wp.data.dispatch('core/edit-post').closePublishSidebar();
+                notices.createErrorNotice(__("Please complete the required(*) checklists task.", "publishpress-checklists"), {
+                    id: 'publishpress-checklists-validation',
+                    isDismissible: true
+                });
+                wp.data.dispatch('core/edit-post').openGeneralSidebar('publishpress-checklists-panel/checklists-sidebar');
+            }
+        }.bind(this);
+    };
+
+    render() {
+        const { showRequiredLegend, requirements } = this.state;
+
+        return (
+            <Fragment>
+                <PluginSidebarMoreMenuItem
+                    target="checklists-sidebar"
+                    icon={<CheckListIcon />}
+                >
+                    {__("Checklists", "publishpress-checklists")}
+                </PluginSidebarMoreMenuItem>
+                <PluginSidebar
+                    name="checklists-sidebar"
+                    title={__("Checklists", "publishpress-checklists")}
+                >
+                    <div id="pp-checklists-sidebar-content" className="components-panel__body is-opened">
+                        <ul id="pp-checklists-sidebar-req-box">
+                            {requirements.length === 0 ? (
+                                <p>
+                                    <em>
+                                        {ppChecklists.empty_checklist_message}
+                                    </em>
+                                </p>
+                            ) : (
+                                requirements.map((req, key) => (
+                                    <li
+                                        key={`pp-checklists-req-panel-${key}`}
+                                        className={`pp-checklists-req panel-req pp-checklists-${req.rule} status-${req.status ? 'yes' : 'no'} ${req.is_custom ? 'pp-checklists-custom-item' : ''
+                                            }`}
+                                        data-id={key}
+                                        data-type={req.type}
+                                        data-extra={req.extra || ''}
+                                        onClick={() => {
+                                            if (req.is_custom) {
+                                                const element = document.querySelector(`#pp-checklists-req-${req.id}` + ' .status-label');
+                                                if (element) {
+                                                    element.click();
+                                                }
+                                            }
+                                        }}
+                                    >
+                                        {req.is_custom ? (
+                                            <input type="hidden" name={`_PPCH_custom_item[${req.id}]`} value={req.status ? 'yes' : 'no'} />
+                                        ) : null}
+                                        <div className={`status-icon dashicons ${req.is_custom ? (req.status ? 'dashicons-yes' : '') : (req.status ? 'dashicons-yes' : 'dashicons-no')}`}></div>
+                                        <div className="status-label">
+                                            {req.label}
+                                            {req.rule === 'block' ? (
+                                                <span className="required">*</span>
+                                            ) : null}
+                                        </div>
+                                    </li>
+                                ))
+                            )}
+                        </ul>
+                        {showRequiredLegend ? (
+                            <em>
+                                (*) {__("required", "publishpress-checklists")}
+                            </em>
+                        ) : null}
+                    </div>
+                </PluginSidebar>
+            </Fragment>
+        );
+    }
+}
+
+const ChecklistsTitle = () => (
+    <div className="pp-checklists-toolbar-icon">
+        Checklists {/* Don't translate, the text is been used in CSS */}
+    </div>
+);
+
+registerPlugin("publishpress-checklists-panel", {
+    render: PPChecklistsPanel,
+    icon: <ChecklistsTitle />,
+});