Changeset 2174452

Timestamp:

10/16/2019 06:22:49 PM (6 years ago)

Author:

iseulde

Message:

v0.0.4

Location:

slide/trunk

Files:

• index.css (modified) (1 diff)
• index.js (modified) (9 diffs)
• index.php (modified) (3 diffs)
• readme.md (modified) (1 diff)
• template.php (modified) (1 diff)

slide/trunk/index.css

@@ -69 +69 @@
 }
 
+.wp-block-slide-slide__background {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
 .wp-block-slide-slide .fragment {
     opacity: 0.5;

slide/trunk/index.js

@@ -8 +8 @@
   editPost,
   data,
-  components
+  components,
+  blockEditor
 }) => {
   const { __ } = i18n;
   const { registerBlockType, createBlock } = blocks;
-  const { InnerBlocks, InspectorControls, RichTextToolbarButton } = editor;
+  const { RichTextToolbarButton } = editor;
   const { createElement: e, Fragment } = element;
   const { registerFormatType, toggleFormat } = richText;
@@ -18 +19 @@
   const { PluginDocumentSettingPanel } = editPost;
   const { useSelect, useDispatch, subscribe, select, dispatch } = data;
-  const { TextareaControl, ColorPicker, PanelBody, RangeControl, TextControl, SelectControl, ToggleControl } = components;
+  const { TextareaControl, ColorPicker, PanelBody, RangeControl, TextControl, SelectControl, ToggleControl, Button, FocalPointPicker } = components;
+  const { MediaUpload, __experimentalGradientPickerControl, InnerBlocks, InspectorControls } = blockEditor;
   const colorKey = 'presentation-color';
   const bgColorKey = 'presentation-background-color';
@@ -101 +103 @@
             icon: 'art'
           },
+          e(__experimentalGradientPickerControl, {
+            onChange: (value) => updateMeta(value, bgColorKey),
+            value: meta[bgColorKey]
+          }),
           e(ColorPicker, {
             disableAlpha: true,
@@ -175 +181 @@
   });
 
+  const ALLOWED_MEDIA_TYPES = ['image'];
+
   registerBlockType('slide/slide', {
     title: __('Slide', 'slide'),
@@ -184 +192 @@
         type: 'string'
       },
+      color: {
+        type: 'string'
+      },
       backgroundColor: {
+        type: 'string'
+      },
+      backgroundId: {
+        type: 'string'
+      },
+      backgroundUrl: {
+        type: 'string'
+      },
+      focalPoint: {
+        type: 'object'
+      },
+      backgroundOpacity: {
         type: 'string'
       }
@@ -197 +220 @@
           e(
             PanelBody,
-            { title: __('Slide Notes', 'slide') },
+            {
+              title: __('Slide Notes', 'slide'),
+              icon: 'edit',
+              initialOpen: false
+            },
             e(TextareaControl, {
               label: __('Anything you want to remember.', 'slide'),
@@ -206 +233 @@
           e(
             PanelBody,
-            { title: __('Background', 'slide') },
+            {
+              title: __('Font', 'slide'),
+              icon: 'text',
+              initialOpen: false
+            },
+            e(ColorPicker, {
+              disableAlpha: true,
+              label: __('Color', 'slide'),
+              color: attributes.color,
+              onChangeComplete: ({ hex: color }) =>
+                setAttributes({ color })
+            })
+          ),
+          e(
+            PanelBody,
+            {
+              title: __('Background Color', 'slide'),
+              icon: 'art',
+              initialOpen: false
+            },
             e(ColorPicker, {
               disableAlpha: true,
@@ -213 +259 @@
               onChangeComplete: ({ hex: backgroundColor }) =>
                 setAttributes({ backgroundColor })
+            }),
+            !!attributes.backgroundUrl && e(RangeControl, {
+              label: __('Opacity', 'slide'),
+              value: 100 - parseInt(attributes.backgroundOpacity, 10),
+              min: 0,
+              max: 100,
+              onChange: (value) => setAttributes({
+                backgroundOpacity: 100 - value + ''
+              })
+            })
+          ),
+          e(
+            PanelBody,
+            {
+              title: __('Background Image', 'slide'),
+              icon: 'format-image',
+              initialOpen: false
+            },
+            e(MediaUpload, {
+              onSelect: (media) => {
+                if (!media || !media.url) {
+                  setAttributes({
+                    backgroundUrl: undefined,
+                    backgroundId: undefined,
+                    backgroundPosition: undefined,
+                    backgroundOpacity: undefined
+                  });
+                  return;
+                }
+
+                setAttributes({
+                  backgroundUrl: media.url,
+                  backgroundId: media.id
+                });
+              },
+              allowedTypes: ALLOWED_MEDIA_TYPES,
+              value: attributes.backgroundId,
+              render: ({ open }) => e(Button, {
+                isDefault: true,
+                onClick: open
+              }, attributes.backgroundUrl ? __('Change') : __('Add Background Image'))
+            }),
+            ' ',
+            !!attributes.backgroundUrl && e(Button, {
+              isDefault: true,
+              onClick: () => {
+                setAttributes({
+                  backgroundUrl: undefined,
+                  backgroundId: undefined,
+                  backgroundPosition: undefined,
+                  backgroundOpacity: undefined
+                });
+              }
+            }, __('Remove')),
+            e('br'), e('br'),
+            !!attributes.backgroundUrl && e(FocalPointPicker, {
+              label: __('Focal Point Picker'),
+              url: attributes.backgroundUrl,
+              value: attributes.focalPoint,
+              onChange: (focalPoint) => setAttributes({ focalPoint })
+            }),
+            !!attributes.backgroundUrl && e(RangeControl, {
+              label: __('Opacity', 'slide'),
+              value: parseInt(attributes.backgroundOpacity, 10),
+              min: 0,
+              max: 100,
+              onChange: (value) => setAttributes({
+                backgroundOpacity: value + ''
+              })
             })
           )
@@ -221 +336 @@
             className,
             style: {
-              backgroundColor: attributes.backgroundColor
+              color: attributes.color || undefined,
+              backgroundColor: attributes.backgroundColor || undefined
             }
           },
+          e(
+            'div',
+            {
+              className: 'wp-block-slide-slide__background',
+              style: {
+                backgroundImage: attributes.backgroundUrl ? `url("${attributes.backgroundUrl}")` : undefined,
+                backgroundSize: 'cover',
+                backgroundPosition: attributes.focalPoint ? `${attributes.focalPoint.x * 100}% ${attributes.focalPoint.y * 100}%` : '50% 50%',
+                opacity: attributes.backgroundOpacity ? attributes.backgroundOpacity / 100 : undefined
+              }
+            }
+          ),
           e(InnerBlocks)
         )
       ),
-    save: ({ attributes }) =>
-      e(
-        'section',
-        {
-          'data-background-color': attributes.backgroundColor
+    save: ({ attributes }) => e(
+      'section',
+      {
+        style: {
+          color: attributes.color || undefined
         },
-        e(InnerBlocks.Content)
-      )
+        'data-background-color': attributes.backgroundColor || undefined,
+        'data-background-image': attributes.backgroundUrl ? attributes.backgroundUrl : undefined,
+        'data-background-position': attributes.focalPoint ? `${attributes.focalPoint.x * 100}% ${attributes.focalPoint.y * 100}%` : undefined,
+        'data-background-opacity': attributes.backgroundOpacity ? attributes.backgroundOpacity / 100 : undefined
+      },
+      e(InnerBlocks.Content)
+    )
   });
 

slide/trunk/index.php

@@ -5 +5 @@
  * Plugin URI:  https://wordpress.org/plugins/slide/
  * Description: Allows you to create presentations with the block editor.
- * Version:     0.0.3
+ * Version:     0.0.4
  * Author:      Ella van Durpe
  * Author URI:  https://ellavandurpe.com
@@ -29 +29 @@
     $data = get_plugin_data( WP_PLUGIN_DIR . '/gutenberg/gutenberg.php' );
 
-    if ( version_compare( $data[ 'Version' ], '6.6' ) === -1 ) {
+    if ( version_compare( $data[ 'Version' ], '6.7' ) === -1 ) {
         ?>
         <div class="notice notice-error is-dismissible">
-            <p><?php _e( '"Slide" needs "Gutenberg" version 6.6. Please update.', 'slide' ); ?></p>
+            <p><?php _e( '"Slide" needs "Gutenberg" version 6.7. Please update.', 'slide' ); ?></p>
         </div>
         <?php
@@ -56 +56 @@
             'wp-data',
             'wp-components',
+            'wp-block-editor',
         ),
         filemtime( dirname( __FILE__ ) . '/index.js' ),

slide/trunk/readme.md

@@ -5 +5 @@
     Requires at least: 5.2
     Requires PHP:      5.6
-    Tested up to:      5.2
-    Stable tag:        0.0.3
+    Tested up to:      5.3
+    Stable tag:        0.0.4
     License:           GPL-2.0-or-later
     License URI:       http://www.gnu.org/licenses/gpl-2.0.html

slide/trunk/template.php

@@ -8 +8 @@
             content: '\f211';
             top: 3px;
-        }
-
-        .dashicons, .dashicons-before:before {
-            font-family: dashicons !important;
-            font-style: normal !important;
-            padding: 10px 30px 10px 0 !important;
-            color: #eb0569;
         }