feat(Components/BlockWysiwyg): add component (#179)

Components/BlockWysiwyg/fields.json

@@ -0,0 +1,17 @@
+{
+  "layout": {
+    "name": "blockWysiwyg",
+    "label": "Block: Wysiwyg",
+    "sub_fields": [
+      {
+        "name": "contentHtml",
+        "label": "Content",
+        "type": "wysiwyg",
+        "delay": 1,
+        "media_upload": 0,
+        "toolbar": "full",
+        "required": 1
+      }
+    ]
+  }
+}

Components/BlockWysiwyg/functions.php

@@ -0,0 +1,9 @@
+<?php
+
+namespace Flynt\Components\BlockWysiwyg;
+
+use Flynt\Features\Components\Component;
+
+add_action('wp_enqueue_scripts', function () {
+    Component::enqueueAssets('BlockWysiwyg');
+});

Components/BlockWysiwyg/howto.md

@@ -0,0 +1,164 @@
+# Developer HowTo´s
+
+### Editor Toolbar
+
+The MCE Buttons that show up by default are specified in the **TinyMce Feature**, in the `mce_buttons` filter.
+
+You can either modify that Feature to modify all the wysiwyg toolbars globally (all over your project), or define a specific configuration for one specific wysiwyg field, by using the `acf/fields/wysiwyg/toolbars` acf filter on your `functions.php` file.
+
+#### To change the Toolbar globally on every TinyMce
+Go to the [TinyMce Feature](../../Features/TinyMce/README.md).
+
+#### To define a specific configuration for one specific Wysiwyg field
+Go to the  component (`Wysiwyg` here) `functions.php` file, and use the `acf/fields/wysiwyg/toolbars` acf filter:
+
+```php
+<?php
+add_filter('acf/fields/wysiwyg/toolbars', function ($toolbars) {
+  $toolbars['myCustomToolbar'] = [];
+  $toolbars['myCustomToolbar'][1] = [
+    'formatselect',
+    'styleselect',
+    'bold',
+    'italic',
+    'underline',
+    'strikethrough',
+    '|',
+    'bullist',
+    'numlist',
+    '|',
+    'outdent',
+    'indent',
+    'blockquote',
+    'hr',
+    '|',
+    'alignleft',
+    'aligncenter',
+    'alignright',
+    'alignjustify',
+    '|',
+    'link',
+    'unlink',
+    '|',
+    'forecolor',
+    'wp_more',
+    'charmap',
+    'spellchecker',
+    'pastetext',
+    'removeformat',
+    '|',
+    'undo',
+    'redo',
+    'wp_help',
+    'fullscreen',
+    'wp_adv', // toogle second bar button
+  ];
+  return $toolbars;
+});
+```
+
+In this example, we create a new toolbar called `myCustomToolbar`. You define which buttons show up. Then you need to specify that toolbar on your Wysiwyg field configuration (fields.json):
+
+```json
+{
+  "name": "contentHTML",
+  "label": "Content",
+  "type": "wysiwyg",
+  "media_upload": 0,
+  "required": 1,
+  "toolbar": "myCustomToolbar"
+}
+```
+
+### Editor Styles
+
+You can also create new **styles**, globally by modifying the [TinyMce Feature](../../Features/TinyMce/README.md).
+
+Unfortunately there is no way to have a stylesheet to a specific acf Wysiwyg field as it is possible for toolbars. So your stylesheet will be applied to all TinyMce instances.
+
+
+## Snippets
+### Default Theme
+
+`fields.json`
+```json
+{
+  "layout": {
+    "name": "blockWysiwyg",
+    "label": "Block Wysiwyg",
+    "sub_fields": [
+      {
+        "name": "settingsTab",
+        "label": "Settings",
+        "type": "tab"
+      },
+      {
+        "name": "theme",
+        "label": "Theme",
+        "type": "select",
+        "choices": {
+          "": "---",
+          "wysiwyg-fullwidth": "Fullwidth",
+          "wysiwyg-narrow": "Narrow"
+        },
+        "default_value": ""
+      }
+    ]
+  }
+}
+```
+
+`index.twig`
+```html
+<div class="blockWysiwyg {{ theme }}"></div>
+```
+
+`style.styl`
+```stylus
+$containerMaxWidth = lookup('$global-layout-containerMaxWidth') || 1140px
+$narrowWidth = lookup('$global-layout-narrowWidth') || 650px
+
+[is='flynt-block-wysiwyg']
+  .blockWysiwyg
+    center($containerMaxWidth, $gutterWidth)
+
+    &-fullwidth
+      center($containerMaxWidth, $gutterWidth)
+
+    &-narrow
+      center($narrowWidth, $gutterWidth)
+```
+
+## Additional Global Default Theme
+
+To add an additional Global Default Theme simply add the following code to the Default Theme solution from above.
+
+`fields.json`
+```json
+{
+  "options": [
+    {
+      "name": "defaultTheme",
+      "label": "Default Theme",
+      "type": "select",
+      "choices": {
+        "": "---",
+        "wysiwyg-fullwidth": "Fullwidth",
+        "wysiwyg-narrow": "Narrow"
+      },
+      "default_value": ""
+    }
+  ]
+}
+```
+
+`functions.php`
+```php
+<?php
+add_filter('Flynt/addComponentData?name=BlockWysiwyg', function ($data) {
+    if (empty($data['theme'])) {
+        $data['theme'] = get_field('defaultTheme', 'options');
+    }
+    return $data;
+});
+```

Components/BlockWysiwyg/index.twig

@@ -0,0 +1,5 @@
+<div is="flynt-block-wysiwyg" class="flyntComponent">
+  <div class="blockWysiwyg">
+    {{ contentHtml }}
+  </div>
+</div>

Components/BlockWysiwyg/readme.md

@@ -0,0 +1,13 @@
+Title: Block Wysiwyg
+
+----
+
+Category: Block
+
+----
+
+Tags: wysiwyg, content, html, dom
+
+----
+
+Text: Content Editor.

Components/BlockWysiwyg/style.styl

@@ -0,0 +1,13 @@
+$rupture.scale = lookup('$global-layout-scale') || (0 576px 768px 992px 1200px)
+$rupture.anti-overlap = lookup('$global-layout-overlap') || -1px
+$gutterWidth = lookup('$global-layout-gutterWidth') || 15px
+$containerMaxWidth = lookup('$global-layout-containerMaxWidth') || 1140px
+
+[is='flynt-block-wysiwyg']
+  *,
+  *:before,
+  *:after
+    box-sizing: border-box
+
+  .blockWysiwyg
+    center($containerMaxWidth, $gutterWidth)

config/fieldGroups/pageComponents.json

@@ -7,7 +7,9 @@
       "label": "Page Components",
       "type": "flexible_content",
       "button_label": "Add Component",
-      "layouts": []
+      "layouts": [
+        "Flynt/Components/BlockWysiwyg/Fields/Layout"
+      ]
     }
   ],
   "location": [