Merge pull request #14228 from craftcms/feature/cms-1245-quick-post-c…

…reate-entries-via-slideout

Create entries via slideouts with Quick Post

CHANGELOG-WIP.md

@@ -11,6 +11,7 @@
 - Assets’ Alternative Text fields are now translatable. ([#11576](https://github.com/craftcms/cms/issues/11576))
 - Entries can now have multiple authors. ([#12380](https://github.com/craftcms/cms/pull/12380))
 - Entry chips, cards, and blocks are now tinted according to their entry type’s color. ([#14187](https://github.com/craftcms/cms/pull/14187))
+- Quick Post widgets now create entries via slideouts. ([#14228](https://github.com/craftcms/cms/pull/14228))
 - The “Save as a new entry” action is now available to all users with the “Create entries” permission, and will create a new unpublished draft rather than a fully-saved entry. ([#9577](https://github.com/craftcms/cms/issues/9577), [#10244](https://github.com/craftcms/cms/discussions/10244))
 - Entry conditions can now have a “Matrix field” rule. ([#13794](https://github.com/craftcms/cms/discussions/13794))
 - Money field condition rules now use money inputs. ([#14148](https://github.com/craftcms/cms/pull/14148))

CHANGELOG.md

@@ -9,6 +9,7 @@
 - Improved the accessibility of Matrix fields with the “inline-editable blocks” view mode. ([#14187](https://github.com/craftcms/cms/pull/14187))
 - Added the “Color” entry type setting. ([#14187](https://github.com/craftcms/cms/pull/14187))
 - Entry chips, cards, and blocks are now tinted according to their entry type’s color. ([#14187](https://github.com/craftcms/cms/pull/14187))
+- Quick Post widgets now create entries via slideouts. ([#14228](https://github.com/craftcms/cms/pull/14228))
 - The Fields and Entry Types index pages now have a search bar. ([#13961](https://github.com/craftcms/cms/discussions/13961), [#14126](https://github.com/craftcms/cms/pull/14126))
 - Disclosure menu items and custom select options can now have a `color` key.
 - Added the `customSelect()` global function for control panel templates.

src/base/Element.php

@@ -2372,6 +2372,7 @@ public function attributes(): array
         );
 
         $names['canonicalId'] = true;
+        $names['cpEditUrl'] = true;
         $names['isDraft'] = true;
         $names['isRevision'] = true;
         $names['isUnpublishedDraft'] = true;

src/templates/_components/widgets/QuickPost/settings.twig

@@ -10,7 +10,7 @@
                 <div class="select">
                     <select id="site-id" name="siteId">
                         {% for site in editableSites %}
-                            <option value="{{ site.id }}"{% if site.id == widget.siteId %} selected{% endif %}>{{ site.name|t('site') }}</option>
+                            <option value="{{ site.id }}"{% if site.id == siteId %} selected{% endif %}>{{ site.name|t('site') }}</option>
                         {% endfor %}
                     </select>
                 </div>
@@ -33,15 +33,13 @@
         id: 'section',
         name: 'section',
         options: sectionOptions,
-        value: widget.section,
+        value: sectionId,
         toggle: true,
         targetPrefix: 'section'
     }) }}
 
-    {% set selectedSectionId = widget.section %}
-
     {% for section in sections %}
-        {% set showSection = ((not selectedSectionId and loop.first) or selectedSectionId == section.id) %}
+        {% set showSection = ((not sectionId and loop.first) or sectionId == section.id) %}
         <div id="section{{ section.id }}"{% if not showSection %} class="hidden"{% endif %}>
 
             {% set entryTypeOptions = [] %}
@@ -50,39 +48,19 @@
             {% endfor %}
 
             {% if entryTypeOptions|length == 1 %}
-                {{ hiddenInput("sections[#{section.id}][entryType]", widget.entryType) }}
+                {{ hiddenInput("sections[#{section.id}][entryType]", entryTypeId) }}
             {% else %}
                 {{ forms.selectField({
                     label: "Entry Type"|t('app'),
                     instructions: "Which type of entries do you want to create?"|t('app'),
                     id: 'entryType',
                     name: 'sections['~section.id~'][entryType]',
                     options: entryTypeOptions,
-                    value: widget.entryType,
+                    value: entryTypeId,
                     toggle: true,
                     targetPrefix: 'section'~section.id~'-type'
                 }) }}
             {% endif %}
-
-            {% set entryTypes = section.getEntryTypes() %}
-            {% for entryType in entryTypes %}
-                {% set showEntryType = (((not showSection or not widget.entryType) and loop.first) or widget.entryType == entryType.id or entryTypes|length == 1) %}
-                {% set fieldOptions = (fieldsByEntryTypeId[entryType.id] ?? [])|map(layoutElement => {
-                    label: raw(layoutElement.getField().name|e ~ (layoutElement.required ? '<span class="required"></span>')),
-                    name: 'sections['~section.id~'][fields][]',
-                    value: layoutElement.getField().id,
-                    checked: (layoutElement.required or layoutElement.getField().id in widget.fields),
-                    disabled: layoutElement.required
-                }) %}
-
-                <div id="section{{ section.id }}-type{{ entryType.id }}"{% if not showEntryType %} class="hidden"{% endif %}>
-                    {{ forms.checkboxGroupField({
-                        label: "Fields"|t('app'),
-                        instructions: "Which fields should be visible in the widget?"|t('app'),
-                        options: fieldOptions,
-                    }) }}
-                </div>
-            {% endfor %}
         </div>
     {% endfor %}
 

src/translations/en/app.php

@@ -438,6 +438,7 @@
     'Create a new tag group' => 'Create a new tag group',
     'Create a new user group' => 'Create a new user group',
     'Create a new volume…' => 'Create a new volume…',
+    'Create a new {section} entry' => 'Create a new {section} entry',
     'Create a new {type} after' => 'Create a new {type} after',
     'Create a new {type} before' => 'Create a new {type} before',
     'Create a new {type}' => 'Create a new {type}',
@@ -1159,7 +1160,6 @@
     'Position' => 'Position',
     'Post Date' => 'Post Date',
     'Post Town' => 'Post Town',
-    'Post a new {section} entry' => 'Post a new {section} entry',
     'Post on GitHub' => 'Post on GitHub',
     'Postal Code' => 'Postal Code',
     'Powered by Craft CMS' => 'Powered by Craft CMS',
@@ -1929,6 +1929,7 @@
     'Your system isn’t set up to save content for the site “{site}”.' => 'Your system isn’t set up to save content for the site “{site}”.',
     'Your {folder} folder isn’t writable.' => 'Your {folder} folder isn’t writable.',
     'You’re all up to date!' => 'You’re all up to date!',
+    'You’re not permitted to edit any of this section’s sites.' => 'You’re not permitted to edit any of this section’s sites.',
     'You’re viewing a revision. None of the {type}’s fields are editable.' => 'You’re viewing a revision. None of the {type}’s fields are editable.',
     'Zip Code' => 'Zip Code',
     '`sectionId` and `fieldId` cannot both be set on an entry.' => '`sectionId` and `fieldId` cannot both be set on an entry.',

src/web/assets/cp/src/css/_main.scss

@@ -175,6 +175,94 @@ fieldset:last-child,
   margin-bottom: var(--xl) !important;
 }
 
+.ml-0 {
+  margin-left: 0 !important;
+}
+.ml-xs {
+  margin-left: var(--xs) !important;
+}
+.ml-s {
+  margin-left: var(--s) !important;
+}
+.ml-m {
+  margin-left: var(--m) !important;
+}
+.ml-l {
+  margin-left: var(--l) !important;
+}
+.ml-xl {
+  margin-left: var(--xl) !important;
+}
+
+.mr-0 {
+  margin-right: 0 !important;
+}
+.mr-xs {
+  margin-right: var(--xs) !important;
+}
+.mr-s {
+  margin-right: var(--s) !important;
+}
+.mr-m {
+  margin-right: var(--m) !important;
+}
+.mr-l {
+  margin-right: var(--l) !important;
+}
+.mr-xl {
+  margin-right: var(--xl) !important;
+}
+
+.mx-0 {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+.mx-xs {
+  margin-left: var(--xs) !important;
+  margin-right: var(--xs) !important;
+}
+.mx-s {
+  margin-left: var(--s) !important;
+  margin-right: var(--s) !important;
+}
+.mx-m {
+  margin-left: var(--m) !important;
+  margin-right: var(--m) !important;
+}
+.mx-l {
+  margin-left: var(--l) !important;
+  margin-right: var(--l) !important;
+}
+.mx-xl {
+  margin-left: var(--xl) !important;
+  margin-right: var(--xl) !important;
+}
+
+.my-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+.my-xs {
+  margin-top: var(--xs) !important;
+  margin-bottom: var(--xs) !important;
+}
+.my-s {
+  margin-top: var(--s) !important;
+  margin-bottom: var(--s) !important;
+}
+.my-m {
+  margin-top: var(--m) !important;
+  margin-bottom: var(--m) !important;
+}
+.my-l {
+  margin-top: var(--l) !important;
+  margin-bottom: var(--l) !important;
+}
+.my-xl {
+  margin-top: var(--xl) !important;
+  margin-bottom: var(--xl) !important;
+}
+
 .no-scroll {
   overflow: hidden !important;
 }
@@ -1935,6 +2023,13 @@ ul.icons {
   height: 36px;
 }
 
+/* huge buttons */
+.btn.huge {
+  padding: var(--l);
+  line-height: 48px;
+  height: 48px;
+}
+
 /* special buttons */
 .btn {
   &.submit,

src/web/assets/cp/src/js/ElementEditorSlideout.js

@@ -112,6 +112,7 @@ Craft.ElementEditorSlideout = Craft.CpScreenSlideout.extend(
       saveParams: {},
       onSaveElement: null,
       validators: [],
+      expandData: [],
     },
   }
 );

src/web/assets/quickpost/src/QuickPostWidget.js

@@ -3,17 +3,15 @@
   /** global: Garnish */
   Craft.QuickPostWidget = Garnish.Base.extend({
     params: null,
-    initFields: null,
     formHtml: null,
     $widget: null,
     $form: null,
     $saveBtn: null,
     $errorList: null,
     loading: false,
 
-    init: function (widgetId, params, initFields, formHtml) {
+    init: function (widgetId, params, formHtml) {
       this.params = params;
-      this.initFields = initFields;
       this.formHtml = formHtml;
       this.$widget = $('#widget' + widgetId);
 
@@ -24,8 +22,6 @@
       this.$form = $form;
       this.$saveBtn = this.$form.find('button[type=submit]');
 
-      this.initFields();
-
       const $menuBtn = this.$form.find('> .buttons > .btngroup > .menubtn'),
         $saveAndContinueEditingBtn = $menuBtn
           .data('trigger')