WordPress.org
Get WordPress

Plugin Directory

Changeset 3408254


Ignore:
Timestamp:
12/02/2025 04:24:32 PM (4 months ago)
Author:
davilera
Message:

Upload new stable version 1.0.6

Location:
nelio-compare-images
Files:
10 added
13 deleted
37 edited
1 copied

Legend:

Unmodified
Added
Removed

  • nelio-compare-images/tags/1.0.6/build/block.json

    r2694346 r3408254  
    11{
    2     "$schema": "https://schemas.wp.org/trunk/block.json",
    3     "apiVersion": 2,
    4     "name": "nelio/compare-images",
    5     "title": "Compare Images",
    6     "category": "common",
    7     "icon": "image-flip-horizontal",
    8     "description": "Compare two images side by side using a slider.",
    9     "keywords": [ "compare", "image" ],
    10     "version": "1.0.0",
    11     "textdomain": "nelio-compare-images",
    12     "attributes": {
    13         "align": {
    14             "type": "string"
    15         },
    16         "beforeId": {
    17             "type": "number"
    18         },
    19         "beforeUrl": {
    20             "type": "string",
    21             "source": "attribute",
    22             "selector": ".wp-block-nelio-compare-images__before-image img",
    23             "attribute": "src"
    24         },
    25         "beforeAlt": {
    26             "type": "string",
    27             "source": "attribute",
    28             "selector": ".wp-block-nelio-compare-images__before-image img",
    29             "attribute": "alt",
    30             "default": ""
    31         },
    32         "afterId": {
    33             "type": "number"
    34         },
    35         "afterUrl": {
    36             "type": "string",
    37             "source": "attribute",
    38             "selector": ".wp-block-nelio-compare-images__after-image img",
    39             "attribute": "src"
    40         },
    41         "afterAlt": {
    42             "type": "string",
    43             "source": "attribute",
    44             "selector": ".wp-block-nelio-compare-images__after-image img",
    45             "attribute": "alt",
    46             "default": ""
    47         },
    48         "dividerLocation": {
    49             "type": "number",
    50             "default": 50
    51         },
    52         "caption": {
    53             "type": "string",
    54             "source": "html",
    55             "selector": "figcaption"
    56         },
    57         "isVertical": {
    58             "type": "boolean",
    59             "default": false
    60         },
    61         "sizeSlug": {
    62             "type": "string"
    63         }
    64     },
    65     "supports": {
    66         "align": [ "left", "center", "right", "wide", "full" ]
    67     },
    68     "viewScript": "file:view.js",
    69     "editorScript": "file:index.js",
    70     "editorStyle": "file:index.css",
    71     "style": "file:style-index.css"
     2  "$schema": "https://schemas.wp.org/trunk/block.json",
     3  "apiVersion": 3,
     4  "name": "nelio/compare-images",
     5  "title": "Compare Images",
     6  "category": "common",
     7  "icon": "image-flip-horizontal",
     8  "description": "Compare two images side by side using a slider.",
     9  "keywords": [
     10    "compare",
     11    "image"
     12  ],
     13  "version": "1.0.0",
     14  "textdomain": "nelio-compare-images",
     15  "attributes": {
     16    "align": {
     17      "type": "string"
     18    },
     19    "beforeId": {
     20      "type": "number"
     21    },
     22    "beforeUrl": {
     23      "type": "string",
     24      "source": "attribute",
     25      "selector": ".wp-block-nelio-compare-images__before-image img",
     26      "attribute": "src"
     27    },
     28    "beforeAlt": {
     29      "type": "string",
     30      "source": "attribute",
     31      "selector": ".wp-block-nelio-compare-images__before-image img",
     32      "attribute": "alt",
     33      "default": ""
     34    },
     35    "afterId": {
     36      "type": "number"
     37    },
     38    "afterUrl": {
     39      "type": "string",
     40      "source": "attribute",
     41      "selector": ".wp-block-nelio-compare-images__after-image img",
     42      "attribute": "src"
     43    },
     44    "afterAlt": {
     45      "type": "string",
     46      "source": "attribute",
     47      "selector": ".wp-block-nelio-compare-images__after-image img",
     48      "attribute": "alt",
     49      "default": ""
     50    },
     51    "dividerLocation": {
     52      "type": "number",
     53      "default": 50
     54    },
     55    "caption": {
     56      "type": "string",
     57      "source": "html",
     58      "selector": "figcaption"
     59    },
     60    "isVertical": {
     61      "type": "boolean",
     62      "default": false
     63    },
     64    "sizeSlug": {
     65      "type": "string"
     66    }
     67  },
     68  "supports": {
     69    "align": [
     70      "left",
     71      "center",
     72      "right",
     73      "wide",
     74      "full"
     75    ]
     76  },
     77  "viewScript": "file:view.js",
     78  "editorScript": "file:index.js",
     79  "editorStyle": "file:index.css",
     80  "style": "file:style-index.css"
    7281}

  • nelio-compare-images/tags/1.0.6/build/index.asset.php

    r2694346 r3408254  
    1 <?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-editor', 'wp-element', 'wp-i18n'), 'version' => 'd3f75c877b48e2d6cd8aba3aac8e05b9');
     1<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '3a1fd7c2afb85be6c207');

  • nelio-compare-images/tags/1.0.6/build/index.css

    r2694346 r3408254  
    1 #editor .wp-block-nelio-compare-images__comparison-wrapper--is-image-missing{display:flex;flex-direction:column}#editor .wp-block-nelio-compare-images__comparison-wrapper--is-image-missing .wp-block-nelio-compare-images__before-image{height:auto;margin-bottom:10px;position:relative}#editor .wp-block-nelio-compare-images__comparison-wrapper--is-image-missing .wp-block-nelio-compare-images__after-image{height:auto;position:relative}#editor .wp-block-nelio-compare-images__divider{cursor:default;opacity:1}#editor .wp-block-nelio-compare-images__handler{display:none}
     1.editor-styles-wrapper .wp-block-nelio-compare-images__comparison-wrapper--is-image-missing{display:flex;flex-direction:column}.editor-styles-wrapper .wp-block-nelio-compare-images__comparison-wrapper--is-image-missing .wp-block-nelio-compare-images__before-image{height:auto;margin-bottom:10px;position:relative}.editor-styles-wrapper .wp-block-nelio-compare-images__comparison-wrapper--is-image-missing .wp-block-nelio-compare-images__after-image{height:auto;position:relative}.editor-styles-wrapper .wp-block-nelio-compare-images__divider{cursor:default;opacity:1}.editor-styles-wrapper .wp-block-nelio-compare-images__handler{display:none}

  • nelio-compare-images/tags/1.0.6/build/index.js

    r2694346 r3408254  
    1 !function(){var e,t={532:function(e,t,a){"use strict";var r=window.wp.blocks,i=JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"nelio/compare-images","title":"Compare Images","category":"common","icon":"image-flip-horizontal","description":"Compare two images side by side using a slider.","keywords":["compare","image"],"version":"1.0.0","textdomain":"nelio-compare-images","attributes":{"align":{"type":"string"},"beforeId":{"type":"number"},"beforeUrl":{"type":"string","source":"attribute","selector":".wp-block-nelio-compare-images__before-image img","attribute":"src"},"beforeAlt":{"type":"string","source":"attribute","selector":".wp-block-nelio-compare-images__before-image img","attribute":"alt","default":""},"afterId":{"type":"number"},"afterUrl":{"type":"string","source":"attribute","selector":".wp-block-nelio-compare-images__after-image img","attribute":"src"},"afterAlt":{"type":"string","source":"attribute","selector":".wp-block-nelio-compare-images__after-image img","attribute":"alt","default":""},"dividerLocation":{"type":"number","default":50},"caption":{"type":"string","source":"html","selector":"figcaption"},"isVertical":{"type":"boolean","default":false},"sizeSlug":{"type":"string"}},"supports":{"align":["left","center","right","wide","full"]},"viewScript":"file:view.js","editorScript":"file:index.js","editorStyle":"file:index.css","style":"file:style-index.css"}'),o=window.wp.element,n=window.wp.blockEditor,l=window.wp.i18n,c=a(184),m=a.n(c),s=window.wp.components,p=window.wp.editor,u=function(e){var t=e.attributes,a=t.afterAlt,r=t.beforeAlt,i=t.dividerLocation,n=e.setAttributes;return o.createElement(p.InspectorControls,null,o.createElement(s.PanelBody,{initialOpen:!0,title:(0,l._x)("Settings","text","nelio-compare-images")},o.createElement(s.RangeControl,{label:(0,l._x)("Divider’s Initial Location","text","nelio-compare-images"),initialPosition:i,value:i,onChange:function(e){return n({dividerLocation:e})},min:1,max:99}),o.createElement(s.TextareaControl,{label:(0,l._x)("Before Image - Alt Text (Alternative Text)","text","nelio-compare-images"),value:r||"",onChange:function(e){return n({beforeAlt:e})}}),o.createElement(s.TextareaControl,{label:(0,l._x)("After Image - Alt Text (Alternative Text)","text","nelio-compare-images"),value:a||"",onChange:function(e){return n({afterAlt:e})},help:o.createElement(o.Fragment,null,o.createElement(s.ExternalLink,{href:"https://www.w3.org/WAI/tutorials/images/decision-tree"},(0,l._x)("Describe the purpose of the images","user","nelio-compare-images")),(0,l._x)("Leave empty if they’re purely decorative.","user","nelio-compare-images"))})))},g=function(e){var t=e.attributes,a=t.isVertical,r=t.beforeId,i=t.afterId,n=e.setAttributes;return o.createElement(p.BlockControls,null,o.createElement(s.Toolbar,null,o.createElement(s.ToolbarButton,{icon:"image-flip-vertical",isPressed:a,onClick:function(){return n({isVertical:!a})},label:(0,l._x)("Vertical Comparison","text","nelio-compare-images")}),!!r&&!!i&&o.createElement(o.Fragment,null,o.createElement(f,{icon:"format-image",value:r,onSelect:function(e,t,a){return n({beforeId:e,beforeUrl:t,beforeAlt:a})},label:(0,l._x)("Change before image…","command","nelio-compare-images")}),o.createElement(f,{icon:"format-gallery",value:i,onSelect:function(e,t,a){return n({afterId:e,afterUrl:t,afterAlt:a})},label:(0,l._x)("Change after image…","command","nelio-compare-images")}))))},f=function(e){var t=e.icon,a=e.label,r=e.onSelect,i=e.value;return o.createElement(p.MediaUploadCheck,null,o.createElement(p.MediaUpload,{onSelect:function(e){var t=e.id,a=e.url,i=e.alt;return r(t,a,i)},allowedTypes:["image"],multiple:!1,value:i,render:function(e){var r=e.open;return o.createElement(s.ToolbarButton,{icon:t,onClick:r,label:a})}}))},d=function(){return d=Object.assign||function(e){for(var t,a=1,r=arguments.length;a<r;a++)for(var i in t=arguments[a])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},d.apply(this,arguments)},b=function(e){var t=e.attributes,a=t.beforeId,r=t.beforeUrl,i=t.afterId,l=t.afterUrl,c=t.isVertical,s=t.dividerLocation,p=t.caption,u=e.className,g=e.isSelected,f=e.setAttributes,b=(0,n.useBlockProps)({className:m()(u,"wp-block-nelio-compare-images")});return o.createElement("div",d({},b),o.createElement("div",{className:m()("wp-block-nelio-compare-images__comparison-wrapper","wp-block-nelio-compare-images__comparison-wrapper--".concat(c?"vertically":"horizontally"),{"wp-block-nelio-compare-images__comparison-wrapper--is-image-missing":!a||!i})},o.createElement(v,{mode:"before",isVertical:c,imageId:a,imageUrl:r,onChange:function(e,t,a){return f({beforeId:e,beforeUrl:t,beforeAlt:a})}}),o.createElement(v,{mode:"after",isVertical:c,dividerLocation:a&&i?s:void 0,imageId:i,imageUrl:l,onChange:function(e,t,a){return f({afterId:e,afterUrl:t,afterAlt:a})}}),!!a&&!!i&&o.createElement(w,{isVertical:c,location:s})),!!a&&!!i&&o.createElement(h,{text:null!=p?p:"",isSelected:g,onChange:function(e){return f({caption:e})}}))},v=function(e){var t=e.mode,a=e.isVertical,r=e.dividerLocation,i=e.imageId,c=e.imageUrl,s=e.onChange;return o.createElement("div",d({className:m()("wp-block-nelio-compare-images__".concat(t,"-image"),"wp-block-nelio-compare-images__".concat(t,"-image--").concat(a?"vertical":"horizontal"))},"after"===t&&{style:{height:a&&void 0!==r?"".concat(100-r,"%"):void 0,width:a||void 0===r?void 0:"".concat(100-r,"%")}}),i?o.createElement("img",{alt:_(t),src:c}):o.createElement(n.MediaPlaceholder,{allowedTypes:["image"],multiple:!1,onSelect:function(e){var t=e.id,a=e.url,r=e.alt;return s(t,a,r)},value:i,labels:{title:_(t),instructions:(0,l._x)("Select an image…","text","nelio-compare-images")}}))},w=function(e){var t=e.isVertical,a=e.location;return o.createElement(o.Fragment,null,o.createElement("div",{className:m()("wp-block-nelio-compare-images__divider","wp-block-nelio-compare-images__divider--".concat(t?"horizontal":"vertical")),style:{top:t?"calc(".concat(a,"% - 0.5em)"):0,left:t?0:"calc(".concat(a,"% - 0.5em)")}}),o.createElement("div",{className:m()("wp-block-nelio-compare-images__handler","wp-block-nelio-compare-images__handler--".concat(t?"horizontal":"vertical")),style:{top:t?"calc(".concat(a,"% - 0.5em)"):void 0,left:t?void 0:"calc(".concat(a,"% - 0.5em)")}}))},h=function(e){var t=e.text,a=e.isSelected,r=e.onChange;return n.RichText.isEmpty(t)&&!a?null:o.createElement(n.RichText,{className:"wp-block-nelio-compare-images__caption",tagName:"figcaption",placeholder:(0,l._x)("Write caption…","user","nelio-compare-images"),value:t,onChange:r,inlineToolbar:!0})},_=function(e){return"before"===e?(0,l._x)("Before Image","text","nelio-compare-images"):(0,l._x)("After Image","text","nelio-compare-images")},y=function(){return y=Object.assign||function(e){for(var t,a=1,r=arguments.length;a<r;a++)for(var i in t=arguments[a])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},y.apply(this,arguments)};(0,r.registerBlockType)(i,{edit:function(e){return o.createElement(o.Fragment,null,e.isSelected&&o.createElement(u,d({},e)),e.isSelected&&o.createElement(g,d({},e)),o.createElement(b,d({},e)))},save:function(e){var t,a=e.attributes,r=a.afterAlt,i=a.afterId,l=a.afterUrl,c=a.align,s=void 0===c?"":c,p=a.beforeAlt,u=a.beforeId,g=a.beforeUrl,f=a.caption,d=void 0===f?"":f,b=a.isVertical,v=a.dividerLocation,w=e.className,h=n.useBlockProps.save({className:m()("wp-block-nelio-compare-images",w,(t={},t["align".concat(s)]=!!s,t))});return o.createElement("figure",y({},h),!!u&&!i&&o.createElement("img",{className:"wp-image-".concat(u),src:g,alt:p}),!u&&!!i&&o.createElement("img",{className:"wp-image-".concat(i),src:l,alt:r}),!!u&&!!i&&o.createElement("div",{className:m()("wp-block-nelio-compare-images__comparison-wrapper","wp-block-nelio-compare-images__comparison-wrapper--".concat(b?"vertically":"horizontally"),{"wp-block-nelio-compare-images__comparison-wrapper--is-image-missing":!u||!i}),"data-position":v,"data-direction":b?"vertical":"horizontal"},o.createElement("div",{className:m()("wp-block-nelio-compare-images__before-image","wp-block-nelio-compare-images__before-image--".concat(b?"vertical":"horizontal"))},o.createElement("img",{className:"wp-image-".concat(u),src:g,alt:p})),o.createElement("div",{className:m()("wp-block-nelio-compare-images__after-image","wp-block-nelio-compare-images__after-image--".concat(b?"vertical":"horizontal")),style:{height:b?"".concat(100-v,"%"):void 0,width:b?void 0:"".concat(100-v,"%")}},o.createElement("img",{className:"wp-image-".concat(i),src:l,alt:r})),o.createElement("div",{className:m()("wp-block-nelio-compare-images__divider","wp-block-nelio-compare-images__divider--".concat(b?"horizontal":"vertical"))}),o.createElement("div",{className:m()("wp-block-nelio-compare-images__handler","wp-block-nelio-compare-images__handler--".concat(b?"horizontal":"vertical"))})),!!u&&!!i&&!n.RichText.isEmpty(d)&&o.createElement(n.RichText.Content,{tagName:"figcaption",className:"wp-block-nelio-compare-images__caption",value:d}))}})},184:function(e,t){var a;!function(){"use strict";var r={}.hasOwnProperty;function i(){for(var e=[],t=0;t<arguments.length;t++){var a=arguments[t];if(a){var o=typeof a;if("string"===o||"number"===o)e.push(a);else if(Array.isArray(a)){if(a.length){var n=i.apply(null,a);n&&e.push(n)}}else if("object"===o)if(a.toString===Object.prototype.toString)for(var l in a)r.call(a,l)&&a[l]&&e.push(l);else e.push(a.toString())}}return e.join(" ")}e.exports?(i.default=i,e.exports=i):void 0===(a=function(){return i}.apply(t,[]))||(e.exports=a)}()}},a={};function r(e){var i=a[e];if(void 0!==i)return i.exports;var o=a[e]={exports:{}};return t[e](o,o.exports,r),o.exports}r.m=t,e=[],r.O=function(t,a,i,o){if(!a){var n=1/0;for(s=0;s<e.length;s++){a=e[s][0],i=e[s][1],o=e[s][2];for(var l=!0,c=0;c<a.length;c++)(!1&o||n>=o)&&Object.keys(r.O).every((function(e){return r.O[e](a[c])}))?a.splice(c--,1):(l=!1,o<n&&(n=o));if(l){e.splice(s--,1);var m=i();void 0!==m&&(t=m)}}return t}o=o||0;for(var s=e.length;s>0&&e[s-1][2]>o;s--)e[s]=e[s-1];e[s]=[a,i,o]},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},r.d=function(e,t){for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},function(){var e={826:0,431:0};r.O.j=function(t){return 0===e[t]};var t=function(t,a){var i,o,n=a[0],l=a[1],c=a[2],m=0;if(n.some((function(t){return 0!==e[t]}))){for(i in l)r.o(l,i)&&(r.m[i]=l[i]);if(c)var s=c(r)}for(t&&t(a);m<n.length;m++)o=n[m],r.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return r.O(s)},a=self.webpackChunknelio_compare_images=self.webpackChunknelio_compare_images||[];a.forEach(t.bind(null,0)),a.push=t.bind(null,a.push.bind(a))}();var i=r.O(void 0,[431],(function(){return r(532)}));i=r.O(i)}();
     1(()=>{"use strict";var e,i={486:()=>{const e=window.wp.blocks,i=JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"nelio/compare-images","title":"Compare Images","category":"common","icon":"image-flip-horizontal","description":"Compare two images side by side using a slider.","keywords":["compare","image"],"version":"1.0.0","textdomain":"nelio-compare-images","attributes":{"align":{"type":"string"},"beforeId":{"type":"number"},"beforeUrl":{"type":"string","source":"attribute","selector":".wp-block-nelio-compare-images__before-image img","attribute":"src"},"beforeAlt":{"type":"string","source":"attribute","selector":".wp-block-nelio-compare-images__before-image img","attribute":"alt","default":""},"afterId":{"type":"number"},"afterUrl":{"type":"string","source":"attribute","selector":".wp-block-nelio-compare-images__after-image img","attribute":"src"},"afterAlt":{"type":"string","source":"attribute","selector":".wp-block-nelio-compare-images__after-image img","attribute":"alt","default":""},"dividerLocation":{"type":"number","default":50},"caption":{"type":"string","source":"html","selector":"figcaption"},"isVertical":{"type":"boolean","default":false},"sizeSlug":{"type":"string"}},"supports":{"align":["left","center","right","wide","full"]},"viewScript":"file:view.js","editorScript":"file:index.js","editorStyle":"file:index.css","style":"file:style-index.css"}'),a=window.ReactJSXRuntime,o=window.wp.blockEditor,t=window.wp.i18n;function r(e){var i,a,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e)){var t=e.length;for(i=0;i<t;i++)e[i]&&(a=r(e[i]))&&(o&&(o+=" "),o+=a)}else for(a in e)e[a]&&(o&&(o+=" "),o+=a);return o}const l=function(){for(var e,i,a=0,o="",t=arguments.length;a<t;a++)(e=arguments[a])&&(i=r(e))&&(o&&(o+=" "),o+=i);return o},s=window.wp.components,n=({attributes:{afterAlt:e,beforeAlt:i,dividerLocation:r},setAttributes:l})=>(0,a.jsx)(o.InspectorControls,{children:(0,a.jsxs)(s.PanelBody,{initialOpen:!0,title:(0,t._x)("Settings","text","nelio-compare-images"),children:[(0,a.jsx)(s.RangeControl,{label:(0,t._x)("Divider’s Initial Location","text","nelio-compare-images"),__nextHasNoMarginBottom:!0,initialPosition:r,value:r,onChange:e=>l({dividerLocation:e}),min:1,max:99}),(0,a.jsx)(s.TextareaControl,{label:(0,t._x)("Before Image - Alt Text (Alternative Text)","text","nelio-compare-images"),__nextHasNoMarginBottom:!0,value:i||"",onChange:e=>l({beforeAlt:e})}),(0,a.jsx)(s.TextareaControl,{label:(0,t._x)("After Image - Alt Text (Alternative Text)","text","nelio-compare-images"),value:e||"",onChange:e=>l({afterAlt:e}),__nextHasNoMarginBottom:!0,help:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(s.ExternalLink,{href:"https://www.w3.org/WAI/tutorials/images/decision-tree",children:(0,t._x)("Describe the purpose of the images","user","nelio-compare-images")}),(0,t._x)("Leave empty if they’re purely decorative.","user","nelio-compare-images")]})})]})}),c=({attributes:{isVertical:e,beforeId:i,afterId:r},setAttributes:l})=>(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(o.BlockControls,{children:(0,a.jsxs)(s.Toolbar,{children:[(0,a.jsx)(s.ToolbarButton,{icon:"image-flip-vertical",isPressed:e,onClick:()=>l({isVertical:!e}),label:(0,t._x)("Vertical Comparison","text","nelio-compare-images")}),!!i&&!!r&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(m,{icon:"format-image",value:i,onSelect:(e,i,a)=>l({beforeId:e,beforeUrl:i,beforeAlt:a}),label:(0,t._x)("Change before image…","command","nelio-compare-images")}),(0,a.jsx)(m,{icon:"format-gallery",value:r,onSelect:(e,i,a)=>l({afterId:e,afterUrl:i,afterAlt:a}),label:(0,t._x)("Change after image…","command","nelio-compare-images")})]})]})})}),m=({icon:e,label:i,onSelect:t,value:r})=>(0,a.jsx)(o.MediaUploadCheck,{children:(0,a.jsx)(o.MediaUpload,{onSelect:({id:e,url:i,alt:a})=>t(e,i,a),allowedTypes:["image"],multiple:!1,value:r,render:({open:o})=>(0,a.jsx)(s.ToolbarButton,{icon:e,onClick:o,label:i})})}),p=e=>{const{attributes:{beforeId:i,beforeUrl:t,afterId:r,afterUrl:s,isVertical:n,dividerLocation:c,caption:m},className:p,isSelected:f,setAttributes:x}=e,h=(0,o.useBlockProps)({className:l(p,"wp-block-nelio-compare-images")});return(0,a.jsxs)("div",Object.assign({},h,{children:[(0,a.jsxs)("div",{className:l("wp-block-nelio-compare-images__comparison-wrapper","wp-block-nelio-compare-images__comparison-wrapper--"+(n?"vertically":"horizontally"),{"wp-block-nelio-compare-images__comparison-wrapper--is-image-missing":!i||!r}),children:[(0,a.jsx)(g,{mode:"before",isVertical:n,imageId:i,imageUrl:t,onChange:(e,i,a)=>x({beforeId:e,beforeUrl:i,beforeAlt:a})}),(0,a.jsx)(g,{mode:"after",isVertical:n,dividerLocation:i&&r?c:void 0,imageId:r,imageUrl:s,onChange:(e,i,a)=>x({afterId:e,afterUrl:i,afterAlt:a})}),!!i&&!!r&&(0,a.jsx)(d,{isVertical:n,location:c})]}),!!i&&!!r&&(0,a.jsx)(b,{text:null!=m?m:"",isSelected:f,onChange:e=>x({caption:e})})]}))},g=({mode:e,isVertical:i,dividerLocation:r,imageId:s,imageUrl:n,onChange:c})=>(0,a.jsx)("div",Object.assign({className:l(`wp-block-nelio-compare-images__${e}-image`,`wp-block-nelio-compare-images__${e}-image--${i?"vertical":"horizontal"}`)},"after"===e&&{style:{height:i&&void 0!==r?100-r+"%":void 0,width:i||void 0===r?void 0:100-r+"%"}},{children:s?(0,a.jsx)("img",{alt:f(e),src:n}):(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(o.MediaPlaceholder,{allowedTypes:["image"],multiple:!1,onSelect:({id:e,url:i,alt:a})=>c(e,i,a),value:s,labels:{title:f(e),instructions:(0,t._x)("Select an image…","text","nelio-compare-images")}})})})),d=({isVertical:e,location:i})=>(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("div",{className:l("wp-block-nelio-compare-images__divider","wp-block-nelio-compare-images__divider--"+(e?"horizontal":"vertical")),style:{top:e?`calc(${i}% - 0.5em)`:0,left:e?0:`calc(${i}% - 0.5em)`}}),(0,a.jsx)("div",{className:l("wp-block-nelio-compare-images__handler","wp-block-nelio-compare-images__handler--"+(e?"horizontal":"vertical")),style:{top:e?`calc(${i}% - 0.5em)`:void 0,left:e?void 0:`calc(${i}% - 0.5em)`}})]}),b=({text:e,isSelected:i,onChange:r})=>o.RichText.isEmpty(e)&&!i?null:(0,a.jsx)(o.RichText,{className:"wp-block-nelio-compare-images__caption",tagName:"figcaption",placeholder:(0,t._x)("Write caption…","user","nelio-compare-images"),value:e,onChange:r,inlineToolbar:!0}),f=e=>"before"===e?(0,t._x)("Before Image","text","nelio-compare-images"):(0,t._x)("After Image","text","nelio-compare-images");(0,e.registerBlockType)(i,{edit:e=>(0,a.jsxs)(a.Fragment,{children:[e.isSelected&&(0,a.jsx)(n,Object.assign({},e)),e.isSelected&&(0,a.jsx)(c,Object.assign({},e)),(0,a.jsx)(p,Object.assign({},e))]}),save:({attributes:{afterAlt:e,afterId:i,afterUrl:t,align:r="",beforeAlt:s,beforeId:n,beforeUrl:c,caption:m="",isVertical:p,dividerLocation:g},className:d})=>{const b=o.useBlockProps.save({className:l("wp-block-nelio-compare-images",d,{[`align${r}`]:!!r})});return(0,a.jsxs)("figure",Object.assign({},b,{children:[!!n&&!i&&(0,a.jsx)("img",{className:`wp-image-${n}`,src:c,alt:s}),!n&&!!i&&(0,a.jsx)("img",{className:`wp-image-${i}`,src:t,alt:e}),!!n&&!!i&&(0,a.jsxs)("div",{className:l("wp-block-nelio-compare-images__comparison-wrapper","wp-block-nelio-compare-images__comparison-wrapper--"+(p?"vertically":"horizontally"),{"wp-block-nelio-compare-images__comparison-wrapper--is-image-missing":!n||!i}),"data-position":g,"data-direction":p?"vertical":"horizontal",children:[(0,a.jsx)("div",{className:l("wp-block-nelio-compare-images__before-image","wp-block-nelio-compare-images__before-image--"+(p?"vertical":"horizontal")),children:(0,a.jsx)("img",{className:`wp-image-${n}`,src:c,alt:s})}),(0,a.jsx)("div",{className:l("wp-block-nelio-compare-images__after-image","wp-block-nelio-compare-images__after-image--"+(p?"vertical":"horizontal")),style:{height:p?100-g+"%":void 0,width:p?void 0:100-g+"%"},children:(0,a.jsx)("img",{className:`wp-image-${i}`,src:t,alt:e})}),(0,a.jsx)("div",{className:l("wp-block-nelio-compare-images__divider","wp-block-nelio-compare-images__divider--"+(p?"horizontal":"vertical"))}),(0,a.jsx)("div",{className:l("wp-block-nelio-compare-images__handler","wp-block-nelio-compare-images__handler--"+(p?"horizontal":"vertical"))})]}),!!n&&!!i&&!o.RichText.isEmpty(m)&&(0,a.jsx)(o.RichText.Content,{tagName:"figcaption",className:"wp-block-nelio-compare-images__caption",value:m})]}))}})}},a={};function o(e){var t=a[e];if(void 0!==t)return t.exports;var r=a[e]={exports:{}};return i[e](r,r.exports,o),r.exports}o.m=i,e=[],o.O=(i,a,t,r)=>{if(!a){var l=1/0;for(m=0;m<e.length;m++){for(var[a,t,r]=e[m],s=!0,n=0;n<a.length;n++)(!1&r||l>=r)&&Object.keys(o.O).every(e=>o.O[e](a[n]))?a.splice(n--,1):(s=!1,r<l&&(l=r));if(s){e.splice(m--,1);var c=t();void 0!==c&&(i=c)}}return i}r=r||0;for(var m=e.length;m>0&&e[m-1][2]>r;m--)e[m]=e[m-1];e[m]=[a,t,r]},o.o=(e,i)=>Object.prototype.hasOwnProperty.call(e,i),(()=>{var e={57:0,350:0};o.O.j=i=>0===e[i];var i=(i,a)=>{var t,r,[l,s,n]=a,c=0;if(l.some(i=>0!==e[i])){for(t in s)o.o(s,t)&&(o.m[t]=s[t]);if(n)var m=n(o)}for(i&&i(a);c<l.length;c++)r=l[c],o.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return o.O(m)},a=globalThis.webpackChunknelio_compare_images=globalThis.webpackChunknelio_compare_images||[];a.forEach(i.bind(null,0)),a.push=i.bind(null,a.push.bind(a))})();var t=o.O(void 0,[350],()=>o(486));t=o.O(t)})();

  • nelio-compare-images/tags/1.0.6/build/style-index.css

    r2694346 r3408254  
    1 .wp-block-nelio-compare-images__comparison-wrapper{position:relative}.wp-block-nelio-compare-images__after-image,.wp-block-nelio-compare-images__before-image{line-height:0}.wp-block-nelio-compare-images__before-image{height:100%;margin:0;padding:0;width:100%}.wp-block-nelio-compare-images__before-image img{height:100%;margin:0;-o-object-fit:cover;object-fit:cover;padding:0;width:100%}.wp-block-nelio-compare-images__after-image{position:absolute}.wp-block-nelio-compare-images__after-image img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.wp-block-nelio-compare-images__after-image--horizontal{bottom:0;height:100%;right:0;top:0}.wp-block-nelio-compare-images__after-image--horizontal img{-o-object-position:top right;object-position:top right}.wp-block-nelio-compare-images__after-image--vertical{bottom:0;left:0;position:absolute;right:0;width:100%}.wp-block-nelio-compare-images__after-image--vertical img{-o-object-position:bottom left;object-position:bottom left}.wp-block-nelio-compare-images__divider{font-size:2px;position:absolute;transition:opacity .2s ease-in-out}.wp-block-nelio-compare-images__divider--vertical{background:#fff;height:100%;top:0;width:1em}.wp-block-nelio-compare-images__divider--horizontal{background:#fff;height:1em;left:0;width:100%}.wp-block-nelio-compare-images__handler{background:#fff;color:#bbb;cursor:pointer;filter:drop-shadow(0 0 10px #001);font-size:5px;position:absolute;transition:opacity .2s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.wp-block-nelio-compare-images__handler:after{align-items:center;background:inherit;border-radius:1em;content:"☰";display:block;display:flex;font-size:16px;height:1.5em;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) rotate(90deg);width:6em}.wp-block-nelio-compare-images__handler--vertical{height:100%;left:50%;top:0;transform:translateX(-50%);width:1em}.wp-block-nelio-compare-images__handler--horizontal{height:1em;left:0;top:50%;transform:translateY(-50%);width:100%}.wp-block-nelio-compare-images__handler--horizontal:after{transform:translate(-50%,-50%) rotate(0)}.wp-block-nelio-compare-images__caption{text-align:center;width:100%}@media(min-width:50em){.wp-block-nelio-compare-images__handler{opacity:0}.wp-block-nelio-compare-images:hover .wp-block-nelio-compare-images__handler{opacity:1}}
     1.wp-block-nelio-compare-images__comparison-wrapper{position:relative}.wp-block-nelio-compare-images__after-image,.wp-block-nelio-compare-images__before-image{line-height:0}.wp-block-nelio-compare-images__before-image{height:100%;margin:0;padding:0;width:100%}.wp-block-nelio-compare-images__before-image img{height:100%;margin:0;-o-object-fit:cover;object-fit:cover;padding:0;width:100%}.wp-block-nelio-compare-images__after-image{position:absolute}.wp-block-nelio-compare-images__after-image img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.wp-block-nelio-compare-images__after-image--horizontal{bottom:0;height:100%;right:0;top:0}.wp-block-nelio-compare-images__after-image--horizontal img{-o-object-position:top right;object-position:top right}.wp-block-nelio-compare-images__after-image--vertical{bottom:0;left:0;position:absolute;right:0;width:100%}.wp-block-nelio-compare-images__after-image--vertical img{-o-object-position:bottom left;object-position:bottom left}.wp-block-nelio-compare-images__divider{font-size:2px;position:absolute;transition:opacity .2s ease-in-out}.wp-block-nelio-compare-images__divider--vertical{background:#fff;height:100%;top:0;width:1em}.wp-block-nelio-compare-images__divider--horizontal{background:#fff;height:1em;left:0;width:100%}.wp-block-nelio-compare-images__handler{background:#fff;color:#bbb;cursor:pointer;filter:drop-shadow(0 0 10px #001);font-size:5px;position:absolute;transition:opacity .2s ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none}.wp-block-nelio-compare-images__handler:after{align-items:center;background:inherit;border-radius:1em;content:"☰";display:block;display:flex;font-size:16px;height:1.5em;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) rotate(90deg);width:6em}.wp-block-nelio-compare-images__handler--vertical{height:100%;left:50%;top:0;transform:translateX(-50%);width:1em}.wp-block-nelio-compare-images__handler--horizontal{height:1em;left:0;top:50%;transform:translateY(-50%);width:100%}.wp-block-nelio-compare-images__handler--horizontal:after{transform:translate(-50%,-50%) rotate(0)}.wp-block-nelio-compare-images__caption{text-align:center;width:100%}@media(min-width:50em){.wp-block-nelio-compare-images__handler{opacity:0}.wp-block-nelio-compare-images:hover .wp-block-nelio-compare-images__handler{opacity:1}}

  • nelio-compare-images/tags/1.0.6/build/view.asset.php

    r2998773 r3408254  
    1 <?php return array('dependencies' => array(), 'version' => '67f8e141a345d8e5cc0bda7b2a189795');
     1<?php return array('dependencies' => array(), 'version' => 'c61b335b3ec4155e9404');

  • nelio-compare-images/tags/1.0.6/build/view.js

    r2998773 r3408254  
    1 !function(){var e={isDragging:!1};function t(e){Array.from(document.querySelectorAll(".wp-block-nelio-compare-images__comparison-wrapper--".concat(e,"ly"))).forEach((function(t){var o=t.querySelector(".wp-block-nelio-compare-images__handler");o&&(o.addEventListener("mousedown",(function(){return n(e,t)})),o.addEventListener("touchstart",(function(){return n(e,t)})),t.addEventListener("mousemove",(function(e){return r(e,t)})),t.addEventListener("touchmove",(function(e){return r(e,t)})))}))}function n(t,n){var o=n.querySelector(".wp-block-nelio-compare-images__handler"),r=n.querySelector(".wp-block-nelio-compare-images__divider"),i=n.querySelector(".wp-block-nelio-compare-images__after-image");o&&r&&i&&(e={afterImage:i,block:n,direction:t,divider:r,handler:o,isDragging:!0})}function o(){e={isDragging:!1}}function r(t,n){if(e.isDragging&&n===e.block){var o=n.getBoundingClientRect(),r=c(t)?t.clientX:t.targetTouches[0].clientX,u=c(t)?t.clientY:t.targetTouches[0].clientY,l=(r-o.left)/o.width,d=(u-o.top)/o.height;"horizontal"===e.direction?i(100*Math.max(0,Math.min(1,l))):a(100*Math.max(0,Math.min(1,d)))}}function i(t){e.isDragging&&(e.afterImage.style.width="".concat(u(100-t),"%"),e.divider.style.left="".concat(u(t),"%"),e.handler.style.left="".concat(u(t),"%"))}function a(t){e.isDragging&&(e.afterImage.style.height="".concat(u(100-t),"%"),e.divider.style.top="".concat(u(t),"%"),e.handler.style.top="".concat(u(t),"%"))}var c=function(e){return"clientX"in e},u=function(e){return e.toFixed(2)};!function(e){if("undefined"!=typeof document){if("complete"!==document.readyState&&"interactive"!==document.readyState)return document.addEventListener("DOMContentLoaded",e);e()}}((function(){Array.from(document.querySelectorAll(".wp-block-nelio-compare-images__comparison-wrapper")).forEach((function(e){var t,r=parseInt(null!==(t=e.getAttribute("data-position"))&&void 0!==t?t:"0")||0,c=function(e){return"horizontal"===e.getAttribute("data-direction")?"horizontal":"vertical"}(e);n(c,e),"horizontal"===c?i(r):a(r),o()})),document.addEventListener("mouseup",(function(){return o()})),document.addEventListener("touchend",(function(){return o()})),t("horizontal"),t("vertical")}))}();
     1(()=>{"use strict";let e={isDragging:!1};function t(e){Array.from(document.querySelectorAll(`.wp-block-nelio-compare-images__comparison-wrapper--${e}ly`)).forEach(t=>{const n=t.querySelector(".wp-block-nelio-compare-images__handler");n&&(n.addEventListener("mousedown",()=>i(e,t)),n.addEventListener("touchstart",()=>i(e,t)),t.addEventListener("mousemove",e=>o(e,t)),t.addEventListener("touchmove",e=>o(e,t)))})}function i(t,i){const n=i.querySelector(".wp-block-nelio-compare-images__handler"),o=i.querySelector(".wp-block-nelio-compare-images__divider"),r=i.querySelector(".wp-block-nelio-compare-images__after-image");n&&o&&r&&(e={afterImage:r,block:i,direction:t,divider:o,handler:n,isDragging:!0})}function n(){e={isDragging:!1}}function o(t,i){var n,o,c,d;if(!e.isDragging)return;if(i!==e.block)return;const u=i.getBoundingClientRect(),s=l(t)?t.clientX:null!==(o=null===(n=t.targetTouches[0])||void 0===n?void 0:n.clientX)&&void 0!==o?o:0,m=l(t)?t.clientY:null!==(d=null===(c=t.targetTouches[0])||void 0===c?void 0:c.clientY)&&void 0!==d?d:0,g=(s-u.left)/u.width,h=(m-u.top)/u.height;"horizontal"===e.direction?r(100*Math.max(0,Math.min(1,g))):a(100*Math.max(0,Math.min(1,h)))}function r(t){e.isDragging&&(e.afterImage.style.width=`${c(100-t)}%`,e.divider.style.left=`${c(t)}%`,e.handler.style.left=`${c(t)}%`)}function a(t){e.isDragging&&(e.afterImage.style.height=`${c(100-t)}%`,e.divider.style.top=`${c(t)}%`,e.handler.style.top=`${c(t)}%`)}const l=e=>"clientX"in e,c=e=>e.toFixed(2);!function(e){if("undefined"!=typeof document){if("complete"!==document.readyState&&"interactive"!==document.readyState)return document.addEventListener("DOMContentLoaded",e);e()}}(()=>{Array.from(document.querySelectorAll(".wp-block-nelio-compare-images__comparison-wrapper")).forEach(e=>{const t=parseInt(null!==(l=e.getAttribute("data-position"))&&void 0!==l?l:"0")||0,o=(e=>"horizontal"===e.getAttribute("data-direction")?"horizontal":"vertical")(e);var l;i(o,e),"horizontal"===o?r(t):a(t),n()}),document.addEventListener("mouseup",()=>n()),document.addEventListener("touchend",()=>n()),t("horizontal"),t("vertical")})})();

  • nelio-compare-images/tags/1.0.6/index.php

    r2694346 r3408254  
    11<?php
    22// Silence is golden.
    3 

  • nelio-compare-images/tags/1.0.6/nelio-compare-images.php

    r2998773 r3408254  
    44 *
    55 * @wordpress-plugin
    6  * Plugin Name: Nelio Compare Images Block
    7  * Plugin URI:  https://neliosoftware.com
    8  * Description: Before & After Image Block for Gutenberg.
    9  * Version:     1.0.5
     6 * Plugin Name:       Nelio Compare Images Block
     7 * Plugin URI:        https://neliosoftware.com
     8 * Description:       Before & After Image Block for Gutenberg.
     9 * Version:           1.0.6
    1010 *
    1111 * Author:            Nelio Software
    … …  
    1313 * License:           GPL-3.0+
    1414 * License URI:       http://www.gnu.org/licenses/gpl-3.0.txt
     15 *
     16 * Requires at least: 6.6
     17 * Requires PHP:      7.4
    1518 *
    1619 * Text Domain:       nelio-compare-images
    … …  
    2730define( 'NELIO_COMPARE_IMAGES', true );
    2831
     32/**
     33 * Returns the plugin path.
     34 *
     35 * @return string
     36 */
    2937function nelioci_path() {
    3038    return untrailingslashit( plugin_dir_path( __FILE__ ) );
    3139}//end nelioci_path()
    3240
     41/**
     42 * Callback to register block type.
     43 *
     44 * @return void
     45 */
    3346function nelioci_register_block_types() {
    3447    if ( ! function_exists( 'register_block_type' ) ) {

  • nelio-compare-images/tags/1.0.6/readme.txt

    r3055984 r3408254  
    1 === Nelio Compare Images ===
     1=== Nelio Compare Images Block ===
    22Contributors: nelio, davilera, avillegasn
    33Donate Link: https://paypal.me/neliosoftware
    44Tags: before image, after image, image comparison, compare images, gutenberg block
    55Requires PHP: 7.4
    6 Requires at least: 5.7
    7 Tested up to: 6.5
    8 Stable tag: 1.0.5
     6Requires at least: 6.6
     7Tested up to: 6.9
     8Stable tag: 1.0.6
    99License: GPLv3 or later
    1010License URI: http://www.gnu.org/licenses/gpl-3.0.html
    … …  
    7878== Changelog ==
    7979
     80= 1.0.6 (December 2, 2025) =
     81* Update coding standards.
     82
    8083= 1.0.5 (November 20, 2023) =
    8184* Fix JS error that prevented the slider from being moved.
    … …  
    104107== Upgrade Notice ==
    105108
    106 = 1.0.5 (November 20, 2023) =
    107 Fixes and WP 6.4 compat.
     109= 1.0.6 (December 2, 2025) =
     110Update coding standards.

  • nelio-compare-images/trunk/.eslintignore

    r2694346 r3408254  
     1.eslintrc.js
     2.lando
    13webpack.config.js
    2 build
     4
     5assets/src/admin/scripts/heatmap-renderer/lib
     6includes/hooks/woocommerce/experiments/product/editor/assets/product-gallery-metabox/index.js
     7includes/lib/settings/assets/js/src/settings.ts
     8scripts/sync-package-json.js
     9
     10dist
     11node_modules
    312vendor
     13postcss.config.js
     14test/unit/jest.config.js

  • nelio-compare-images/trunk/.stylelintignore

    r2694346 r3408254  
    11# By default, all `node_modules` are ignored.
     2
     3*.json
     4*.php
     5*.png
     6*.svg
    27*.ts
    3 **/*.tsx
    4 *.json
    5 dist
    6 build
     8*.tsx
     9
     10assets/dist
     11includes/lib/settings/assets/js/dist/
    712vendor
     13packages/components/contextual-help/walkthrough/introjs.scss

  • nelio-compare-images/trunk/.stylelintrc.json

    r2694346 r3408254  
    11{
    22    "extends": "@wordpress/stylelint-config/scss",
     3    "ignoreFiles": [ "**/*.ts", "**/*.tsx" ],
    34    "rules": {
    4         "selector-class-pattern": null
    5     },
    6     "ignoreFiles": [
    7         "**/*.tsx",
    8         "**/*.ts",
    9         "**/*.js",
    10         "**/*.json"
    11     ]
     5        "scss/operator-no-newline-after": null,
     6        "selector-class-pattern": null,
     7        "selector-type-no-unknown": [
     8            true,
     9            {
     10                "ignoreTypes": [ "nabhidden" ]
     11            }
     12        ]
     13    }
    1214}

  • nelio-compare-images/trunk/babel.config.json

    r2694346 r3408254  
    11{
    2     "presets": [
    3         "@babel/preset-typescript"
    4     ]
     2    "presets": [ "@wordpress/babel-preset-default" ]
    53}

  • nelio-compare-images/trunk/build/block.json

    r2694346 r3408254  
    11{
    2     "$schema": "https://schemas.wp.org/trunk/block.json",
    3     "apiVersion": 2,
    4     "name": "nelio/compare-images",
    5     "title": "Compare Images",
    6     "category": "common",
    7     "icon": "image-flip-horizontal",
    8     "description": "Compare two images side by side using a slider.",
    9     "keywords": [ "compare", "image" ],
    10     "version": "1.0.0",
    11     "textdomain": "nelio-compare-images",
    12     "attributes": {
    13         "align": {
    14             "type": "string"
    15         },
    16         "beforeId": {
    17             "type": "number"
    18         },
    19         "beforeUrl": {
    20             "type": "string",
    21             "source": "attribute",
    22             "selector": ".wp-block-nelio-compare-images__before-image img",
    23             "attribute": "src"
    24         },
    25         "beforeAlt": {
    26             "type": "string",
    27             "source": "attribute",
    28             "selector": ".wp-block-nelio-compare-images__before-image img",
    29             "attribute": "alt",
    30             "default": ""
    31         },
    32         "afterId": {
    33             "type": "number"
    34         },
    35         "afterUrl": {
    36             "type": "string",
    37             "source": "attribute",
    38             "selector": ".wp-block-nelio-compare-images__after-image img",
    39             "attribute": "src"
    40         },
    41         "afterAlt": {
    42             "type": "string",
    43             "source": "attribute",
    44             "selector": ".wp-block-nelio-compare-images__after-image img",
    45             "attribute": "alt",
    46             "default": ""
    47         },
    48         "dividerLocation": {
    49             "type": "number",
    50             "default": 50
    51         },
    52         "caption": {
    53             "type": "string",
    54             "source": "html",
    55             "selector": "figcaption"
    56         },
    57         "isVertical": {
    58             "type": "boolean",
    59             "default": false
    60         },
    61         "sizeSlug": {
    62             "type": "string"
    63         }
    64     },
    65     "supports": {
    66         "align": [ "left", "center", "right", "wide", "full" ]
    67     },
    68     "viewScript": "file:view.js",
    69     "editorScript": "file:index.js",
    70     "editorStyle": "file:index.css",
    71     "style": "file:style-index.css"
     2  "$schema": "https://schemas.wp.org/trunk/block.json",
     3  "apiVersion": 3,
     4  "name": "nelio/compare-images",
     5  "title": "Compare Images",
     6  "category": "common",
     7  "icon": "image-flip-horizontal",
     8  "description": "Compare two images side by side using a slider.",
     9  "keywords": [
     10    "compare",
     11    "image"
     12  ],
     13  "version": "1.0.0",
     14  "textdomain": "nelio-compare-images",
     15  "attributes": {
     16    "align": {
     17      "type": "string"
     18    },
     19    "beforeId": {
     20      "type": "number"
     21    },
     22    "beforeUrl": {
     23      "type": "string",
     24      "source": "attribute",
     25      "selector": ".wp-block-nelio-compare-images__before-image img",
     26      "attribute": "src"
     27    },
     28    "beforeAlt": {
     29      "type": "string",
     30      "source": "attribute",
     31      "selector": ".wp-block-nelio-compare-images__before-image img",
     32      "attribute": "alt",
     33      "default": ""
     34    },
     35    "afterId": {
     36      "type": "number"
     37    },
     38    "afterUrl": {
     39      "type": "string",
     40      "source": "attribute",
     41      "selector": ".wp-block-nelio-compare-images__after-image img",
     42      "attribute": "src"
     43    },
     44    "afterAlt": {
     45      "type": "string",
     46      "source": "attribute",
     47      "selector": ".wp-block-nelio-compare-images__after-image img",
     48      "attribute": "alt",
     49      "default": ""
     50    },
     51    "dividerLocation": {
     52      "type": "number",
     53      "default": 50
     54    },
     55    "caption": {
     56      "type": "string",
     57      "source": "html",
     58      "selector": "figcaption"
     59    },
     60    "isVertical": {
     61      "type": "boolean",
     62      "default": false
     63    },
     64    "sizeSlug": {
     65      "type": "string"
     66    }
     67  },
     68  "supports": {
     69    "align": [
     70      "left",
     71      "center",
     72      "right",
     73      "wide",
     74      "full"
     75    ]
     76  },
     77  "viewScript": "file:view.js",
     78  "editorScript": "file:index.js",
     79  "editorStyle": "file:index.css",
     80  "style": "file:style-index.css"
    7281}

  • nelio-compare-images/trunk/build/index.asset.php

    r2694346 r3408254  
    1 <?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-editor', 'wp-element', 'wp-i18n'), 'version' => 'd3f75c877b48e2d6cd8aba3aac8e05b9');
     1<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '3a1fd7c2afb85be6c207');

  • nelio-compare-images/trunk/build/index.css

    r2694346 r3408254  
    1 #editor .wp-block-nelio-compare-images__comparison-wrapper--is-image-missing{display:flex;flex-direction:column}#editor .wp-block-nelio-compare-images__comparison-wrapper--is-image-missing .wp-block-nelio-compare-images__before-image{height:auto;margin-bottom:10px;position:relative}#editor .wp-block-nelio-compare-images__comparison-wrapper--is-image-missing .wp-block-nelio-compare-images__after-image{height:auto;position:relative}#editor .wp-block-nelio-compare-images__divider{cursor:default;opacity:1}#editor .wp-block-nelio-compare-images__handler{display:none}
     1.editor-styles-wrapper .wp-block-nelio-compare-images__comparison-wrapper--is-image-missing{display:flex;flex-direction:column}.editor-styles-wrapper .wp-block-nelio-compare-images__comparison-wrapper--is-image-missing .wp-block-nelio-compare-images__before-image{height:auto;margin-bottom:10px;position:relative}.editor-styles-wrapper .wp-block-nelio-compare-images__comparison-wrapper--is-image-missing .wp-block-nelio-compare-images__after-image{height:auto;position:relative}.editor-styles-wrapper .wp-block-nelio-compare-images__divider{cursor:default;opacity:1}.editor-styles-wrapper .wp-block-nelio-compare-images__handler{display:none}

  • nelio-compare-images/trunk/build/index.js

    r2694346 r3408254  
    1 !function(){var e,t={532:function(e,t,a){"use strict";var r=window.wp.blocks,i=JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"nelio/compare-images","title":"Compare Images","category":"common","icon":"image-flip-horizontal","description":"Compare two images side by side using a slider.","keywords":["compare","image"],"version":"1.0.0","textdomain":"nelio-compare-images","attributes":{"align":{"type":"string"},"beforeId":{"type":"number"},"beforeUrl":{"type":"string","source":"attribute","selector":".wp-block-nelio-compare-images__before-image img","attribute":"src"},"beforeAlt":{"type":"string","source":"attribute","selector":".wp-block-nelio-compare-images__before-image img","attribute":"alt","default":""},"afterId":{"type":"number"},"afterUrl":{"type":"string","source":"attribute","selector":".wp-block-nelio-compare-images__after-image img","attribute":"src"},"afterAlt":{"type":"string","source":"attribute","selector":".wp-block-nelio-compare-images__after-image img","attribute":"alt","default":""},"dividerLocation":{"type":"number","default":50},"caption":{"type":"string","source":"html","selector":"figcaption"},"isVertical":{"type":"boolean","default":false},"sizeSlug":{"type":"string"}},"supports":{"align":["left","center","right","wide","full"]},"viewScript":"file:view.js","editorScript":"file:index.js","editorStyle":"file:index.css","style":"file:style-index.css"}'),o=window.wp.element,n=window.wp.blockEditor,l=window.wp.i18n,c=a(184),m=a.n(c),s=window.wp.components,p=window.wp.editor,u=function(e){var t=e.attributes,a=t.afterAlt,r=t.beforeAlt,i=t.dividerLocation,n=e.setAttributes;return o.createElement(p.InspectorControls,null,o.createElement(s.PanelBody,{initialOpen:!0,title:(0,l._x)("Settings","text","nelio-compare-images")},o.createElement(s.RangeControl,{label:(0,l._x)("Divider’s Initial Location","text","nelio-compare-images"),initialPosition:i,value:i,onChange:function(e){return n({dividerLocation:e})},min:1,max:99}),o.createElement(s.TextareaControl,{label:(0,l._x)("Before Image - Alt Text (Alternative Text)","text","nelio-compare-images"),value:r||"",onChange:function(e){return n({beforeAlt:e})}}),o.createElement(s.TextareaControl,{label:(0,l._x)("After Image - Alt Text (Alternative Text)","text","nelio-compare-images"),value:a||"",onChange:function(e){return n({afterAlt:e})},help:o.createElement(o.Fragment,null,o.createElement(s.ExternalLink,{href:"https://www.w3.org/WAI/tutorials/images/decision-tree"},(0,l._x)("Describe the purpose of the images","user","nelio-compare-images")),(0,l._x)("Leave empty if they’re purely decorative.","user","nelio-compare-images"))})))},g=function(e){var t=e.attributes,a=t.isVertical,r=t.beforeId,i=t.afterId,n=e.setAttributes;return o.createElement(p.BlockControls,null,o.createElement(s.Toolbar,null,o.createElement(s.ToolbarButton,{icon:"image-flip-vertical",isPressed:a,onClick:function(){return n({isVertical:!a})},label:(0,l._x)("Vertical Comparison","text","nelio-compare-images")}),!!r&&!!i&&o.createElement(o.Fragment,null,o.createElement(f,{icon:"format-image",value:r,onSelect:function(e,t,a){return n({beforeId:e,beforeUrl:t,beforeAlt:a})},label:(0,l._x)("Change before image…","command","nelio-compare-images")}),o.createElement(f,{icon:"format-gallery",value:i,onSelect:function(e,t,a){return n({afterId:e,afterUrl:t,afterAlt:a})},label:(0,l._x)("Change after image…","command","nelio-compare-images")}))))},f=function(e){var t=e.icon,a=e.label,r=e.onSelect,i=e.value;return o.createElement(p.MediaUploadCheck,null,o.createElement(p.MediaUpload,{onSelect:function(e){var t=e.id,a=e.url,i=e.alt;return r(t,a,i)},allowedTypes:["image"],multiple:!1,value:i,render:function(e){var r=e.open;return o.createElement(s.ToolbarButton,{icon:t,onClick:r,label:a})}}))},d=function(){return d=Object.assign||function(e){for(var t,a=1,r=arguments.length;a<r;a++)for(var i in t=arguments[a])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},d.apply(this,arguments)},b=function(e){var t=e.attributes,a=t.beforeId,r=t.beforeUrl,i=t.afterId,l=t.afterUrl,c=t.isVertical,s=t.dividerLocation,p=t.caption,u=e.className,g=e.isSelected,f=e.setAttributes,b=(0,n.useBlockProps)({className:m()(u,"wp-block-nelio-compare-images")});return o.createElement("div",d({},b),o.createElement("div",{className:m()("wp-block-nelio-compare-images__comparison-wrapper","wp-block-nelio-compare-images__comparison-wrapper--".concat(c?"vertically":"horizontally"),{"wp-block-nelio-compare-images__comparison-wrapper--is-image-missing":!a||!i})},o.createElement(v,{mode:"before",isVertical:c,imageId:a,imageUrl:r,onChange:function(e,t,a){return f({beforeId:e,beforeUrl:t,beforeAlt:a})}}),o.createElement(v,{mode:"after",isVertical:c,dividerLocation:a&&i?s:void 0,imageId:i,imageUrl:l,onChange:function(e,t,a){return f({afterId:e,afterUrl:t,afterAlt:a})}}),!!a&&!!i&&o.createElement(w,{isVertical:c,location:s})),!!a&&!!i&&o.createElement(h,{text:null!=p?p:"",isSelected:g,onChange:function(e){return f({caption:e})}}))},v=function(e){var t=e.mode,a=e.isVertical,r=e.dividerLocation,i=e.imageId,c=e.imageUrl,s=e.onChange;return o.createElement("div",d({className:m()("wp-block-nelio-compare-images__".concat(t,"-image"),"wp-block-nelio-compare-images__".concat(t,"-image--").concat(a?"vertical":"horizontal"))},"after"===t&&{style:{height:a&&void 0!==r?"".concat(100-r,"%"):void 0,width:a||void 0===r?void 0:"".concat(100-r,"%")}}),i?o.createElement("img",{alt:_(t),src:c}):o.createElement(n.MediaPlaceholder,{allowedTypes:["image"],multiple:!1,onSelect:function(e){var t=e.id,a=e.url,r=e.alt;return s(t,a,r)},value:i,labels:{title:_(t),instructions:(0,l._x)("Select an image…","text","nelio-compare-images")}}))},w=function(e){var t=e.isVertical,a=e.location;return o.createElement(o.Fragment,null,o.createElement("div",{className:m()("wp-block-nelio-compare-images__divider","wp-block-nelio-compare-images__divider--".concat(t?"horizontal":"vertical")),style:{top:t?"calc(".concat(a,"% - 0.5em)"):0,left:t?0:"calc(".concat(a,"% - 0.5em)")}}),o.createElement("div",{className:m()("wp-block-nelio-compare-images__handler","wp-block-nelio-compare-images__handler--".concat(t?"horizontal":"vertical")),style:{top:t?"calc(".concat(a,"% - 0.5em)"):void 0,left:t?void 0:"calc(".concat(a,"% - 0.5em)")}}))},h=function(e){var t=e.text,a=e.isSelected,r=e.onChange;return n.RichText.isEmpty(t)&&!a?null:o.createElement(n.RichText,{className:"wp-block-nelio-compare-images__caption",tagName:"figcaption",placeholder:(0,l._x)("Write caption…","user","nelio-compare-images"),value:t,onChange:r,inlineToolbar:!0})},_=function(e){return"before"===e?(0,l._x)("Before Image","text","nelio-compare-images"):(0,l._x)("After Image","text","nelio-compare-images")},y=function(){return y=Object.assign||function(e){for(var t,a=1,r=arguments.length;a<r;a++)for(var i in t=arguments[a])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},y.apply(this,arguments)};(0,r.registerBlockType)(i,{edit:function(e){return o.createElement(o.Fragment,null,e.isSelected&&o.createElement(u,d({},e)),e.isSelected&&o.createElement(g,d({},e)),o.createElement(b,d({},e)))},save:function(e){var t,a=e.attributes,r=a.afterAlt,i=a.afterId,l=a.afterUrl,c=a.align,s=void 0===c?"":c,p=a.beforeAlt,u=a.beforeId,g=a.beforeUrl,f=a.caption,d=void 0===f?"":f,b=a.isVertical,v=a.dividerLocation,w=e.className,h=n.useBlockProps.save({className:m()("wp-block-nelio-compare-images",w,(t={},t["align".concat(s)]=!!s,t))});return o.createElement("figure",y({},h),!!u&&!i&&o.createElement("img",{className:"wp-image-".concat(u),src:g,alt:p}),!u&&!!i&&o.createElement("img",{className:"wp-image-".concat(i),src:l,alt:r}),!!u&&!!i&&o.createElement("div",{className:m()("wp-block-nelio-compare-images__comparison-wrapper","wp-block-nelio-compare-images__comparison-wrapper--".concat(b?"vertically":"horizontally"),{"wp-block-nelio-compare-images__comparison-wrapper--is-image-missing":!u||!i}),"data-position":v,"data-direction":b?"vertical":"horizontal"},o.createElement("div",{className:m()("wp-block-nelio-compare-images__before-image","wp-block-nelio-compare-images__before-image--".concat(b?"vertical":"horizontal"))},o.createElement("img",{className:"wp-image-".concat(u),src:g,alt:p})),o.createElement("div",{className:m()("wp-block-nelio-compare-images__after-image","wp-block-nelio-compare-images__after-image--".concat(b?"vertical":"horizontal")),style:{height:b?"".concat(100-v,"%"):void 0,width:b?void 0:"".concat(100-v,"%")}},o.createElement("img",{className:"wp-image-".concat(i),src:l,alt:r})),o.createElement("div",{className:m()("wp-block-nelio-compare-images__divider","wp-block-nelio-compare-images__divider--".concat(b?"horizontal":"vertical"))}),o.createElement("div",{className:m()("wp-block-nelio-compare-images__handler","wp-block-nelio-compare-images__handler--".concat(b?"horizontal":"vertical"))})),!!u&&!!i&&!n.RichText.isEmpty(d)&&o.createElement(n.RichText.Content,{tagName:"figcaption",className:"wp-block-nelio-compare-images__caption",value:d}))}})},184:function(e,t){var a;!function(){"use strict";var r={}.hasOwnProperty;function i(){for(var e=[],t=0;t<arguments.length;t++){var a=arguments[t];if(a){var o=typeof a;if("string"===o||"number"===o)e.push(a);else if(Array.isArray(a)){if(a.length){var n=i.apply(null,a);n&&e.push(n)}}else if("object"===o)if(a.toString===Object.prototype.toString)for(var l in a)r.call(a,l)&&a[l]&&e.push(l);else e.push(a.toString())}}return e.join(" ")}e.exports?(i.default=i,e.exports=i):void 0===(a=function(){return i}.apply(t,[]))||(e.exports=a)}()}},a={};function r(e){var i=a[e];if(void 0!==i)return i.exports;var o=a[e]={exports:{}};return t[e](o,o.exports,r),o.exports}r.m=t,e=[],r.O=function(t,a,i,o){if(!a){var n=1/0;for(s=0;s<e.length;s++){a=e[s][0],i=e[s][1],o=e[s][2];for(var l=!0,c=0;c<a.length;c++)(!1&o||n>=o)&&Object.keys(r.O).every((function(e){return r.O[e](a[c])}))?a.splice(c--,1):(l=!1,o<n&&(n=o));if(l){e.splice(s--,1);var m=i();void 0!==m&&(t=m)}}return t}o=o||0;for(var s=e.length;s>0&&e[s-1][2]>o;s--)e[s]=e[s-1];e[s]=[a,i,o]},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},r.d=function(e,t){for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},function(){var e={826:0,431:0};r.O.j=function(t){return 0===e[t]};var t=function(t,a){var i,o,n=a[0],l=a[1],c=a[2],m=0;if(n.some((function(t){return 0!==e[t]}))){for(i in l)r.o(l,i)&&(r.m[i]=l[i]);if(c)var s=c(r)}for(t&&t(a);m<n.length;m++)o=n[m],r.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return r.O(s)},a=self.webpackChunknelio_compare_images=self.webpackChunknelio_compare_images||[];a.forEach(t.bind(null,0)),a.push=t.bind(null,a.push.bind(a))}();var i=r.O(void 0,[431],(function(){return r(532)}));i=r.O(i)}();
     1(()=>{"use strict";var e,i={486:()=>{const e=window.wp.blocks,i=JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"nelio/compare-images","title":"Compare Images","category":"common","icon":"image-flip-horizontal","description":"Compare two images side by side using a slider.","keywords":["compare","image"],"version":"1.0.0","textdomain":"nelio-compare-images","attributes":{"align":{"type":"string"},"beforeId":{"type":"number"},"beforeUrl":{"type":"string","source":"attribute","selector":".wp-block-nelio-compare-images__before-image img","attribute":"src"},"beforeAlt":{"type":"string","source":"attribute","selector":".wp-block-nelio-compare-images__before-image img","attribute":"alt","default":""},"afterId":{"type":"number"},"afterUrl":{"type":"string","source":"attribute","selector":".wp-block-nelio-compare-images__after-image img","attribute":"src"},"afterAlt":{"type":"string","source":"attribute","selector":".wp-block-nelio-compare-images__after-image img","attribute":"alt","default":""},"dividerLocation":{"type":"number","default":50},"caption":{"type":"string","source":"html","selector":"figcaption"},"isVertical":{"type":"boolean","default":false},"sizeSlug":{"type":"string"}},"supports":{"align":["left","center","right","wide","full"]},"viewScript":"file:view.js","editorScript":"file:index.js","editorStyle":"file:index.css","style":"file:style-index.css"}'),a=window.ReactJSXRuntime,o=window.wp.blockEditor,t=window.wp.i18n;function r(e){var i,a,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e)){var t=e.length;for(i=0;i<t;i++)e[i]&&(a=r(e[i]))&&(o&&(o+=" "),o+=a)}else for(a in e)e[a]&&(o&&(o+=" "),o+=a);return o}const l=function(){for(var e,i,a=0,o="",t=arguments.length;a<t;a++)(e=arguments[a])&&(i=r(e))&&(o&&(o+=" "),o+=i);return o},s=window.wp.components,n=({attributes:{afterAlt:e,beforeAlt:i,dividerLocation:r},setAttributes:l})=>(0,a.jsx)(o.InspectorControls,{children:(0,a.jsxs)(s.PanelBody,{initialOpen:!0,title:(0,t._x)("Settings","text","nelio-compare-images"),children:[(0,a.jsx)(s.RangeControl,{label:(0,t._x)("Divider’s Initial Location","text","nelio-compare-images"),__nextHasNoMarginBottom:!0,initialPosition:r,value:r,onChange:e=>l({dividerLocation:e}),min:1,max:99}),(0,a.jsx)(s.TextareaControl,{label:(0,t._x)("Before Image - Alt Text (Alternative Text)","text","nelio-compare-images"),__nextHasNoMarginBottom:!0,value:i||"",onChange:e=>l({beforeAlt:e})}),(0,a.jsx)(s.TextareaControl,{label:(0,t._x)("After Image - Alt Text (Alternative Text)","text","nelio-compare-images"),value:e||"",onChange:e=>l({afterAlt:e}),__nextHasNoMarginBottom:!0,help:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(s.ExternalLink,{href:"https://www.w3.org/WAI/tutorials/images/decision-tree",children:(0,t._x)("Describe the purpose of the images","user","nelio-compare-images")}),(0,t._x)("Leave empty if they’re purely decorative.","user","nelio-compare-images")]})})]})}),c=({attributes:{isVertical:e,beforeId:i,afterId:r},setAttributes:l})=>(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(o.BlockControls,{children:(0,a.jsxs)(s.Toolbar,{children:[(0,a.jsx)(s.ToolbarButton,{icon:"image-flip-vertical",isPressed:e,onClick:()=>l({isVertical:!e}),label:(0,t._x)("Vertical Comparison","text","nelio-compare-images")}),!!i&&!!r&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(m,{icon:"format-image",value:i,onSelect:(e,i,a)=>l({beforeId:e,beforeUrl:i,beforeAlt:a}),label:(0,t._x)("Change before image…","command","nelio-compare-images")}),(0,a.jsx)(m,{icon:"format-gallery",value:r,onSelect:(e,i,a)=>l({afterId:e,afterUrl:i,afterAlt:a}),label:(0,t._x)("Change after image…","command","nelio-compare-images")})]})]})})}),m=({icon:e,label:i,onSelect:t,value:r})=>(0,a.jsx)(o.MediaUploadCheck,{children:(0,a.jsx)(o.MediaUpload,{onSelect:({id:e,url:i,alt:a})=>t(e,i,a),allowedTypes:["image"],multiple:!1,value:r,render:({open:o})=>(0,a.jsx)(s.ToolbarButton,{icon:e,onClick:o,label:i})})}),p=e=>{const{attributes:{beforeId:i,beforeUrl:t,afterId:r,afterUrl:s,isVertical:n,dividerLocation:c,caption:m},className:p,isSelected:f,setAttributes:x}=e,h=(0,o.useBlockProps)({className:l(p,"wp-block-nelio-compare-images")});return(0,a.jsxs)("div",Object.assign({},h,{children:[(0,a.jsxs)("div",{className:l("wp-block-nelio-compare-images__comparison-wrapper","wp-block-nelio-compare-images__comparison-wrapper--"+(n?"vertically":"horizontally"),{"wp-block-nelio-compare-images__comparison-wrapper--is-image-missing":!i||!r}),children:[(0,a.jsx)(g,{mode:"before",isVertical:n,imageId:i,imageUrl:t,onChange:(e,i,a)=>x({beforeId:e,beforeUrl:i,beforeAlt:a})}),(0,a.jsx)(g,{mode:"after",isVertical:n,dividerLocation:i&&r?c:void 0,imageId:r,imageUrl:s,onChange:(e,i,a)=>x({afterId:e,afterUrl:i,afterAlt:a})}),!!i&&!!r&&(0,a.jsx)(d,{isVertical:n,location:c})]}),!!i&&!!r&&(0,a.jsx)(b,{text:null!=m?m:"",isSelected:f,onChange:e=>x({caption:e})})]}))},g=({mode:e,isVertical:i,dividerLocation:r,imageId:s,imageUrl:n,onChange:c})=>(0,a.jsx)("div",Object.assign({className:l(`wp-block-nelio-compare-images__${e}-image`,`wp-block-nelio-compare-images__${e}-image--${i?"vertical":"horizontal"}`)},"after"===e&&{style:{height:i&&void 0!==r?100-r+"%":void 0,width:i||void 0===r?void 0:100-r+"%"}},{children:s?(0,a.jsx)("img",{alt:f(e),src:n}):(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(o.MediaPlaceholder,{allowedTypes:["image"],multiple:!1,onSelect:({id:e,url:i,alt:a})=>c(e,i,a),value:s,labels:{title:f(e),instructions:(0,t._x)("Select an image…","text","nelio-compare-images")}})})})),d=({isVertical:e,location:i})=>(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("div",{className:l("wp-block-nelio-compare-images__divider","wp-block-nelio-compare-images__divider--"+(e?"horizontal":"vertical")),style:{top:e?`calc(${i}% - 0.5em)`:0,left:e?0:`calc(${i}% - 0.5em)`}}),(0,a.jsx)("div",{className:l("wp-block-nelio-compare-images__handler","wp-block-nelio-compare-images__handler--"+(e?"horizontal":"vertical")),style:{top:e?`calc(${i}% - 0.5em)`:void 0,left:e?void 0:`calc(${i}% - 0.5em)`}})]}),b=({text:e,isSelected:i,onChange:r})=>o.RichText.isEmpty(e)&&!i?null:(0,a.jsx)(o.RichText,{className:"wp-block-nelio-compare-images__caption",tagName:"figcaption",placeholder:(0,t._x)("Write caption…","user","nelio-compare-images"),value:e,onChange:r,inlineToolbar:!0}),f=e=>"before"===e?(0,t._x)("Before Image","text","nelio-compare-images"):(0,t._x)("After Image","text","nelio-compare-images");(0,e.registerBlockType)(i,{edit:e=>(0,a.jsxs)(a.Fragment,{children:[e.isSelected&&(0,a.jsx)(n,Object.assign({},e)),e.isSelected&&(0,a.jsx)(c,Object.assign({},e)),(0,a.jsx)(p,Object.assign({},e))]}),save:({attributes:{afterAlt:e,afterId:i,afterUrl:t,align:r="",beforeAlt:s,beforeId:n,beforeUrl:c,caption:m="",isVertical:p,dividerLocation:g},className:d})=>{const b=o.useBlockProps.save({className:l("wp-block-nelio-compare-images",d,{[`align${r}`]:!!r})});return(0,a.jsxs)("figure",Object.assign({},b,{children:[!!n&&!i&&(0,a.jsx)("img",{className:`wp-image-${n}`,src:c,alt:s}),!n&&!!i&&(0,a.jsx)("img",{className:`wp-image-${i}`,src:t,alt:e}),!!n&&!!i&&(0,a.jsxs)("div",{className:l("wp-block-nelio-compare-images__comparison-wrapper","wp-block-nelio-compare-images__comparison-wrapper--"+(p?"vertically":"horizontally"),{"wp-block-nelio-compare-images__comparison-wrapper--is-image-missing":!n||!i}),"data-position":g,"data-direction":p?"vertical":"horizontal",children:[(0,a.jsx)("div",{className:l("wp-block-nelio-compare-images__before-image","wp-block-nelio-compare-images__before-image--"+(p?"vertical":"horizontal")),children:(0,a.jsx)("img",{className:`wp-image-${n}`,src:c,alt:s})}),(0,a.jsx)("div",{className:l("wp-block-nelio-compare-images__after-image","wp-block-nelio-compare-images__after-image--"+(p?"vertical":"horizontal")),style:{height:p?100-g+"%":void 0,width:p?void 0:100-g+"%"},children:(0,a.jsx)("img",{className:`wp-image-${i}`,src:t,alt:e})}),(0,a.jsx)("div",{className:l("wp-block-nelio-compare-images__divider","wp-block-nelio-compare-images__divider--"+(p?"horizontal":"vertical"))}),(0,a.jsx)("div",{className:l("wp-block-nelio-compare-images__handler","wp-block-nelio-compare-images__handler--"+(p?"horizontal":"vertical"))})]}),!!n&&!!i&&!o.RichText.isEmpty(m)&&(0,a.jsx)(o.RichText.Content,{tagName:"figcaption",className:"wp-block-nelio-compare-images__caption",value:m})]}))}})}},a={};function o(e){var t=a[e];if(void 0!==t)return t.exports;var r=a[e]={exports:{}};return i[e](r,r.exports,o),r.exports}o.m=i,e=[],o.O=(i,a,t,r)=>{if(!a){var l=1/0;for(m=0;m<e.length;m++){for(var[a,t,r]=e[m],s=!0,n=0;n<a.length;n++)(!1&r||l>=r)&&Object.keys(o.O).every(e=>o.O[e](a[n]))?a.splice(n--,1):(s=!1,r<l&&(l=r));if(s){e.splice(m--,1);var c=t();void 0!==c&&(i=c)}}return i}r=r||0;for(var m=e.length;m>0&&e[m-1][2]>r;m--)e[m]=e[m-1];e[m]=[a,t,r]},o.o=(e,i)=>Object.prototype.hasOwnProperty.call(e,i),(()=>{var e={57:0,350:0};o.O.j=i=>0===e[i];var i=(i,a)=>{var t,r,[l,s,n]=a,c=0;if(l.some(i=>0!==e[i])){for(t in s)o.o(s,t)&&(o.m[t]=s[t]);if(n)var m=n(o)}for(i&&i(a);c<l.length;c++)r=l[c],o.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return o.O(m)},a=globalThis.webpackChunknelio_compare_images=globalThis.webpackChunknelio_compare_images||[];a.forEach(i.bind(null,0)),a.push=i.bind(null,a.push.bind(a))})();var t=o.O(void 0,[350],()=>o(486));t=o.O(t)})();

  • nelio-compare-images/trunk/build/style-index.css

    r2694346 r3408254  
    1 .wp-block-nelio-compare-images__comparison-wrapper{position:relative}.wp-block-nelio-compare-images__after-image,.wp-block-nelio-compare-images__before-image{line-height:0}.wp-block-nelio-compare-images__before-image{height:100%;margin:0;padding:0;width:100%}.wp-block-nelio-compare-images__before-image img{height:100%;margin:0;-o-object-fit:cover;object-fit:cover;padding:0;width:100%}.wp-block-nelio-compare-images__after-image{position:absolute}.wp-block-nelio-compare-images__after-image img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.wp-block-nelio-compare-images__after-image--horizontal{bottom:0;height:100%;right:0;top:0}.wp-block-nelio-compare-images__after-image--horizontal img{-o-object-position:top right;object-position:top right}.wp-block-nelio-compare-images__after-image--vertical{bottom:0;left:0;position:absolute;right:0;width:100%}.wp-block-nelio-compare-images__after-image--vertical img{-o-object-position:bottom left;object-position:bottom left}.wp-block-nelio-compare-images__divider{font-size:2px;position:absolute;transition:opacity .2s ease-in-out}.wp-block-nelio-compare-images__divider--vertical{background:#fff;height:100%;top:0;width:1em}.wp-block-nelio-compare-images__divider--horizontal{background:#fff;height:1em;left:0;width:100%}.wp-block-nelio-compare-images__handler{background:#fff;color:#bbb;cursor:pointer;filter:drop-shadow(0 0 10px #001);font-size:5px;position:absolute;transition:opacity .2s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.wp-block-nelio-compare-images__handler:after{align-items:center;background:inherit;border-radius:1em;content:"☰";display:block;display:flex;font-size:16px;height:1.5em;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) rotate(90deg);width:6em}.wp-block-nelio-compare-images__handler--vertical{height:100%;left:50%;top:0;transform:translateX(-50%);width:1em}.wp-block-nelio-compare-images__handler--horizontal{height:1em;left:0;top:50%;transform:translateY(-50%);width:100%}.wp-block-nelio-compare-images__handler--horizontal:after{transform:translate(-50%,-50%) rotate(0)}.wp-block-nelio-compare-images__caption{text-align:center;width:100%}@media(min-width:50em){.wp-block-nelio-compare-images__handler{opacity:0}.wp-block-nelio-compare-images:hover .wp-block-nelio-compare-images__handler{opacity:1}}
     1.wp-block-nelio-compare-images__comparison-wrapper{position:relative}.wp-block-nelio-compare-images__after-image,.wp-block-nelio-compare-images__before-image{line-height:0}.wp-block-nelio-compare-images__before-image{height:100%;margin:0;padding:0;width:100%}.wp-block-nelio-compare-images__before-image img{height:100%;margin:0;-o-object-fit:cover;object-fit:cover;padding:0;width:100%}.wp-block-nelio-compare-images__after-image{position:absolute}.wp-block-nelio-compare-images__after-image img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.wp-block-nelio-compare-images__after-image--horizontal{bottom:0;height:100%;right:0;top:0}.wp-block-nelio-compare-images__after-image--horizontal img{-o-object-position:top right;object-position:top right}.wp-block-nelio-compare-images__after-image--vertical{bottom:0;left:0;position:absolute;right:0;width:100%}.wp-block-nelio-compare-images__after-image--vertical img{-o-object-position:bottom left;object-position:bottom left}.wp-block-nelio-compare-images__divider{font-size:2px;position:absolute;transition:opacity .2s ease-in-out}.wp-block-nelio-compare-images__divider--vertical{background:#fff;height:100%;top:0;width:1em}.wp-block-nelio-compare-images__divider--horizontal{background:#fff;height:1em;left:0;width:100%}.wp-block-nelio-compare-images__handler{background:#fff;color:#bbb;cursor:pointer;filter:drop-shadow(0 0 10px #001);font-size:5px;position:absolute;transition:opacity .2s ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none}.wp-block-nelio-compare-images__handler:after{align-items:center;background:inherit;border-radius:1em;content:"☰";display:block;display:flex;font-size:16px;height:1.5em;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) rotate(90deg);width:6em}.wp-block-nelio-compare-images__handler--vertical{height:100%;left:50%;top:0;transform:translateX(-50%);width:1em}.wp-block-nelio-compare-images__handler--horizontal{height:1em;left:0;top:50%;transform:translateY(-50%);width:100%}.wp-block-nelio-compare-images__handler--horizontal:after{transform:translate(-50%,-50%) rotate(0)}.wp-block-nelio-compare-images__caption{text-align:center;width:100%}@media(min-width:50em){.wp-block-nelio-compare-images__handler{opacity:0}.wp-block-nelio-compare-images:hover .wp-block-nelio-compare-images__handler{opacity:1}}

  • nelio-compare-images/trunk/build/view.asset.php

    r2998773 r3408254  
    1 <?php return array('dependencies' => array(), 'version' => '67f8e141a345d8e5cc0bda7b2a189795');
     1<?php return array('dependencies' => array(), 'version' => 'c61b335b3ec4155e9404');

  • nelio-compare-images/trunk/build/view.js

    r2998773 r3408254  
    1 !function(){var e={isDragging:!1};function t(e){Array.from(document.querySelectorAll(".wp-block-nelio-compare-images__comparison-wrapper--".concat(e,"ly"))).forEach((function(t){var o=t.querySelector(".wp-block-nelio-compare-images__handler");o&&(o.addEventListener("mousedown",(function(){return n(e,t)})),o.addEventListener("touchstart",(function(){return n(e,t)})),t.addEventListener("mousemove",(function(e){return r(e,t)})),t.addEventListener("touchmove",(function(e){return r(e,t)})))}))}function n(t,n){var o=n.querySelector(".wp-block-nelio-compare-images__handler"),r=n.querySelector(".wp-block-nelio-compare-images__divider"),i=n.querySelector(".wp-block-nelio-compare-images__after-image");o&&r&&i&&(e={afterImage:i,block:n,direction:t,divider:r,handler:o,isDragging:!0})}function o(){e={isDragging:!1}}function r(t,n){if(e.isDragging&&n===e.block){var o=n.getBoundingClientRect(),r=c(t)?t.clientX:t.targetTouches[0].clientX,u=c(t)?t.clientY:t.targetTouches[0].clientY,l=(r-o.left)/o.width,d=(u-o.top)/o.height;"horizontal"===e.direction?i(100*Math.max(0,Math.min(1,l))):a(100*Math.max(0,Math.min(1,d)))}}function i(t){e.isDragging&&(e.afterImage.style.width="".concat(u(100-t),"%"),e.divider.style.left="".concat(u(t),"%"),e.handler.style.left="".concat(u(t),"%"))}function a(t){e.isDragging&&(e.afterImage.style.height="".concat(u(100-t),"%"),e.divider.style.top="".concat(u(t),"%"),e.handler.style.top="".concat(u(t),"%"))}var c=function(e){return"clientX"in e},u=function(e){return e.toFixed(2)};!function(e){if("undefined"!=typeof document){if("complete"!==document.readyState&&"interactive"!==document.readyState)return document.addEventListener("DOMContentLoaded",e);e()}}((function(){Array.from(document.querySelectorAll(".wp-block-nelio-compare-images__comparison-wrapper")).forEach((function(e){var t,r=parseInt(null!==(t=e.getAttribute("data-position"))&&void 0!==t?t:"0")||0,c=function(e){return"horizontal"===e.getAttribute("data-direction")?"horizontal":"vertical"}(e);n(c,e),"horizontal"===c?i(r):a(r),o()})),document.addEventListener("mouseup",(function(){return o()})),document.addEventListener("touchend",(function(){return o()})),t("horizontal"),t("vertical")}))}();
     1(()=>{"use strict";let e={isDragging:!1};function t(e){Array.from(document.querySelectorAll(`.wp-block-nelio-compare-images__comparison-wrapper--${e}ly`)).forEach(t=>{const n=t.querySelector(".wp-block-nelio-compare-images__handler");n&&(n.addEventListener("mousedown",()=>i(e,t)),n.addEventListener("touchstart",()=>i(e,t)),t.addEventListener("mousemove",e=>o(e,t)),t.addEventListener("touchmove",e=>o(e,t)))})}function i(t,i){const n=i.querySelector(".wp-block-nelio-compare-images__handler"),o=i.querySelector(".wp-block-nelio-compare-images__divider"),r=i.querySelector(".wp-block-nelio-compare-images__after-image");n&&o&&r&&(e={afterImage:r,block:i,direction:t,divider:o,handler:n,isDragging:!0})}function n(){e={isDragging:!1}}function o(t,i){var n,o,c,d;if(!e.isDragging)return;if(i!==e.block)return;const u=i.getBoundingClientRect(),s=l(t)?t.clientX:null!==(o=null===(n=t.targetTouches[0])||void 0===n?void 0:n.clientX)&&void 0!==o?o:0,m=l(t)?t.clientY:null!==(d=null===(c=t.targetTouches[0])||void 0===c?void 0:c.clientY)&&void 0!==d?d:0,g=(s-u.left)/u.width,h=(m-u.top)/u.height;"horizontal"===e.direction?r(100*Math.max(0,Math.min(1,g))):a(100*Math.max(0,Math.min(1,h)))}function r(t){e.isDragging&&(e.afterImage.style.width=`${c(100-t)}%`,e.divider.style.left=`${c(t)}%`,e.handler.style.left=`${c(t)}%`)}function a(t){e.isDragging&&(e.afterImage.style.height=`${c(100-t)}%`,e.divider.style.top=`${c(t)}%`,e.handler.style.top=`${c(t)}%`)}const l=e=>"clientX"in e,c=e=>e.toFixed(2);!function(e){if("undefined"!=typeof document){if("complete"!==document.readyState&&"interactive"!==document.readyState)return document.addEventListener("DOMContentLoaded",e);e()}}(()=>{Array.from(document.querySelectorAll(".wp-block-nelio-compare-images__comparison-wrapper")).forEach(e=>{const t=parseInt(null!==(l=e.getAttribute("data-position"))&&void 0!==l?l:"0")||0,o=(e=>"horizontal"===e.getAttribute("data-direction")?"horizontal":"vertical")(e);var l;i(o,e),"horizontal"===o?r(t):a(t),n()}),document.addEventListener("mouseup",()=>n()),document.addEventListener("touchend",()=>n()),t("horizontal"),t("vertical")})})();

  • nelio-compare-images/trunk/composer.json

    r2694346 r3408254  
    55    "description": "Before & After Image Block for Gutenberg",
    66    "homepage": "https://wordpress.org/plugins/nelio-compare-images/",
    7     "require": {
    8         "composer/installers": "~1.0"
    9     },
    107    "require-dev": {
    11         "dealerdirect/phpcodesniffer-composer-installer": "^0.7",
    12         "squizlabs/php_codesniffer": "^3.5",
    13         "phpcompatibility/php-compatibility": "^9.3",
    14         "wp-coding-standards/wpcs": "^2.2"
     8        "automattic/vipwpcs": "*",
     9        "composer/installers": "*",
     10        "php-stubs/woocommerce-stubs": "*",
     11        "php-stubs/wordpress-globals": "*",
     12        "php-stubs/wordpress-stubs": "*",
     13        "phpcompatibility/php-compatibility": "*",
     14        "phpstan/phpstan": "*",
     15        "squizlabs/php_codesniffer": "*",
     16        "szepeviktor/phpstan-wordpress": "*",
     17        "wp-coding-standards/wpcs": "*",
     18        "johnbillion/wp-compat": "^1.3"
    1519    },
    1620    "keywords": [
    … …  
    2226        "gutenberg"
    2327    ],
    24     "scripts": {
    25         "format": "./vendor/bin/phpcbf --standard=phpcs.ruleset.xml --ignore=\"build/,.lando/,vendor/,node_modules/\" --report-summary --report-source",
    26         "lint":   "./vendor/bin/phpcs  --standard=phpcs.ruleset.xml --ignore=\"build/,.lando/,vendor/,node_modules/\"",
    27         "post-install-cmd": [
    28             "[ -f vendor/bin/phpcs ] && \"vendor/bin/phpcs\" --config-set installed_paths vendor/wp-coding-standards/wpcs,vendor/phpcompatibility/php-compatibility || true"
    29         ],
    30         "post-update-cmd": [
    31             "[ -f vendor/bin/phpcs ] && \"vendor/bin/phpcs\" --config-set installed_paths vendor/wp-coding-standards/wpcs,vendor/phpcompatibility/php-compatibility || true"
    32         ]
     28    "config": {
     29        "allow-plugins": {
     30            "composer/installers": true,
     31            "dealerdirect/phpcodesniffer-composer-installer": true
     32        }
    3333    }
    3434}

  • nelio-compare-images/trunk/index.php

    r2694346 r3408254  
    11<?php
    22// Silence is golden.
    3 

  • nelio-compare-images/trunk/nelio-compare-images.php

    r2998773 r3408254  
    44 *
    55 * @wordpress-plugin
    6  * Plugin Name: Nelio Compare Images Block
    7  * Plugin URI:  https://neliosoftware.com
    8  * Description: Before & After Image Block for Gutenberg.
    9  * Version:     1.0.5
     6 * Plugin Name:       Nelio Compare Images Block
     7 * Plugin URI:        https://neliosoftware.com
     8 * Description:       Before & After Image Block for Gutenberg.
     9 * Version:           1.0.6
    1010 *
    1111 * Author:            Nelio Software
    … …  
    1313 * License:           GPL-3.0+
    1414 * License URI:       http://www.gnu.org/licenses/gpl-3.0.txt
     15 *
     16 * Requires at least: 6.6
     17 * Requires PHP:      7.4
    1518 *
    1619 * Text Domain:       nelio-compare-images
    … …  
    2730define( 'NELIO_COMPARE_IMAGES', true );
    2831
     32/**
     33 * Returns the plugin path.
     34 *
     35 * @return string
     36 */
    2937function nelioci_path() {
    3038    return untrailingslashit( plugin_dir_path( __FILE__ ) );
    3139}//end nelioci_path()
    3240
     41/**
     42 * Callback to register block type.
     43 *
     44 * @return void
     45 */
    3346function nelioci_register_block_types() {
    3447    if ( ! function_exists( 'register_block_type' ) ) {

  • nelio-compare-images/trunk/package.json

    r2694346 r3408254  
    2020    },
    2121    "homepage": "https://bitbucket.com/neliosoftware/nelio-compare-images#readme",
     22    "prettier": "@wordpress/prettier-config",
    2223    "scripts": {
    2324        "build": "wp-scripts build",
    24         "format": "wp-scripts format src",
    25         "lint:css": "wp-scripts lint-style",
    26         "lint:js": "wp-scripts lint-js",
    27         "start": "wp-scripts start"
     25        "format": "nelio-format-all",
     26        "format:css": "nelio-format-css",
     27        "format:js": "nelio-format-js",
     28        "format:php": "nelio-format-php",
     29        "lint": "nelio-lint-all",
     30        "lint:css": "nelio-lint-css",
     31        "lint:js": "nelio-lint-js",
     32        "lint:php": "nelio-lint-php",
     33        "start": "wp-scripts start",
     34        "tasks": "ag --recurse --word --noheading --nobreak --ignore={'node_modules','vendor','dist','.lando','package.json'} \"TODO|FIXME|BUG|NOTE|HACK|XXX|INFO|OPTIMIZE|REVIEW|DEPRECATED|WARNING|PERF|DEBUG|DOC\"",
     35        "postinstall": "touch node_modules/.metadata_never_index && rm -f .git/hooks/pre-commit && ln -s ~/.local/bin/nelio-pre-commit .git/hooks/pre-commit",
     36        "release": "nelio-svn-publish",
     37        "zipify": "nelio-zipify"
    2838    },
    2939    "devDependencies": {
    30         "@babel/eslint-parser": "^7.17.0",
    31         "@types/wordpress__block-editor": "^6.0.5",
    32         "@types/wordpress__blocks": "^9.1.1",
    33         "@types/wordpress__editor": "^10.0.1",
    34         "@typescript-eslint/eslint-plugin": "^5.15.0",
    35         "@typescript-eslint/parser": "^5.15.0",
    36         "@wordpress/block-editor": "^8.3.1",
    37         "@wordpress/blocks": "^11.3.1",
    38         "@wordpress/components": "^19.6.1",
    39         "@wordpress/editor": "^12.3.1",
    40         "@wordpress/eslint-plugin": "^11.0.1",
    41         "@wordpress/i18n": "^4.4.1",
    42         "@wordpress/scripts": "^22.0.1",
    43         "classnames": "^2.3.1",
    44         "eslint-config-prettier": "^8.5.0",
    45         "eslint-import-resolver-typescript": "^2.5.0",
    46         "eslint-plugin-import": "^2.25.4",
    47         "eslint-plugin-react": "^7.29.4",
     40        "@types/lodash": "^4.17.20",
     41        "@types/wordpress__block-editor": "7.0.0",
     42        "@types/wordpress__editor": "14.3.1",
     43        "@typescript-eslint/eslint-plugin": "^8.27.0",
     44        "@typescript-eslint/parser": "^8.27.0",
     45        "@wordpress/block-editor": "^13.0.7",
     46        "@wordpress/blocks": "^13.0.3",
     47        "@wordpress/components": "^28.0.3",
     48        "@wordpress/eslint-plugin": "latest",
     49        "@wordpress/i18n": "^5.0.1",
     50        "@wordpress/prettier-config": "latest",
     51        "@wordpress/scripts": "latest",
     52        "clsx": "^2.1.1",
     53        "copy-webpack-plugin": "^13.0.1",
     54        "eslint-import-resolver-typescript": "^4.4.4",
     55        "fork-ts-checker-webpack-plugin": "^9.0.2",
    4856        "lodash": "^4.17.21",
    49         "ts-loader": "^9.2.8",
    50         "typescript": "^4.1.6",
    51         "wp-prettier": "^2.2.1-beta-1"
     57        "prettier": "npm:wp-prettier@latest",
     58        "ts-loader": "^9.5.2",
     59        "typescript": "^5.8.2"
    5260    }
    5361}

  • nelio-compare-images/trunk/readme.txt

    r3055984 r3408254  
    1 === Nelio Compare Images ===
     1=== Nelio Compare Images Block ===
    22Contributors: nelio, davilera, avillegasn
    33Donate Link: https://paypal.me/neliosoftware
    44Tags: before image, after image, image comparison, compare images, gutenberg block
    55Requires PHP: 7.4
    6 Requires at least: 5.7
    7 Tested up to: 6.5
    8 Stable tag: 1.0.5
     6Requires at least: 6.6
     7Tested up to: 6.9
     8Stable tag: 1.0.6
    99License: GPLv3 or later
    1010License URI: http://www.gnu.org/licenses/gpl-3.0.html
    … …  
    7878== Changelog ==
    7979
     80= 1.0.6 (December 2, 2025) =
     81* Update coding standards.
     82
    8083= 1.0.5 (November 20, 2023) =
    8184* Fix JS error that prevented the slider from being moved.
    … …  
    104107== Upgrade Notice ==
    105108
    106 = 1.0.5 (November 20, 2023) =
    107 Fixes and WP 6.4 compat.
     109= 1.0.6 (December 2, 2025) =
     110Update coding standards.

  • nelio-compare-images/trunk/src/block.json

    r2694346 r3408254  
    11{
    22    "$schema": "https://schemas.wp.org/trunk/block.json",
    3     "apiVersion": 2,
     3    "apiVersion": 3,
    44    "name": "nelio/compare-images",
    55    "title": "Compare Images",

  • nelio-compare-images/trunk/src/edit.tsx

    r2694346 r3408254  
    22 * WordPress dependencies.
    33 */
    4 import * as React from '@wordpress/element';
    54import {
    65    useBlockProps,
    … …  
    1413 * External dependencies.
    1514 */
    16 import classnames from 'classnames';
     15import classnames from 'clsx';
    1716
    1817/**
    … …  
    2423import { Toolbar } from './toolbar';
    2524
    26 const EditBlock = ( props: BlockEditProps< Attributes > ) => (
     25const EditBlock = ( props: BlockEditProps< Attributes > ): JSX.Element => (
    2726    <>
    2827        { props.isSelected && <Inspector { ...props } /> }
    … …  
    159158    >
    160159        { ! imageId ? (
    161             <MediaPlaceholder
    162                 allowedTypes={ [ 'image' ] }
    163                 multiple={ false }
    164                 onSelect={ ( { id, url, alt } ) =>
    165                     // TODO. Remove explicit casts.
    166                     onChange( id, url as string, alt as string )
    167                 }
    168                 value={ imageId }
    169                 labels={ {
    170                     title: getTitle( mode ),
    171                     instructions: _x(
    172                         'Select an image…',
    173                         'text',
    174                         'nelio-compare-images'
    175                     ),
    176                 } }
    177             />
     160            <>
     161                { /* @ts-expect-error onHTMLDrop property is not mandatory */ }
     162                <MediaPlaceholder
     163                    allowedTypes={ [ 'image' ] }
     164                    multiple={ false }
     165                    onSelect={ ( { id, url, alt } ) =>
     166                        onChange( id, url as string, alt as string )
     167                    }
     168                    value={ imageId }
     169                    labels={ {
     170                        title: getTitle( mode ),
     171                        instructions: _x(
     172                            'Select an image…',
     173                            'text',
     174                            'nelio-compare-images'
     175                        ),
     176                    } }
     177                />
     178            </>
    178179        ) : (
    179180            <img alt={ getTitle( mode ) } src={ imageUrl } />

  • nelio-compare-images/trunk/src/editor.scss

    r2694346 r3408254  
    1 #editor .wp-block-nelio-compare-images {
     1.editor-styles-wrapper .wp-block-nelio-compare-images {
    22
    33    &__comparison-wrapper--is-image-missing {
    4 
    54        display: flex;
    65        flex-direction: column;
    … …  
    1615            position: relative;
    1716        }
    18 
    1917    }
    2018

  • nelio-compare-images/trunk/src/index.ts

    r2694346 r3408254  
    1212import save from './save';
    1313
     14// @ts-expect-error I don’t know how to properly set metadata’s type
    1415registerBlockType( metadata as BlockConfiguration, {
    1516    edit,

  • nelio-compare-images/trunk/src/inspector.tsx

    r2694346 r3408254  
    22 * WordPress dependencies.
    33 */
    4 import * as React from '@wordpress/element';
    54import {
    65    ExternalLink,
    … …  
    98    RangeControl,
    109} from '@wordpress/components';
    11 import { InspectorControls } from '@wordpress/editor';
     10import { InspectorControls } from '@wordpress/block-editor';
    1211import { _x } from '@wordpress/i18n';
    1312import type { BlockEditProps } from '@wordpress/blocks';
    … …  
    2120    attributes: { afterAlt, beforeAlt, dividerLocation },
    2221    setAttributes,
    23 }: BlockEditProps< Attributes > ) => (
     22}: BlockEditProps< Attributes > ): JSX.Element => (
    2423    <InspectorControls>
    2524        <PanelBody
    … …  
    3332                    'nelio-compare-images'
    3433                ) }
     34                __nextHasNoMarginBottom
    3535                initialPosition={ dividerLocation }
    3636                value={ dividerLocation }
    … …  
    4848                    'nelio-compare-images'
    4949                ) }
     50                __nextHasNoMarginBottom
    5051                value={ beforeAlt || '' }
    5152                onChange={ ( value ) => setAttributes( { beforeAlt: value } ) }
    … …  
    6061                value={ afterAlt || '' }
    6162                onChange={ ( value ) => setAttributes( { afterAlt: value } ) }
     63                __nextHasNoMarginBottom
    6264                help={
    6365                    <>

  • nelio-compare-images/trunk/src/save.tsx

    r2694346 r3408254  
    22 * WordPress dependencies.
    33 */
    4 import * as React from '@wordpress/element';
    54import { RichText, useBlockProps } from '@wordpress/block-editor';
    65
    … …  
    87 * External dependencies.
    98 */
    10 import classnames from 'classnames';
     9import classnames from 'clsx';
    1110
    1211/**
    … …  
    3433    },
    3534    className,
    36 }: SaveProps ) => {
     35}: SaveProps ): JSX.Element => {
    3736    const blockProps = useBlockProps.save( {
    3837        className: classnames( 'wp-block-nelio-compare-images', className, {

  • nelio-compare-images/trunk/src/style.scss

    r2694346 r3408254  
    2727    &__after-image {
    2828        position: absolute;
     29
    2930        img {
    3031            height: 100%;
    … …  
    3940        right: 0;
    4041        top: 0;
     42
    4143        img {
    4244            object-position: top right;
    … …  
    5052        right: 0;
    5153        width: 100%;
     54
    5255        img {
    5356            object-position: bottom left;
    … …  
    8588        user-select: none;
    8689
    87         &:after {
     90        &::after {
    8891            align-items: center;
    8992            background: inherit;
    … …  
    117120            width: 100%;
    118121
    119             &:after {
     122            &::after {
    120123                transform: translate(-50%, -50%) rotate(0);
    121124            }
    … …  
    129132
    130133    @media (min-width: 50em) {
     134
    131135        &__handler {
    132136            opacity: 0;
    133137        }
     138
    134139        &:hover {
     140
    135141            .wp-block-nelio-compare-images__handler {
    136142                opacity: 1;
    … …  
    138144        }
    139145    }
    140 
    141146}

  • nelio-compare-images/trunk/src/toolbar.tsx

    r2694346 r3408254  
    22 * WordPress dependencies
    33 */
    4 import * as React from '@wordpress/element';
    54import {
    65    Toolbar as ToolbarControls,
    … …  
    1110    MediaUpload,
    1211    MediaUploadCheck,
    13 } from '@wordpress/editor';
     12} from '@wordpress/block-editor';
    1413import { _x } from '@wordpress/i18n';
    1514import type { BlockEditProps } from '@wordpress/blocks';
    … …  
    2322    attributes: { isVertical, beforeId, afterId },
    2423    setAttributes,
    25 }: BlockEditProps< Attributes > ) => (
    26     <BlockControls>
    27         <ToolbarControls>
    28             <ToolbarButton
    29                 icon="image-flip-vertical"
    30                 isPressed={ isVertical }
    31                 onClick={ () => setAttributes( { isVertical: ! isVertical } ) }
    32                 label={ _x(
    33                     'Vertical Comparison',
    34                     'text',
    35                     'nelio-compare-images'
     24}: BlockEditProps< Attributes > ): JSX.Element => (
     25    <>
     26        { /* @ts-expect-error controls property is not mandatory */ }
     27        <BlockControls>
     28            { /* @ts-expect-error label property is not mandatory */ }
     29            <ToolbarControls>
     30                <ToolbarButton
     31                    icon="image-flip-vertical"
     32                    isPressed={ isVertical }
     33                    onClick={ () =>
     34                        setAttributes( { isVertical: ! isVertical } )
     35                    }
     36                    label={ _x(
     37                        'Vertical Comparison',
     38                        'text',
     39                        'nelio-compare-images'
     40                    ) }
     41                />
     42
     43                { !! beforeId && !! afterId && (
     44                    <>
     45                        <MediaUploadButton
     46                            icon="format-image"
     47                            value={ beforeId }
     48                            onSelect={ ( id, url, alt ) =>
     49                                setAttributes( {
     50                                    beforeId: id,
     51                                    beforeUrl: url,
     52                                    beforeAlt: alt,
     53                                } )
     54                            }
     55                            label={ _x(
     56                                'Change before image…',
     57                                'command',
     58                                'nelio-compare-images'
     59                            ) }
     60                        />
     61
     62                        <MediaUploadButton
     63                            icon="format-gallery"
     64                            value={ afterId }
     65                            onSelect={ ( id, url, alt ) =>
     66                                setAttributes( {
     67                                    afterId: id,
     68                                    afterUrl: url,
     69                                    afterAlt: alt,
     70                                } )
     71                            }
     72                            label={ _x(
     73                                'Change after image…',
     74                                'command',
     75                                'nelio-compare-images'
     76                            ) }
     77                        />
     78                    </>
    3679                ) }
    37             />
    38 
    39             { !! beforeId && !! afterId && (
    40                 <>
    41                     <MediaUploadButton
    42                         icon="format-image"
    43                         value={ beforeId }
    44                         onSelect={ ( id, url, alt ) =>
    45                             setAttributes( {
    46                                 beforeId: id,
    47                                 beforeUrl: url,
    48                                 beforeAlt: alt,
    49                             } )
    50                         }
    51                         label={ _x(
    52                             'Change before image…',
    53                             'command',
    54                             'nelio-compare-images'
    55                         ) }
    56                     />
    57 
    58                     <MediaUploadButton
    59                         icon="format-gallery"
    60                         value={ afterId }
    61                         onSelect={ ( id, url, alt ) =>
    62                             setAttributes( {
    63                                 afterId: id,
    64                                 afterUrl: url,
    65                                 afterAlt: alt,
    66                             } )
    67                         }
    68                         label={ _x(
    69                             'Change after image…',
    70                             'command',
    71                             'nelio-compare-images'
    72                         ) }
    73                     />
    74                 </>
    75             ) }
    76         </ToolbarControls>
    77     </BlockControls>
     80            </ToolbarControls>
     81        </BlockControls>
     82    </>
    7883);
    7984
    … …  
    103108            multiple={ false }
    104109            value={ value }
     110            // eslint-disable-next-line @typescript-eslint/unbound-method
    105111            render={ ( { open } ) => (
    106112                <ToolbarButton icon={ icon } onClick={ open } label={ label } />

  • nelio-compare-images/trunk/src/view.ts

    r2998773 r3408254  
    117117    const clientX = isMouseEvent( ev )
    118118        ? ev.clientX
    119         : ev.targetTouches[ 0 ].clientX;
     119        : ev.targetTouches[ 0 ]?.clientX ?? 0;
    120120    const clientY = isMouseEvent( ev )
    121121        ? ev.clientY
    122         : ev.targetTouches[ 0 ].clientY;
     122        : ev.targetTouches[ 0 ]?.clientY ?? 0;
    123123    const x = ( clientX - rect.left ) / rect.width;
    124124    const y = ( clientY - rect.top ) / rect.height;

  • nelio-compare-images/trunk/tsconfig.json

    r2694346 r3408254  
    22    "compilerOptions": {
    33        "baseUrl": "./",
    4         "target": "es5",
     4        "jsx": "react-jsx",
     5        "lib": [ "es2021", "dom" ],
    56        "module": "esnext",
    6         "jsx": "react",
    77        "moduleResolution": "node",
    8         "sourceMap": true,
    9         "emitDecoratorMetadata": true,
    10         "experimentalDecorators": true,
    11         "esModuleInterop": true,
    12         "removeComments": false,
    138        "outDir": "build",
    149        "allowUnusedLabels": false,
     10        "alwaysStrict": true,
     11        "emitDecoratorMetadata": true,
     12        "esModuleInterop": true,
     13        "exactOptionalPropertyTypes": false,
     14        "experimentalDecorators": true,
     15        "noImplicitAny": true,
    1516        "noImplicitReturns": true,
     17        "noImplicitThis": true,
     18        "noUncheckedIndexedAccess": true,
     19        "noUnusedLocals": true,
    1620        "noUnusedParameters": true,
    17         "noUnusedLocals": true,
     21        "pretty": true,
     22        "removeComments": false,
    1823        "resolveJsonModule": true,
    1924        "skipLibCheck": true,
     25        "sourceMap": true,
     26        "strictFunctionTypes": true,
    2027        "strictNullChecks": true,
    21         "lib": [
    22             "es7",
    23             "dom"
    24         ],
    25         "pretty": true,
    26         "typeRoots": [
    27             "node_modules/@types"
    28         ]
     28        "target": "es2015",
     29        "typeRoots": [ "node_modules/@types", "types" ]
    2930    },
    30     "exclude": [
    31         "node_modules"
    32     ],
     31    "include": [ "src" ],
     32    "exclude": [ "node_modules" ],
    3333    "compileOnSave": false,
    3434    "buildOnSave": false

  • nelio-compare-images/trunk/webpack.config.js

    r2694346 r3408254  
     1/**
     2 * External dependencies
     3 */
    14const _ = require( 'lodash' );
     5const os = require( 'os' );
     6const { exec } = require( 'child_process' );
     7const ForkTsCheckerWebpackPlugin = require( 'fork-ts-checker-webpack-plugin' );
     8
     9/**
     10 * WordPress dependencies
     11 */
    212const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
    313
     14// =======
     15// PLUGINS
     16// =======
     17
     18class ValidChecksumGenerator {
     19    apply( compiler ) {
     20        compiler.hooks.done.tap( 'RunScriptAfterEmitPlugin', ( stats ) => {
     21            if ( stats.hasErrors() ) {
     22                return;
     23            }
     24            exec(
     25                `${ os.homedir() }/.local/bin/nelio-checksum --generate-js-build`
     26            );
     27        } );
     28    }
     29}
     30
     31// ======
     32// CONFIG
     33// ======
     34
     35const config = {
     36    ...defaultConfig,
     37    plugins: [
     38        ...defaultConfig.plugins,
     39        new ForkTsCheckerWebpackPlugin( {
     40            typescript: {
     41                memoryLimit: 8192,
     42            },
     43        } ),
     44        new ValidChecksumGenerator(),
     45    ].filter( /* if plugin exists */ ( x ) => !! x ),
     46    watchOptions: {
     47        ignored: /node_modules|^((?!(src)).)*$/,
     48    },
     49};
     50
    451module.exports = {
    5     ...defaultConfig,
     52    ...config,
    653    resolve: {
    754        ...defaultConfig.resolve,
    8         extensions: _.union(
    9             defaultConfig.resolve.extensions ?? [],
    10             [ '.js', '.jsx', '.ts', '.tsx' ]
    11         ),
     55        extensions: _.union( defaultConfig.resolve.extensions ?? [], [
     56            '.js',
     57            '.jsx',
     58            '.ts',
     59            '.tsx',
     60        ] ),
    1261    },
    1362    module: {
Note: See TracChangeset for help on using the changeset viewer.