diff --git a/.github/changelog/pr-1657 b/.github/changelog/pr-1657 new file mode 100644 index 000000000..ac7cf2a4e --- /dev/null +++ b/.github/changelog/pr-1657 @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Reactions block heading now uses Core's heading block with all its customization options. diff --git a/build/editor-plugin/plugin.asset.php b/build/editor-plugin/plugin.asset.php index 398c97976..518c13524 100644 --- a/build/editor-plugin/plugin.asset.php +++ b/build/editor-plugin/plugin.asset.php @@ -1 +1 @@ - array('react', 'wp-components', 'wp-core-data', 'wp-data', 'wp-editor', 'wp-element', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url'), 'version' => '0e62f4c0e900c6ca22c4'); + array('react', 'wp-components', 'wp-core-data', 'wp-data', 'wp-editor', 'wp-element', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url'), 'version' => '4cdf9a85d9cbbc6918ed'); diff --git a/build/editor-plugin/plugin.js b/build/editor-plugin/plugin.js index ff79c13e2..92e995f02 100644 --- a/build/editor-plugin/plugin.js +++ b/build/editor-plugin/plugin.js @@ -1 +1 @@ -(()=>{"use strict";var e={20:(e,t,i)=>{var n=i(609),a=Symbol.for("react.element"),o=(Symbol.for("react.fragment"),Object.prototype.hasOwnProperty),r=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l={key:!0,ref:!0,__self:!0,__source:!0};t.jsx=function(e,t,i){var n,c={},s=null,p=null;for(n in void 0!==i&&(s=""+i),void 0!==t.key&&(s=""+t.key),void 0!==t.ref&&(p=t.ref),t)o.call(t,n)&&!l.hasOwnProperty(n)&&(c[n]=t[n]);if(e&&e.defaultProps)for(n in t=e.defaultProps)void 0===c[n]&&(c[n]=t[n]);return{$$typeof:a,type:e,key:s,ref:p,props:c,_owner:r.current}}},848:(e,t,i)=>{e.exports=i(20)},609:e=>{e.exports=window.React}},t={};function i(n){var a=t[n];if(void 0!==a)return a.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,i),o.exports}var n=i(609);const a=window.wp.editor,o=window.wp.plugins,r=window.wp.components,l=window.wp.element,c=(0,l.forwardRef)((function({icon:e,size:t=24,...i},n){return(0,l.cloneElement)(e,{width:t,height:t,...i,ref:n})})),s=window.wp.primitives;var p=i(848);const u=(0,p.jsx)(s.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,p.jsx)(s.Path,{d:"M12 3.3c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8s-4-8.8-8.8-8.8zm6.5 5.5h-2.6C15.4 7.3 14.8 6 14 5c2 .6 3.6 2 4.5 3.8zm.7 3.2c0 .6-.1 1.2-.2 1.8h-2.9c.1-.6.1-1.2.1-1.8s-.1-1.2-.1-1.8H19c.2.6.2 1.2.2 1.8zM12 18.7c-1-.7-1.8-1.9-2.3-3.5h4.6c-.5 1.6-1.3 2.9-2.3 3.5zm-2.6-4.9c-.1-.6-.1-1.1-.1-1.8 0-.6.1-1.2.1-1.8h5.2c.1.6.1 1.1.1 1.8s-.1 1.2-.1 1.8H9.4zM4.8 12c0-.6.1-1.2.2-1.8h2.9c-.1.6-.1 1.2-.1 1.8 0 .6.1 1.2.1 1.8H5c-.2-.6-.2-1.2-.2-1.8zM12 5.3c1 .7 1.8 1.9 2.3 3.5H9.7c.5-1.6 1.3-2.9 2.3-3.5zM10 5c-.8 1-1.4 2.3-1.8 3.8H5.5C6.4 7 8 5.6 10 5zM5.5 15.3h2.6c.4 1.5 1 2.8 1.8 3.7-1.8-.6-3.5-2-4.4-3.7zM14 19c.8-1 1.4-2.2 1.8-3.7h2.6C17.6 17 16 18.4 14 19z"})}),v=(0,p.jsx)(s.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,p.jsx)(s.Path,{d:"M15.5 9.5a1 1 0 100-2 1 1 0 000 2zm0 1.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5zm-2.25 6v-2a2.75 2.75 0 00-2.75-2.75h-4A2.75 2.75 0 003.75 15v2h1.5v-2c0-.69.56-1.25 1.25-1.25h4c.69 0 1.25.56 1.25 1.25v2h1.5zm7-2v2h-1.5v-2c0-.69-.56-1.25-1.25-1.25H15v-1.5h2.5A2.75 2.75 0 0120.25 15zM9.5 8.5a1 1 0 11-2 0 1 1 0 012 0zm1.5 0a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z",fillRule:"evenodd"})}),w=(0,p.jsx)(s.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,p.jsx)(s.Path,{d:"M19.5 4.5h-7V6h4.44l-5.97 5.97 1.06 1.06L18 7.06v4.44h1.5v-7Zm-13 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3H17v3a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h3V5.5h-3Z"})}),d=window.wp.data,_=window.wp.coreData,m=window.wp.url,h=window.wp.i18n,b=(0,n.createElement)(s.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},(0,n.createElement)(s.Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M12 18.5A6.5 6.5 0 0 1 6.93 7.931l9.139 9.138A6.473 6.473 0 0 1 12 18.5Zm5.123-2.498a6.5 6.5 0 0 0-9.124-9.124l9.124 9.124ZM4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Z"}));(0,o.registerPlugin)("activitypub-editor-plugin",{render:()=>{const e=(0,d.useSelect)((e=>e("core/editor").getCurrentPostType()),[]),[t,i]=(0,_.useEntityProp)("postType",e,"meta"),o={verticalAlign:"middle",gap:"4px",justifyContent:"start",display:"inline-flex",alignItems:"center"},l=(e,t,i)=>(0,n.createElement)(r.Tooltip,{text:i},(0,n.createElement)(r.__experimentalText,{style:o},(0,n.createElement)(c,{icon:e}),t));return"wp_block"===e?null:(0,n.createElement)(a.PluginDocumentSettingPanel,{name:"activitypub",title:(0,h.__)("Fediverse ⁂","activitypub")},(0,n.createElement)(r.TextControl,{label:(0,h.__)("Content Warning","activitypub"),value:t?.activitypub_content_warning,onChange:e=>{i({...t,activitypub_content_warning:e})},placeholder:(0,h.__)("Optional content warning","activitypub"),help:(0,h.__)("Content warnings do not change the content on your site, only in the fediverse.","activitypub")}),(0,n.createElement)(r.RangeControl,{label:(0,h.__)("Maximum Image Attachments","activitypub"),value:t?.activitypub_max_image_attachments||window._activityPubOptions?.maxImageAttachments||4,onChange:e=>{i({...t,activitypub_max_image_attachments:e})},min:0,max:10,help:(0,h.__)("Maximum number of image attachments to include when sharing to the fediverse.","activitypub")}),(0,n.createElement)(r.RadioControl,{label:(0,h.__)("Visibility","activitypub"),help:(0,h.__)("This adjusts the visibility of a post in the fediverse, but note that it won't affect how the post appears on the blog.","activitypub"),selected:t?.activitypub_content_visibility||"public",options:[{label:l(u,(0,h.__)("Public","activitypub"),(0,h.__)("Post will be visible to everyone and appear in public timelines.","activitypub")),value:"public"},{label:l(v,(0,h.__)("Quiet public","activitypub"),(0,h.__)("Post will be visible to everyone but will not appear in public timelines.","activitypub")),value:"quiet_public"},{label:l(b,(0,h.__)("Do not federate","activitypub"),(0,h.__)("Post will not be shared to the Fediverse.","activitypub")),value:"local"}],onChange:e=>{i({...t,activitypub_content_visibility:e})},className:"activitypub-visibility"}))}}),(0,o.registerPlugin)("activitypub-editor-preview",{render:()=>{const e=(0,d.useSelect)((e=>e("core/editor").getCurrentPost().status));return(0,n.createElement)(n.Fragment,null,a.PluginPreviewMenuItem?(0,n.createElement)(a.PluginPreviewMenuItem,{onClick:()=>function(){const e=(0,d.select)("core/editor").getEditedPostPreviewLink(),t=(0,m.addQueryArgs)(e,{activitypub:"true"});window.open(t,"_blank")}(),icon:w,disabled:"auto-draft"===e},(0,h.__)("Fediverse preview ⁂","activitypub")):null)}})})(); \ No newline at end of file +(()=>{"use strict";var e={20:(e,t,i)=>{var n=i(609),a=Symbol.for("react.element"),o=(Symbol.for("react.fragment"),Object.prototype.hasOwnProperty),l=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,r={key:!0,ref:!0,__self:!0,__source:!0};t.jsx=function(e,t,i){var n,c={},s=null,u=null;for(n in void 0!==i&&(s=""+i),void 0!==t.key&&(s=""+t.key),void 0!==t.ref&&(u=t.ref),t)o.call(t,n)&&!r.hasOwnProperty(n)&&(c[n]=t[n]);if(e&&e.defaultProps)for(n in t=e.defaultProps)void 0===c[n]&&(c[n]=t[n]);return{$$typeof:a,type:e,key:s,ref:u,props:c,_owner:l.current}}},848:(e,t,i)=>{e.exports=i(20)},609:e=>{e.exports=window.React}},t={};function i(n){var a=t[n];if(void 0!==a)return a.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,i),o.exports}var n=i(609);const a=window.wp.editor,o=window.wp.plugins,l=window.wp.components,r=window.wp.element,c=(0,r.forwardRef)((function({icon:e,size:t=24,...i},n){return(0,r.cloneElement)(e,{width:t,height:t,...i,ref:n})})),s=window.wp.primitives;var u=i(848);const p=(0,u.jsx)(s.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,u.jsx)(s.Path,{d:"M12 3.3c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8s-4-8.8-8.8-8.8zm6.5 5.5h-2.6C15.4 7.3 14.8 6 14 5c2 .6 3.6 2 4.5 3.8zm.7 3.2c0 .6-.1 1.2-.2 1.8h-2.9c.1-.6.1-1.2.1-1.8s-.1-1.2-.1-1.8H19c.2.6.2 1.2.2 1.8zM12 18.7c-1-.7-1.8-1.9-2.3-3.5h4.6c-.5 1.6-1.3 2.9-2.3 3.5zm-2.6-4.9c-.1-.6-.1-1.1-.1-1.8 0-.6.1-1.2.1-1.8h5.2c.1.6.1 1.1.1 1.8s-.1 1.2-.1 1.8H9.4zM4.8 12c0-.6.1-1.2.2-1.8h2.9c-.1.6-.1 1.2-.1 1.8 0 .6.1 1.2.1 1.8H5c-.2-.6-.2-1.2-.2-1.8zM12 5.3c1 .7 1.8 1.9 2.3 3.5H9.7c.5-1.6 1.3-2.9 2.3-3.5zM10 5c-.8 1-1.4 2.3-1.8 3.8H5.5C6.4 7 8 5.6 10 5zM5.5 15.3h2.6c.4 1.5 1 2.8 1.8 3.7-1.8-.6-3.5-2-4.4-3.7zM14 19c.8-1 1.4-2.2 1.8-3.7h2.6C17.6 17 16 18.4 14 19z"})}),v=(0,u.jsx)(s.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,u.jsx)(s.Path,{d:"M15.5 9.5a1 1 0 100-2 1 1 0 000 2zm0 1.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5zm-2.25 6v-2a2.75 2.75 0 00-2.75-2.75h-4A2.75 2.75 0 003.75 15v2h1.5v-2c0-.69.56-1.25 1.25-1.25h4c.69 0 1.25.56 1.25 1.25v2h1.5zm7-2v2h-1.5v-2c0-.69-.56-1.25-1.25-1.25H15v-1.5h2.5A2.75 2.75 0 0120.25 15zM9.5 8.5a1 1 0 11-2 0 1 1 0 012 0zm1.5 0a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z",fillRule:"evenodd"})}),w=(0,u.jsx)(s.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,u.jsx)(s.Path,{d:"M19.5 4.5h-7V6h4.44l-5.97 5.97 1.06 1.06L18 7.06v4.44h1.5v-7Zm-13 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3H17v3a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h3V5.5h-3Z"})}),d=window.wp.data,_=window.wp.coreData,m=window.wp.url,h=window.wp.i18n,b=(0,n.createElement)(s.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},(0,n.createElement)(s.Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M12 18.5A6.5 6.5 0 0 1 6.93 7.931l9.139 9.138A6.473 6.473 0 0 1 12 18.5Zm5.123-2.498a6.5 6.5 0 0 0-9.124-9.124l9.124 9.124ZM4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Z"}));(0,o.registerPlugin)("activitypub-editor-plugin",{render:()=>{var e,t;const i=(0,d.useSelect)((e=>e("core/editor").getCurrentPostType()),[]),[o,r]=(0,_.useEntityProp)("postType",i,"meta"),s={verticalAlign:"middle",gap:"4px",justifyContent:"start",display:"inline-flex",alignItems:"center"},u=(e,t,i)=>(0,n.createElement)(l.Tooltip,{text:i},(0,n.createElement)(l.__experimentalText,{style:s},(0,n.createElement)(c,{icon:e}),t));return"wp_block"===i?null:(0,n.createElement)(a.PluginDocumentSettingPanel,{name:"activitypub",title:(0,h.__)("Fediverse ⁂","activitypub")},(0,n.createElement)(l.TextControl,{label:(0,h.__)("Content Warning","activitypub"),value:o?.activitypub_content_warning,onChange:e=>{r({...o,activitypub_content_warning:e})},placeholder:(0,h.__)("Optional content warning","activitypub"),help:(0,h.__)("Content warnings do not change the content on your site, only in the fediverse.","activitypub")}),(0,n.createElement)(l.RangeControl,{label:(0,h.__)("Maximum Image Attachments","activitypub"),value:null!==(e=null!==(t=o?.activitypub_max_image_attachments)&&void 0!==t?t:window._activityPubOptions?.maxImageAttachments)&&void 0!==e?e:4,onChange:e=>{r({...o,activitypub_max_image_attachments:e})},min:0,max:10,help:(0,h.__)("Maximum number of image attachments to include when sharing to the fediverse.","activitypub")}),(0,n.createElement)(l.RadioControl,{label:(0,h.__)("Visibility","activitypub"),help:(0,h.__)("This adjusts the visibility of a post in the fediverse, but note that it won't affect how the post appears on the blog.","activitypub"),selected:o?.activitypub_content_visibility||"public",options:[{label:u(p,(0,h.__)("Public","activitypub"),(0,h.__)("Post will be visible to everyone and appear in public timelines.","activitypub")),value:"public"},{label:u(v,(0,h.__)("Quiet public","activitypub"),(0,h.__)("Post will be visible to everyone but will not appear in public timelines.","activitypub")),value:"quiet_public"},{label:u(b,(0,h.__)("Do not federate","activitypub"),(0,h.__)("Post will not be shared to the Fediverse.","activitypub")),value:"local"}],onChange:e=>{r({...o,activitypub_content_visibility:e})},className:"activitypub-visibility"}))}}),(0,o.registerPlugin)("activitypub-editor-preview",{render:()=>{const e=(0,d.useSelect)((e=>e("core/editor").getCurrentPost().status));return(0,n.createElement)(n.Fragment,null,a.PluginPreviewMenuItem?(0,n.createElement)(a.PluginPreviewMenuItem,{onClick:()=>function(){const e=(0,d.select)("core/editor").getEditedPostPreviewLink(),t=(0,m.addQueryArgs)(e,{activitypub:"true"});window.open(t,"_blank")}(),icon:w,disabled:"auto-draft"===e},(0,h.__)("Fediverse preview ⁂","activitypub")):null)}})})(); \ No newline at end of file diff --git a/build/reactions/block.json b/build/reactions/block.json index e489c0f89..c35f01771 100644 --- a/build/reactions/block.json +++ b/build/reactions/block.json @@ -18,12 +18,7 @@ } } }, - "attributes": { - "title": { - "type": "string", - "default": "Fediverse reactions" - } - }, + "attributes": {}, "blockHooks": { "core/post-content": "after" }, diff --git a/build/reactions/index.asset.php b/build/reactions/index.asset.php index 6ac7d749a..b72795280 100644 --- a/build/reactions/index.asset.php +++ b/build/reactions/index.asset.php @@ -1 +1 @@ - array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '32631215c76c36b38e5e'); + array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '5dc49427a4f9aeaf63b5'); diff --git a/build/reactions/index.js b/build/reactions/index.js index 7ab57c580..0ed8ee1f4 100644 --- a/build/reactions/index.js +++ b/build/reactions/index.js @@ -1,3 +1,3 @@ -(()=>{"use strict";var e,t={373:(e,t,a)=>{const n=window.wp.blocks,r=window.React,l=window.wp.blockEditor,o=window.wp.element,s=window.wp.i18n,i=window.wp.components,c=window.wp.apiFetch;var u=a.n(c);function m(){return window._activityPubOptions||{}}const p=({reactions:e})=>{const{defaultAvatarUrl:t}=m(),[a,n]=(0,o.useState)(new Set),[l,s]=(0,o.useState)(new Map),i=(0,o.useRef)([]),c=()=>{i.current.forEach((e=>clearTimeout(e))),i.current=[]},u=(t,a)=>{c();const r=100,l=e.length;a&&s((e=>{const a=new Map(e);return a.set(t,"clockwise"),a}));const o=e=>{const o="right"===e,c=o?l-1:0,u=o?1:-1;for(let e=o?t:t-1;o?e<=c:e>=c;e+=u){const l=Math.abs(e-t),o=setTimeout((()=>{n((t=>{const n=new Set(t);return a?n.add(e):n.delete(e),n})),a&&e!==t&&s((t=>{const a=new Map(t),n=e-u,r=a.get(n);return a.set(e,"clockwise"===r?"counter":"clockwise"),a}))}),l*r);i.current.push(o)}};if(o("right"),o("left"),!a){const e=Math.max((l-t)*r,t*r),a=setTimeout((()=>{s(new Map)}),e+r);i.current.push(a)}};return(0,o.useEffect)((()=>()=>c()),[]),(0,r.createElement)("ul",{className:"reaction-avatars"},e.map(((e,n)=>{const o=l.get(n),s=["reaction-avatar",a.has(n)?"wave-active":"",o?`rotate-${o}`:""].filter(Boolean).join(" "),i=e.avatar||t;return(0,r.createElement)("li",{key:n},(0,r.createElement)("a",{href:e.url,target:"_blank",rel:"noopener noreferrer",onMouseEnter:()=>u(n,!0),onMouseLeave:()=>u(n,!1)},(0,r.createElement)("img",{src:i,alt:e.name,className:s,width:"32",height:"32"})))})))},f=({reactions:e,type:t})=>(0,r.createElement)("ul",{className:"activitypub-reaction-list"},e.map(((e,t)=>(0,r.createElement)("li",{key:t},(0,r.createElement)("a",{href:e.url,className:"reaction-item",target:"_blank",rel:"noopener noreferrer"},(0,r.createElement)("img",{src:e.avatar,alt:e.name,width:"32",height:"32"}),(0,r.createElement)("span",null,e.name)))))),h=({items:e,label:t})=>{const[a,n]=(0,o.useState)(!1),[l,s]=(0,o.useState)(null),[c,u]=(0,o.useState)(e.length),m=(0,o.useRef)(null);(0,o.useEffect)((()=>{if(!m.current)return;const t=()=>{const t=m.current;if(!t)return;const a=t.offsetWidth-(l?.offsetWidth||0)-12,n=Math.max(1,Math.floor((a-32)/22));u(Math.min(n,e.length))};t();const a=new ResizeObserver(t);return a.observe(m.current),()=>{a.disconnect()}}),[l,e.length]);const h=e.slice(0,c);return(0,r.createElement)("div",{className:"reaction-group",ref:m},(0,r.createElement)(p,{reactions:h}),(0,r.createElement)(i.Button,{ref:s,className:"reaction-label is-link",onClick:()=>n(!a),"aria-expanded":a},t),a&&l&&(0,r.createElement)(i.Popover,{anchor:l,onClose:()=>n(!1)},(0,r.createElement)(f,{reactions:e})))};function d({title:e="",postId:t=null,reactions:a=null,titleComponent:n=null}){const{namespace:l}=m(),[s,i]=(0,o.useState)(a),[c,p]=(0,o.useState)(!a);return(0,o.useEffect)((()=>{if(a)return i(a),void p(!1);t?(p(!0),u()({path:`/${l}/posts/${t}/reactions`}).then((e=>{i(e),p(!1)})).catch((()=>p(!1)))):p(!1)}),[t,a]),c?null:s&&Object.values(s).some((e=>e.items?.length>0))?(0,r.createElement)("div",{className:"activitypub-reactions"},n||e&&(0,r.createElement)("h6",null,e),Object.entries(s).map((([e,t])=>t.items?.length?(0,r.createElement)(h,{key:e,items:t.items,label:t.label}):null))):null}const v=e=>{const t=["#FF6B6B","#4ECDC4","#45B7D1","#96CEB4","#FFEEAD","#D4A5A5","#9B59B6","#3498DB","#E67E22"],a=(()=>{const e=["Bouncy","Cosmic","Dancing","Fluffy","Giggly","Hoppy","Jazzy","Magical","Nifty","Perky","Quirky","Sparkly","Twirly","Wiggly","Zippy"],t=["Badger","Capybara","Dolphin","Echidna","Flamingo","Giraffe","Hedgehog","Iguana","Jellyfish","Koala","Lemur","Manatee","Narwhal","Octopus","Penguin"];return`${e[Math.floor(Math.random()*e.length)]} ${t[Math.floor(Math.random()*t.length)]}`})(),n=t[Math.floor(Math.random()*t.length)],r=a.charAt(0),l=document.createElement("canvas");l.width=64,l.height=64;const o=l.getContext("2d");return o.fillStyle=n,o.beginPath(),o.arc(32,32,32,0,2*Math.PI),o.fill(),o.fillStyle="#FFFFFF",o.font="32px sans-serif",o.textAlign="center",o.textBaseline="middle",o.fillText(r,32,32),{name:a,url:"#",avatar:l.toDataURL()}},g=JSON.parse('{"UU":"activitypub/reactions"}');(0,n.registerBlockType)(g.UU,{edit:function({attributes:e,setAttributes:t,__unstableLayoutClassNames:a}){const n=(0,l.useBlockProps)({className:a}),[i]=(0,o.useState)({likes:{label:(0,s.sprintf)(/* translators: %d: Number of likes */ /* translators: %d: Number of likes */ -(0,s._x)("%d likes","number of likes","activitypub"),9),items:Array.from({length:9},((e,t)=>v()))},reposts:{label:(0,s.sprintf)(/* translators: %d: Number of reposts */ /* translators: %d: Number of reposts */ -(0,s._x)("%d reposts","number of reposts","activitypub"),6),items:Array.from({length:6},((e,t)=>v()))}}),c=(0,r.createElement)(l.RichText,{tagName:"h6",value:e.title,onChange:e=>t({title:e}),placeholder:(0,s.__)("Fediverse Reactions","activitypub"),disableLineBreaks:!0,allowedFormats:[]});return(0,r.createElement)("div",{...n},(0,r.createElement)(d,{titleComponent:c,reactions:i}))}})}},a={};function n(e){var r=a[e];if(void 0!==r)return r.exports;var l=a[e]={exports:{}};return t[e](l,l.exports,n),l.exports}n.m=t,e=[],n.O=(t,a,r,l)=>{if(!a){var o=1/0;for(u=0;u=l)&&Object.keys(n.O).every((e=>n.O[e](a[i])))?a.splice(i--,1):(s=!1,l0&&e[u-1][2]>l;u--)e[u]=e[u-1];e[u]=[a,r,l]},n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var a in t)n.o(t,a)&&!n.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={608:0,104:0};n.O.j=t=>0===e[t];var t=(t,a)=>{var r,l,o=a[0],s=a[1],i=a[2],c=0;if(o.some((t=>0!==e[t]))){for(r in s)n.o(s,r)&&(n.m[r]=s[r]);if(i)var u=i(n)}for(t&&t(a);cn(373)));r=n.O(r)})(); \ No newline at end of file +(()=>{"use strict";var e,t={29:(e,t,n)=>{const r=window.wp.blocks,a=[{attributes:{title:{type:"string",default:"Fediverse reactions"}},supports:{html:!1,align:!0,layout:{default:{type:"constrained",orientation:"vertical",justifyContent:"center"}}},isEligible:e=>!!e.title,migrate(e){const{title:t,...n}=e;return[n,[(0,r.createBlock)("core/heading",{content:t,level:6})]]}}],l=window.React,o=window.wp.blockEditor,i=window.wp.element,s=window.wp.i18n,c=window.wp.components,u=window.wp.apiFetch;var m=n.n(u);function p(){return window._activityPubOptions||{}}const f=({reactions:e})=>{const{defaultAvatarUrl:t}=p(),[n,r]=(0,i.useState)(new Set),[a,o]=(0,i.useState)(new Map),s=(0,i.useRef)([]),c=()=>{s.current.forEach((e=>clearTimeout(e))),s.current=[]},u=(t,n)=>{c();const a=100,l=e.length;n&&o((e=>{const n=new Map(e);return n.set(t,"clockwise"),n}));const i=e=>{const i="right"===e,c=i?l-1:0,u=i?1:-1;for(let e=i?t:t-1;i?e<=c:e>=c;e+=u){const l=Math.abs(e-t),i=setTimeout((()=>{r((t=>{const r=new Set(t);return n?r.add(e):r.delete(e),r})),n&&e!==t&&o((t=>{const n=new Map(t),r=e-u,a=n.get(r);return n.set(e,"clockwise"===a?"counter":"clockwise"),n}))}),l*a);s.current.push(i)}};if(i("right"),i("left"),!n){const e=Math.max((l-t)*a,t*a),n=setTimeout((()=>{o(new Map)}),e+a);s.current.push(n)}};return(0,i.useEffect)((()=>()=>c()),[]),(0,l.createElement)("ul",{className:"reaction-avatars"},e.map(((e,r)=>{const o=a.get(r),i=["reaction-avatar",n.has(r)?"wave-active":"",o?`rotate-${o}`:""].filter(Boolean).join(" "),s=e.avatar||t;return(0,l.createElement)("li",{key:r},(0,l.createElement)("a",{href:e.url,target:"_blank",rel:"noopener noreferrer",onMouseEnter:()=>u(r,!0),onMouseLeave:()=>u(r,!1)},(0,l.createElement)("img",{src:s,alt:e.name,className:i,width:"32",height:"32"})))})))},h=({reactions:e,type:t})=>(0,l.createElement)("ul",{className:"activitypub-reaction-list"},e.map(((e,t)=>(0,l.createElement)("li",{key:t},(0,l.createElement)("a",{href:e.url,className:"reaction-item",target:"_blank",rel:"noopener noreferrer"},(0,l.createElement)("img",{src:e.avatar,alt:e.name,width:"32",height:"32"}),(0,l.createElement)("span",null,e.name)))))),d=({items:e,label:t})=>{const[n,r]=(0,i.useState)(!1),[a,o]=(0,i.useState)(null),[s,u]=(0,i.useState)(e.length),m=(0,i.useRef)(null);(0,i.useEffect)((()=>{if(!m.current)return;const t=()=>{const t=m.current;if(!t)return;const n=t.offsetWidth-(a?.offsetWidth||0)-12,r=Math.max(1,Math.floor((n-32)/22));u(Math.min(r,e.length))};t();const n=new ResizeObserver(t);return n.observe(m.current),()=>{n.disconnect()}}),[a,e.length]);const p=e.slice(0,s);return(0,l.createElement)("div",{className:"reaction-group",ref:m},(0,l.createElement)(f,{reactions:p}),(0,l.createElement)(c.Button,{ref:o,className:"reaction-label is-link",onClick:()=>r(!n),"aria-expanded":n},t),n&&a&&(0,l.createElement)(c.Popover,{anchor:a,onClose:()=>r(!1)},(0,l.createElement)(h,{reactions:e})))};function v({postId:e=null,reactions:t=null,title:n=null}){const{namespace:r}=p(),[a,o]=(0,i.useState)(t),[s,c]=(0,i.useState)(!t);return(0,i.useEffect)((()=>{if(t)return o(t),void c(!1);e?(c(!0),m()({path:`/${r}/posts/${e}/reactions`}).then((e=>{o(e),c(!1)})).catch((()=>c(!1)))):c(!1)}),[e,t]),s?null:a&&Object.values(a).some((e=>e.items?.length>0))?(0,l.createElement)(l.Fragment,null,n&&(0,l.createElement)("h6",null,n),Object.entries(a).map((([e,t])=>t.items?.length?(0,l.createElement)(d,{key:e,items:t.items,label:t.label}):null))):null}const g=e=>{const t=["#FF6B6B","#4ECDC4","#45B7D1","#96CEB4","#FFEEAD","#D4A5A5","#9B59B6","#3498DB","#E67E22"],n=(()=>{const e=["Bouncy","Cosmic","Dancing","Fluffy","Giggly","Hoppy","Jazzy","Magical","Nifty","Perky","Quirky","Sparkly","Twirly","Wiggly","Zippy"],t=["Badger","Capybara","Dolphin","Echidna","Flamingo","Giraffe","Hedgehog","Iguana","Jellyfish","Koala","Lemur","Manatee","Narwhal","Octopus","Penguin"];return`${e[Math.floor(Math.random()*e.length)]} ${t[Math.floor(Math.random()*t.length)]}`})(),r=t[Math.floor(Math.random()*t.length)],a=n.charAt(0),l=document.createElement("canvas");l.width=64,l.height=64;const o=l.getContext("2d");return o.fillStyle=r,o.beginPath(),o.arc(32,32,32,0,2*Math.PI),o.fill(),o.fillStyle="#FFFFFF",o.font="32px sans-serif",o.textAlign="center",o.textBaseline="middle",o.fillText(a,32,32),{name:n,url:"#",avatar:l.toDataURL()}},w=JSON.parse('{"UU":"activitypub/reactions"}');(0,r.registerBlockType)(w.UU,{deprecated:a,edit:function({attributes:e,__unstableLayoutClassNames:t}){const n=(0,o.useBlockProps)({className:t}),[r]=(0,i.useState)({likes:{label:(0,s.sprintf)(/* translators: %d: Number of likes */ /* translators: %d: Number of likes */ +(0,s._x)("%d likes","number of likes","activitypub"),9),items:Array.from({length:9},((e,t)=>g()))},reposts:{label:(0,s.sprintf)(/* translators: %d: Number of reposts */ /* translators: %d: Number of reposts */ +(0,s._x)("%d reposts","number of reposts","activitypub"),6),items:Array.from({length:6},((e,t)=>g()))}}),a=[["core/heading",{level:6,placeholder:(0,s.__)("Fediverse Reactions","activitypub"),content:(0,s.__)("Fediverse Reactions","activitypub")}]];return(0,l.createElement)("div",{...n},(0,l.createElement)(o.InnerBlocks,{template:a,allowedBlocks:["core/heading"],templateLock:!1}),(0,l.createElement)(v,{reactions:r}))},save:function(){return(0,l.createElement)(l.Fragment,null,(0,l.createElement)(o.InnerBlocks.Content,null),(0,l.createElement)("div",{className:"activitypub-reactions-block"}))}})}},n={};function r(e){var a=n[e];if(void 0!==a)return a.exports;var l=n[e]={exports:{}};return t[e](l,l.exports,r),l.exports}r.m=t,e=[],r.O=(t,n,a,l)=>{if(!n){var o=1/0;for(u=0;u=l)&&Object.keys(r.O).every((e=>r.O[e](n[s])))?n.splice(s--,1):(i=!1,l0&&e[u-1][2]>l;u--)e[u]=e[u-1];e[u]=[n,a,l]},r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={608:0,104:0};r.O.j=t=>0===e[t];var t=(t,n)=>{var a,l,o=n[0],i=n[1],s=n[2],c=0;if(o.some((t=>0!==e[t]))){for(a in i)r.o(i,a)&&(r.m[a]=i[a]);if(s)var u=s(r)}for(t&&t(n);cr(29)));a=r.O(a)})(); \ No newline at end of file diff --git a/build/reactions/style-index-rtl.css b/build/reactions/style-index-rtl.css index 593e31744..d0f5098e5 100644 --- a/build/reactions/style-index-rtl.css +++ b/build/reactions/style-index-rtl.css @@ -1 +1 @@ -.activitypub-reactions h6{border-top:1px solid;border-top-color:var(--wp--preset--color--contrast-2);display:inline-block;padding-top:.5em}.activitypub-reactions .reaction-group{align-items:center;display:flex;gap:.75em;justify-content:flex-start;margin:.5em 0;position:relative;width:100%}@media(max-width:782px){.activitypub-reactions .reaction-group:has(.reaction-avatars:not(:empty)){justify-content:space-between}}.activitypub-reactions .reaction-avatars{align-items:center;display:flex;flex-direction:row;list-style:none;margin:0;padding:0}.activitypub-reactions .reaction-avatars li{margin:0 0 0 -10px;padding:0}.activitypub-reactions .reaction-avatars li:last-child{margin-left:0}.activitypub-reactions .reaction-avatars li a{display:block;text-decoration:none}.activitypub-reactions .reaction-avatars .reaction-avatar{border:.5px solid var(--wp--preset--color--contrast,hsla(0,0%,100%,.8));border-radius:50%;box-shadow:0 0 0 .5px hsla(0,0%,100%,.8),0 1px 3px rgba(0,0,0,.2);height:32px;transition:transform .6s cubic-bezier(.34,1.56,.64,1);width:32px;will-change:transform}.activitypub-reactions .reaction-avatars .reaction-avatar.wave-active{transform:translateY(-5px)}.activitypub-reactions .reaction-avatars .reaction-avatar.wave-active.rotate-clockwise{transform:translateY(-5px) rotate(-30deg)}.activitypub-reactions .reaction-avatars .reaction-avatar.wave-active.rotate-counter{transform:translateY(-5px) rotate(30deg)}.activitypub-reactions .reaction-avatars .reaction-avatar:hover{position:relative;z-index:1}.activitypub-reactions .reaction-label.components-button{color:var(--wp--preset--color--contrast,--wp--preset--color--secondary,#2271b1);flex:0 0 auto;height:auto;padding:0;text-decoration:none;white-space:nowrap}.activitypub-reactions .reaction-label.components-button:hover{color:var(--wp--preset--color--contrast,--wp--preset--color--secondary,#135e96);text-decoration:underline}.activitypub-reactions .reaction-label.components-button:focus:not(:disabled){box-shadow:none;outline:1px solid var(--wp--preset--color--contrast,#135e96);outline-offset:2px}.activitypub-reaction-list{background-color:var(--wp--preset--color--background,var(--wp--preset--color--custom-background,var(--wp--preset--color--base)));list-style:none;margin:0;max-width:300px;padding:.25em .7em .25em 1.3em;width:-moz-max-content;width:max-content}.activitypub-reaction-list ul{margin:0;padding:0}.activitypub-reaction-list li{font-size:var(--wp--preset--font-size--small);margin:0;padding:0}.activitypub-reaction-list a{align-items:center;color:var(--wp--preset--color--contrast,var(--wp--preset--color--secondary));display:flex;font-size:var(--wp--preset--font-size--small,.75rem);gap:.5em;justify-content:flex-start;padding:.5em;text-decoration:none}.activitypub-reaction-list a:hover{text-decoration:underline}.activitypub-reaction-list a img{border-radius:50%;flex:none;height:24px;width:24px} +.wp-block-activitypub-reactions .reaction-group{align-items:center;display:flex;gap:.75em;justify-content:flex-start;margin:.5em 0;position:relative;width:100%}@media(max-width:782px){.wp-block-activitypub-reactions .reaction-group:has(.reaction-avatars:not(:empty)){justify-content:space-between}}.wp-block-activitypub-reactions .reaction-avatars{align-items:center;display:flex;flex-direction:row;list-style:none;margin:0;padding:0}.wp-block-activitypub-reactions .reaction-avatars li{margin:0 0 0 -10px;padding:0}.wp-block-activitypub-reactions .reaction-avatars li:last-child{margin-left:0}.wp-block-activitypub-reactions .reaction-avatars li a{display:block;text-decoration:none}.wp-block-activitypub-reactions .reaction-avatars .reaction-avatar{border:.5px solid var(--wp--preset--color--contrast,hsla(0,0%,100%,.8));border-radius:50%;box-shadow:0 0 0 .5px hsla(0,0%,100%,.8),0 1px 3px rgba(0,0,0,.2);height:32px;transition:transform .6s cubic-bezier(.34,1.56,.64,1);width:32px;will-change:transform}.wp-block-activitypub-reactions .reaction-avatars .reaction-avatar.wave-active{transform:translateY(-5px)}.wp-block-activitypub-reactions .reaction-avatars .reaction-avatar.wave-active.rotate-clockwise{transform:translateY(-5px) rotate(-30deg)}.wp-block-activitypub-reactions .reaction-avatars .reaction-avatar.wave-active.rotate-counter{transform:translateY(-5px) rotate(30deg)}.wp-block-activitypub-reactions .reaction-avatars .reaction-avatar:hover{position:relative;z-index:1}.wp-block-activitypub-reactions .reaction-label.components-button{color:var(--wp--preset--color--contrast,--wp--preset--color--secondary,#2271b1);flex:0 0 auto;height:auto;padding:0;text-decoration:none;white-space:nowrap}.wp-block-activitypub-reactions .reaction-label.components-button:hover{color:var(--wp--preset--color--contrast,--wp--preset--color--secondary,#135e96);text-decoration:underline}.wp-block-activitypub-reactions .reaction-label.components-button:focus:not(:disabled){box-shadow:none;outline:1px solid var(--wp--preset--color--contrast,#135e96);outline-offset:2px}.activitypub-reaction-list{background-color:var(--wp--preset--color--background,var(--wp--preset--color--custom-background,var(--wp--preset--color--base)));list-style:none;margin:0;max-width:300px;padding:.25em .7em .25em 1.3em;width:-moz-max-content;width:max-content}.activitypub-reaction-list ul{margin:0;padding:0}.activitypub-reaction-list li{font-size:var(--wp--preset--font-size--small);margin:0;padding:0}.activitypub-reaction-list a{align-items:center;color:var(--wp--preset--color--contrast,var(--wp--preset--color--secondary));display:flex;font-size:var(--wp--preset--font-size--small,.75rem);gap:.5em;justify-content:flex-start;padding:.5em;text-decoration:none}.activitypub-reaction-list a:hover{text-decoration:underline}.activitypub-reaction-list a img{border-radius:50%;flex:none;height:24px;width:24px} diff --git a/build/reactions/style-index.css b/build/reactions/style-index.css index 769742af9..d59697523 100644 --- a/build/reactions/style-index.css +++ b/build/reactions/style-index.css @@ -1 +1 @@ -.activitypub-reactions h6{border-top:1px solid;border-top-color:var(--wp--preset--color--contrast-2);display:inline-block;padding-top:.5em}.activitypub-reactions .reaction-group{align-items:center;display:flex;gap:.75em;justify-content:flex-start;margin:.5em 0;position:relative;width:100%}@media(max-width:782px){.activitypub-reactions .reaction-group:has(.reaction-avatars:not(:empty)){justify-content:space-between}}.activitypub-reactions .reaction-avatars{align-items:center;display:flex;flex-direction:row;list-style:none;margin:0;padding:0}.activitypub-reactions .reaction-avatars li{margin:0 -10px 0 0;padding:0}.activitypub-reactions .reaction-avatars li:last-child{margin-right:0}.activitypub-reactions .reaction-avatars li a{display:block;text-decoration:none}.activitypub-reactions .reaction-avatars .reaction-avatar{border:.5px solid var(--wp--preset--color--contrast,hsla(0,0%,100%,.8));border-radius:50%;box-shadow:0 0 0 .5px hsla(0,0%,100%,.8),0 1px 3px rgba(0,0,0,.2);height:32px;transition:transform .6s cubic-bezier(.34,1.56,.64,1);width:32px;will-change:transform}.activitypub-reactions .reaction-avatars .reaction-avatar.wave-active{transform:translateY(-5px)}.activitypub-reactions .reaction-avatars .reaction-avatar.wave-active.rotate-clockwise{transform:translateY(-5px) rotate(30deg)}.activitypub-reactions .reaction-avatars .reaction-avatar.wave-active.rotate-counter{transform:translateY(-5px) rotate(-30deg)}.activitypub-reactions .reaction-avatars .reaction-avatar:hover{position:relative;z-index:1}.activitypub-reactions .reaction-label.components-button{color:var(--wp--preset--color--contrast,--wp--preset--color--secondary,#2271b1);flex:0 0 auto;height:auto;padding:0;text-decoration:none;white-space:nowrap}.activitypub-reactions .reaction-label.components-button:hover{color:var(--wp--preset--color--contrast,--wp--preset--color--secondary,#135e96);text-decoration:underline}.activitypub-reactions .reaction-label.components-button:focus:not(:disabled){box-shadow:none;outline:1px solid var(--wp--preset--color--contrast,#135e96);outline-offset:2px}.activitypub-reaction-list{background-color:var(--wp--preset--color--background,var(--wp--preset--color--custom-background,var(--wp--preset--color--base)));list-style:none;margin:0;max-width:300px;padding:.25em 1.3em .25em .7em;width:-moz-max-content;width:max-content}.activitypub-reaction-list ul{margin:0;padding:0}.activitypub-reaction-list li{font-size:var(--wp--preset--font-size--small);margin:0;padding:0}.activitypub-reaction-list a{align-items:center;color:var(--wp--preset--color--contrast,var(--wp--preset--color--secondary));display:flex;font-size:var(--wp--preset--font-size--small,.75rem);gap:.5em;justify-content:flex-start;padding:.5em;text-decoration:none}.activitypub-reaction-list a:hover{text-decoration:underline}.activitypub-reaction-list a img{border-radius:50%;flex:none;height:24px;width:24px} +.wp-block-activitypub-reactions .reaction-group{align-items:center;display:flex;gap:.75em;justify-content:flex-start;margin:.5em 0;position:relative;width:100%}@media(max-width:782px){.wp-block-activitypub-reactions .reaction-group:has(.reaction-avatars:not(:empty)){justify-content:space-between}}.wp-block-activitypub-reactions .reaction-avatars{align-items:center;display:flex;flex-direction:row;list-style:none;margin:0;padding:0}.wp-block-activitypub-reactions .reaction-avatars li{margin:0 -10px 0 0;padding:0}.wp-block-activitypub-reactions .reaction-avatars li:last-child{margin-right:0}.wp-block-activitypub-reactions .reaction-avatars li a{display:block;text-decoration:none}.wp-block-activitypub-reactions .reaction-avatars .reaction-avatar{border:.5px solid var(--wp--preset--color--contrast,hsla(0,0%,100%,.8));border-radius:50%;box-shadow:0 0 0 .5px hsla(0,0%,100%,.8),0 1px 3px rgba(0,0,0,.2);height:32px;transition:transform .6s cubic-bezier(.34,1.56,.64,1);width:32px;will-change:transform}.wp-block-activitypub-reactions .reaction-avatars .reaction-avatar.wave-active{transform:translateY(-5px)}.wp-block-activitypub-reactions .reaction-avatars .reaction-avatar.wave-active.rotate-clockwise{transform:translateY(-5px) rotate(30deg)}.wp-block-activitypub-reactions .reaction-avatars .reaction-avatar.wave-active.rotate-counter{transform:translateY(-5px) rotate(-30deg)}.wp-block-activitypub-reactions .reaction-avatars .reaction-avatar:hover{position:relative;z-index:1}.wp-block-activitypub-reactions .reaction-label.components-button{color:var(--wp--preset--color--contrast,--wp--preset--color--secondary,#2271b1);flex:0 0 auto;height:auto;padding:0;text-decoration:none;white-space:nowrap}.wp-block-activitypub-reactions .reaction-label.components-button:hover{color:var(--wp--preset--color--contrast,--wp--preset--color--secondary,#135e96);text-decoration:underline}.wp-block-activitypub-reactions .reaction-label.components-button:focus:not(:disabled){box-shadow:none;outline:1px solid var(--wp--preset--color--contrast,#135e96);outline-offset:2px}.activitypub-reaction-list{background-color:var(--wp--preset--color--background,var(--wp--preset--color--custom-background,var(--wp--preset--color--base)));list-style:none;margin:0;max-width:300px;padding:.25em 1.3em .25em .7em;width:-moz-max-content;width:max-content}.activitypub-reaction-list ul{margin:0;padding:0}.activitypub-reaction-list li{font-size:var(--wp--preset--font-size--small);margin:0;padding:0}.activitypub-reaction-list a{align-items:center;color:var(--wp--preset--color--contrast,var(--wp--preset--color--secondary));display:flex;font-size:var(--wp--preset--font-size--small,.75rem);gap:.5em;justify-content:flex-start;padding:.5em;text-decoration:none}.activitypub-reaction-list a:hover{text-decoration:underline}.activitypub-reaction-list a img{border-radius:50%;flex:none;height:24px;width:24px} diff --git a/build/reactions/view.asset.php b/build/reactions/view.asset.php index 814279a16..64bcd029d 100644 --- a/build/reactions/view.asset.php +++ b/build/reactions/view.asset.php @@ -1 +1 @@ - array('react', 'wp-api-fetch', 'wp-components', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => 'd5cb95d9bd6062974b3c'); + array('react', 'wp-api-fetch', 'wp-components', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '5d03a1a55342fbb2aa77'); diff --git a/build/reactions/view.js b/build/reactions/view.js index 4e4ff64e1..460eb3847 100644 --- a/build/reactions/view.js +++ b/build/reactions/view.js @@ -1 +1 @@ -(()=>{"use strict";var e={n:t=>{var n=t&&t.__esModule?()=>t.default:()=>t;return e.d(n,{a:n}),n},d:(t,n)=>{for(var a in n)e.o(n,a)&&!e.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:n[a]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};const t=window.React,n=window.wp.element,a=window.wp.domReady;var r=e.n(a);const c=window.wp.components,o=window.wp.apiFetch;var l=e.n(o);function s(){return window._activityPubOptions||{}}window.wp.i18n;const i=({reactions:e})=>{const{defaultAvatarUrl:a}=s(),[r,c]=(0,n.useState)(new Set),[o,l]=(0,n.useState)(new Map),i=(0,n.useRef)([]),u=()=>{i.current.forEach((e=>clearTimeout(e))),i.current=[]},m=(t,n)=>{u();const a=100,r=e.length;n&&l((e=>{const n=new Map(e);return n.set(t,"clockwise"),n}));const o=e=>{const o="right"===e,s=o?r-1:0,u=o?1:-1;for(let e=o?t:t-1;o?e<=s:e>=s;e+=u){const r=Math.abs(e-t),o=setTimeout((()=>{c((t=>{const a=new Set(t);return n?a.add(e):a.delete(e),a})),n&&e!==t&&l((t=>{const n=new Map(t),a=e-u,r=n.get(a);return n.set(e,"clockwise"===r?"counter":"clockwise"),n}))}),r*a);i.current.push(o)}};if(o("right"),o("left"),!n){const e=Math.max((r-t)*a,t*a),n=setTimeout((()=>{l(new Map)}),e+a);i.current.push(n)}};return(0,n.useEffect)((()=>()=>u()),[]),(0,t.createElement)("ul",{className:"reaction-avatars"},e.map(((e,n)=>{const c=o.get(n),l=["reaction-avatar",r.has(n)?"wave-active":"",c?`rotate-${c}`:""].filter(Boolean).join(" "),s=e.avatar||a;return(0,t.createElement)("li",{key:n},(0,t.createElement)("a",{href:e.url,target:"_blank",rel:"noopener noreferrer",onMouseEnter:()=>m(n,!0),onMouseLeave:()=>m(n,!1)},(0,t.createElement)("img",{src:s,alt:e.name,className:l,width:"32",height:"32"})))})))},u=({reactions:e,type:n})=>(0,t.createElement)("ul",{className:"activitypub-reaction-list"},e.map(((e,n)=>(0,t.createElement)("li",{key:n},(0,t.createElement)("a",{href:e.url,className:"reaction-item",target:"_blank",rel:"noopener noreferrer"},(0,t.createElement)("img",{src:e.avatar,alt:e.name,width:"32",height:"32"}),(0,t.createElement)("span",null,e.name)))))),m=({items:e,label:a})=>{const[r,o]=(0,n.useState)(!1),[l,s]=(0,n.useState)(null),[m,p]=(0,n.useState)(e.length),h=(0,n.useRef)(null);(0,n.useEffect)((()=>{if(!h.current)return;const t=()=>{const t=h.current;if(!t)return;const n=t.offsetWidth-(l?.offsetWidth||0)-12,a=Math.max(1,Math.floor((n-32)/22));p(Math.min(a,e.length))};t();const n=new ResizeObserver(t);return n.observe(h.current),()=>{n.disconnect()}}),[l,e.length]);const f=e.slice(0,m);return(0,t.createElement)("div",{className:"reaction-group",ref:h},(0,t.createElement)(i,{reactions:f}),(0,t.createElement)(c.Button,{ref:s,className:"reaction-label is-link",onClick:()=>o(!r),"aria-expanded":r},a),r&&l&&(0,t.createElement)(c.Popover,{anchor:l,onClose:()=>o(!1)},(0,t.createElement)(u,{reactions:e})))};function p({title:e="",postId:a=null,reactions:r=null,titleComponent:c=null}){const{namespace:o}=s(),[i,u]=(0,n.useState)(r),[p,h]=(0,n.useState)(!r);return(0,n.useEffect)((()=>{if(r)return u(r),void h(!1);a?(h(!0),l()({path:`/${o}/posts/${a}/reactions`}).then((e=>{u(e),h(!1)})).catch((()=>h(!1)))):h(!1)}),[a,r]),p?null:i&&Object.values(i).some((e=>e.items?.length>0))?(0,t.createElement)("div",{className:"activitypub-reactions"},c||e&&(0,t.createElement)("h6",null,e),Object.entries(i).map((([e,n])=>n.items?.length?(0,t.createElement)(m,{key:e,items:n.items,label:n.label}):null))):null}r()((()=>{[].forEach.call(document.querySelectorAll(".activitypub-reactions-block"),(e=>{const a=JSON.parse(e.dataset.attrs);(0,n.createRoot)(e).render((0,t.createElement)(p,{...a}))}))}))})(); \ No newline at end of file +(()=>{"use strict";var e={n:t=>{var n=t&&t.__esModule?()=>t.default:()=>t;return e.d(n,{a:n}),n},d:(t,n)=>{for(var a in n)e.o(n,a)&&!e.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:n[a]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};const t=window.React,n=window.wp.element,a=window.wp.domReady;var r=e.n(a);const c=window.wp.components,l=window.wp.apiFetch;var o=e.n(l);function s(){return window._activityPubOptions||{}}window.wp.i18n;const i=({reactions:e})=>{const{defaultAvatarUrl:a}=s(),[r,c]=(0,n.useState)(new Set),[l,o]=(0,n.useState)(new Map),i=(0,n.useRef)([]),u=()=>{i.current.forEach((e=>clearTimeout(e))),i.current=[]},m=(t,n)=>{u();const a=100,r=e.length;n&&o((e=>{const n=new Map(e);return n.set(t,"clockwise"),n}));const l=e=>{const l="right"===e,s=l?r-1:0,u=l?1:-1;for(let e=l?t:t-1;l?e<=s:e>=s;e+=u){const r=Math.abs(e-t),l=setTimeout((()=>{c((t=>{const a=new Set(t);return n?a.add(e):a.delete(e),a})),n&&e!==t&&o((t=>{const n=new Map(t),a=e-u,r=n.get(a);return n.set(e,"clockwise"===r?"counter":"clockwise"),n}))}),r*a);i.current.push(l)}};if(l("right"),l("left"),!n){const e=Math.max((r-t)*a,t*a),n=setTimeout((()=>{o(new Map)}),e+a);i.current.push(n)}};return(0,n.useEffect)((()=>()=>u()),[]),(0,t.createElement)("ul",{className:"reaction-avatars"},e.map(((e,n)=>{const c=l.get(n),o=["reaction-avatar",r.has(n)?"wave-active":"",c?`rotate-${c}`:""].filter(Boolean).join(" "),s=e.avatar||a;return(0,t.createElement)("li",{key:n},(0,t.createElement)("a",{href:e.url,target:"_blank",rel:"noopener noreferrer",onMouseEnter:()=>m(n,!0),onMouseLeave:()=>m(n,!1)},(0,t.createElement)("img",{src:s,alt:e.name,className:o,width:"32",height:"32"})))})))},u=({reactions:e,type:n})=>(0,t.createElement)("ul",{className:"activitypub-reaction-list"},e.map(((e,n)=>(0,t.createElement)("li",{key:n},(0,t.createElement)("a",{href:e.url,className:"reaction-item",target:"_blank",rel:"noopener noreferrer"},(0,t.createElement)("img",{src:e.avatar,alt:e.name,width:"32",height:"32"}),(0,t.createElement)("span",null,e.name)))))),m=({items:e,label:a})=>{const[r,l]=(0,n.useState)(!1),[o,s]=(0,n.useState)(null),[m,p]=(0,n.useState)(e.length),h=(0,n.useRef)(null);(0,n.useEffect)((()=>{if(!h.current)return;const t=()=>{const t=h.current;if(!t)return;const n=t.offsetWidth-(o?.offsetWidth||0)-12,a=Math.max(1,Math.floor((n-32)/22));p(Math.min(a,e.length))};t();const n=new ResizeObserver(t);return n.observe(h.current),()=>{n.disconnect()}}),[o,e.length]);const f=e.slice(0,m);return(0,t.createElement)("div",{className:"reaction-group",ref:h},(0,t.createElement)(i,{reactions:f}),(0,t.createElement)(c.Button,{ref:s,className:"reaction-label is-link",onClick:()=>l(!r),"aria-expanded":r},a),r&&o&&(0,t.createElement)(c.Popover,{anchor:o,onClose:()=>l(!1)},(0,t.createElement)(u,{reactions:e})))};function p({postId:e=null,reactions:a=null,title:r=null}){const{namespace:c}=s(),[l,i]=(0,n.useState)(a),[u,p]=(0,n.useState)(!a);return(0,n.useEffect)((()=>{if(a)return i(a),void p(!1);e?(p(!0),o()({path:`/${c}/posts/${e}/reactions`}).then((e=>{i(e),p(!1)})).catch((()=>p(!1)))):p(!1)}),[e,a]),u?null:l&&Object.values(l).some((e=>e.items?.length>0))?(0,t.createElement)(t.Fragment,null,r&&(0,t.createElement)("h6",null,r),Object.entries(l).map((([e,n])=>n.items?.length?(0,t.createElement)(m,{key:e,items:n.items,label:n.label}):null))):null}r()((()=>{[].forEach.call(document.querySelectorAll(".activitypub-reactions-block"),(e=>{console.log(e,e.parentElement);const a=JSON.parse(e.dataset.attrs||e.parentElement.dataset.attrs);(0,n.createRoot)(e).render((0,t.createElement)(p,{...a}))}))}))})(); \ No newline at end of file diff --git a/includes/class-blocks.php b/includes/class-blocks.php index 4f7979850..83060b8e0 100644 --- a/includes/class-blocks.php +++ b/includes/class-blocks.php @@ -175,25 +175,25 @@ public static function register_blocks() { /** * Render the post reactions block. * - * @param array $attrs The block attributes. + * @param array $attrs The block attributes. + * @param string $content Inner blocks. * * @return string The HTML to render. */ - public static function render_post_reactions_block( $attrs ) { + public static function render_post_reactions_block( $attrs, $content ) { if ( ! isset( $attrs['postId'] ) ) { $attrs['postId'] = get_the_ID(); } - $wrapper_attributes = get_block_wrapper_attributes( - array( - 'class' => 'activitypub-reactions-block', - 'data-attrs' => wp_json_encode( $attrs ), - ) - ); + $args = array( 'data-attrs' => wp_json_encode( $attrs ) ); + if ( isset( $attrs['title'] ) ) { + $args['class'] = 'activitypub-reactions-block'; + } return sprintf( - '
', - $wrapper_attributes + '
%2$s
', + get_block_wrapper_attributes( $args ), + $content ); } diff --git a/src/reactions/block.json b/src/reactions/block.json index 1a6a3acdf..bc24ada67 100644 --- a/src/reactions/block.json +++ b/src/reactions/block.json @@ -1,5 +1,5 @@ { - "$schema": "https://schemas.wp.org/trunk/block.json", + "$schema": "https://schemas.wp.org/trunk/block.json", "name": "activitypub/reactions", "apiVersion": 2, "version": "1.0.0", @@ -18,12 +18,7 @@ } } }, - "attributes": { - "title": { - "type": "string", - "default": "Fediverse reactions" - } - }, + "attributes": {}, "blockHooks": { "core/post-content": "after" }, diff --git a/src/reactions/deprecation.js b/src/reactions/deprecation.js new file mode 100644 index 000000000..7fcea84b2 --- /dev/null +++ b/src/reactions/deprecation.js @@ -0,0 +1,43 @@ +import { createBlock } from '@wordpress/blocks'; + +const v1 = { + attributes: { + title: { + type: 'string', + default: 'Fediverse reactions', + }, + }, + + supports: { + html: false, + align: true, + layout: { + default: { + type: 'constrained', + orientation: 'vertical', + justifyContent: 'center', + }, + }, + }, + + isEligible( attributes ) { + // Run migration if title attribute exists. + return !! attributes.title; + }, + + migrate( attributes ) { + const { title, ...newAttributes } = attributes; + + return [ + newAttributes, + [ + createBlock( 'core/heading', { + content: title, + level: 6, + } ), + ], + ]; + }, +}; + +export default [ v1 ]; diff --git a/src/reactions/edit.js b/src/reactions/edit.js index 66bbfd771..6ef44c683 100644 --- a/src/reactions/edit.js +++ b/src/reactions/edit.js @@ -1,4 +1,4 @@ -import { useBlockProps, RichText } from '@wordpress/block-editor'; +import { useBlockProps, InnerBlocks } from '@wordpress/block-editor'; import { useState } from '@wordpress/element'; import { __, _x, sprintf } from '@wordpress/i18n'; import { Reactions } from './reactions'; @@ -10,20 +10,45 @@ import { Reactions } from './reactions'; */ const generateWhimsicalName = () => { const adjectives = [ - 'Bouncy', 'Cosmic', 'Dancing', 'Fluffy', 'Giggly', - 'Hoppy', 'Jazzy', 'Magical', 'Nifty', 'Perky', - 'Quirky', 'Sparkly', 'Twirly', 'Wiggly', 'Zippy', + 'Bouncy', + 'Cosmic', + 'Dancing', + 'Fluffy', + 'Giggly', + 'Hoppy', + 'Jazzy', + 'Magical', + 'Nifty', + 'Perky', + 'Quirky', + 'Sparkly', + 'Twirly', + 'Wiggly', + 'Zippy', ]; const nouns = [ - 'Badger', 'Capybara', 'Dolphin', 'Echidna', 'Flamingo', - 'Giraffe', 'Hedgehog', 'Iguana', 'Jellyfish', 'Koala', - 'Lemur', 'Manatee', 'Narwhal', 'Octopus', 'Penguin', + 'Badger', + 'Capybara', + 'Dolphin', + 'Echidna', + 'Flamingo', + 'Giraffe', + 'Hedgehog', + 'Iguana', + 'Jellyfish', + 'Koala', + 'Lemur', + 'Manatee', + 'Narwhal', + 'Octopus', + 'Penguin', ]; - const adjective = adjectives[Math.floor(Math.random() * adjectives.length)]; - const noun = nouns[Math.floor(Math.random() * nouns.length)]; + const adjective = + adjectives[ Math.floor( Math.random() * adjectives.length ) ]; + const noun = nouns[ Math.floor( Math.random() * nouns.length ) ]; - return `${adjective} ${noun}`; + return `${ adjective } ${ noun }`; }; /** @@ -46,19 +71,19 @@ const generateDummyReaction = ( index ) => { ]; const name = generateWhimsicalName(); - const color = colors[Math.floor(Math.random() * colors.length)]; - const letter = name.charAt(0); + const color = colors[ Math.floor( Math.random() * colors.length ) ]; + const letter = name.charAt( 0 ); // Create a data URL for a colored circle with a letter. - const canvas = document.createElement('canvas'); + const canvas = document.createElement( 'canvas' ); canvas.width = 64; canvas.height = 64; - const ctx = canvas.getContext('2d'); + const ctx = canvas.getContext( '2d' ); // Draw colored circle. ctx.fillStyle = color; ctx.beginPath(); - ctx.arc(32, 32, 32, 0, 2 * Math.PI); + ctx.arc( 32, 32, 32, 0, 2 * Math.PI ); ctx.fill(); // Draw letter. @@ -66,7 +91,7 @@ const generateDummyReaction = ( index ) => { ctx.font = '32px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; - ctx.fillText(letter, 32, 32); + ctx.fillText( letter, 32, 32 ); return { name, @@ -87,47 +112,59 @@ const generateDummyReactions = () => ( { _x( '%d likes', 'number of likes', 'activitypub' ), 9 ), - items: Array.from( { length: 9 }, ( _, i ) => generateDummyReaction( i ) ), + items: Array.from( { length: 9 }, ( _, i ) => + generateDummyReaction( i ) + ), }, reposts: { - label: sprintf( + label: sprintf( /* translators: %d: Number of reposts */ _x( '%d reposts', 'number of reposts', 'activitypub' ), 6 ), - items: Array.from( { length: 6 }, ( _, i ) => generateDummyReaction( i + 9 ) ), + items: Array.from( { length: 6 }, ( _, i ) => + generateDummyReaction( i + 9 ) + ), }, } ); /** * Edit component for the Reactions block. * - * @param {Object} props Block props. - * @param {Object} props.attributes Block attributes. - * @param {Function} props.setAttributes Attribute update callback. + * @param {Object} props Block props. + * @param {Object} props.attributes Block attributes. + * @param {Function} props.setAttributes Attribute update callback. + * @param props.__unstableLayoutClassNames * @return {JSX.Element} Component to render. */ -export default function Edit( { attributes, setAttributes, __unstableLayoutClassNames } ) { - const blockProps = useBlockProps( { className: __unstableLayoutClassNames } ); +export default function Edit( { attributes, __unstableLayoutClassNames } ) { + const blockProps = useBlockProps( { + className: __unstableLayoutClassNames, + } ); const [ dummyReactions ] = useState( generateDummyReactions() ); - const titleEditor = ( - setAttributes( { title } ) } - placeholder={ __( 'Fediverse Reactions', 'activitypub' ) } - disableLineBreaks={ true } - allowedFormats={ [] } - /> - ); + // Template for InnerBlocks - allows only a heading block + const TEMPLATE = [ + [ + 'core/heading', + { + level: 6, + placeholder: __( 'Fediverse Reactions', 'activitypub' ), + content: __( 'Fediverse Reactions', 'activitypub' ), + }, + ], + ]; + + const ALLOWED_BLOCKS = [ 'core/heading' ]; return (
- +
); } diff --git a/src/reactions/index.js b/src/reactions/index.js index 48e12d2a8..5e8f849de 100644 --- a/src/reactions/index.js +++ b/src/reactions/index.js @@ -1,7 +1,13 @@ import { registerBlockType } from '@wordpress/blocks'; +import deprecated from './deprecation'; import edit from './edit'; import metadata from './block.json'; +import save from './save'; import './style.scss'; -registerBlockType( metadata.name, { edit } ); \ No newline at end of file +registerBlockType( metadata.name, { + deprecated, + edit, + save, +} ); diff --git a/src/reactions/reactions.js b/src/reactions/reactions.js index bbd4a5ee3..d8d48e178 100644 --- a/src/reactions/reactions.js +++ b/src/reactions/reactions.js @@ -16,93 +16,105 @@ import { useOptions } from '../shared/use-options'; */ const FacepileRow = ( { reactions } ) => { const { defaultAvatarUrl } = useOptions(); - const [activeIndices, setActiveIndices] = useState(new Set()); - const [rotationStates, setRotationStates] = useState(new Map()); - const timeoutRefs = useRef([]); + const [ activeIndices, setActiveIndices ] = useState( new Set() ); + const [ rotationStates, setRotationStates ] = useState( new Map() ); + const timeoutRefs = useRef( [] ); const clearTimeouts = () => { - timeoutRefs.current.forEach(timeout => clearTimeout(timeout)); + timeoutRefs.current.forEach( ( timeout ) => clearTimeout( timeout ) ); timeoutRefs.current = []; }; - const startWave = (startIndex, isEntering) => { + const startWave = ( startIndex, isEntering ) => { clearTimeouts(); const delay = 100; // 100ms between each avatar const totalAvatars = reactions.length; - if (isEntering) { - setRotationStates(current => { - const updated = new Map(current); - updated.set(startIndex, 'clockwise'); + if ( isEntering ) { + setRotationStates( ( current ) => { + const updated = new Map( current ); + updated.set( startIndex, 'clockwise' ); return updated; - }); + } ); } // Helper function to create wave in either direction - const createWave = (direction) => { + const createWave = ( direction ) => { const isRightward = direction === 'right'; const start = isRightward ? startIndex : startIndex - 1; const end = isRightward ? totalAvatars - 1 : 0; const step = isRightward ? 1 : -1; - for (let i = start; isRightward ? i <= end : i >= end; i += step) { - const delayMultiplier = Math.abs(i - startIndex); - const timeout = setTimeout(() => { - setActiveIndices(current => { - const updated = new Set(current); - if (isEntering) { - updated.add(i); + for ( + let i = start; + isRightward ? i <= end : i >= end; + i += step + ) { + const delayMultiplier = Math.abs( i - startIndex ); + const timeout = setTimeout( () => { + setActiveIndices( ( current ) => { + const updated = new Set( current ); + if ( isEntering ) { + updated.add( i ); } else { - updated.delete(i); + updated.delete( i ); } return updated; - }); + } ); - if (isEntering && i !== startIndex) { - setRotationStates(current => { - const updated = new Map(current); + if ( isEntering && i !== startIndex ) { + setRotationStates( ( current ) => { + const updated = new Map( current ); const neighborIndex = i - step; - const neighborRotation = updated.get(neighborIndex); - updated.set(i, neighborRotation === 'clockwise' ? 'counter' : 'clockwise'); + const neighborRotation = + updated.get( neighborIndex ); + updated.set( + i, + neighborRotation === 'clockwise' + ? 'counter' + : 'clockwise' + ); return updated; - }); + } ); } - }, delayMultiplier * delay); - timeoutRefs.current.push(timeout); + }, delayMultiplier * delay ); + timeoutRefs.current.push( timeout ); } }; // Create waves in both directions - createWave('right'); - createWave('left'); + createWave( 'right' ); + createWave( 'left' ); // Clear rotations when wave finishes retracting - if (!isEntering) { + if ( ! isEntering ) { const maxDelay = Math.max( - (totalAvatars - startIndex) * delay, + ( totalAvatars - startIndex ) * delay, startIndex * delay ); - const timeout = setTimeout(() => { - setRotationStates(new Map()); - }, maxDelay + delay); - timeoutRefs.current.push(timeout); + const timeout = setTimeout( () => { + setRotationStates( new Map() ); + }, maxDelay + delay ); + timeoutRefs.current.push( timeout ); } }; // Cleanup timeouts on unmount - useEffect(() => { + useEffect( () => { return () => clearTimeouts(); - }, []); + }, [] ); return (
    { reactions.map( ( reaction, index ) => { - const rotationClass = rotationStates.get(index); + const rotationClass = rotationStates.get( index ); const classes = [ 'reaction-avatar', - activeIndices.has(index) ? 'wave-active' : '', - rotationClass ? `rotate-${rotationClass}` : '' - ].filter(Boolean).join(' '); + activeIndices.has( index ) ? 'wave-active' : '', + rotationClass ? `rotate-${ rotationClass }` : '', + ] + .filter( Boolean ) + .join( ' ' ); const avatar = reaction.avatar || defaultAvatarUrl; return ( @@ -111,8 +123,8 @@ const FacepileRow = ( { reactions } ) => { href={ reaction.url } target="_blank" rel="noopener noreferrer" - onMouseEnter={() => startWave(index, true)} - onMouseLeave={() => startWave(index, false)} + onMouseEnter={ () => startWave( index, true ) } + onMouseLeave={ () => startWave( index, false ) } > ( /** * A component that renders a dropdown list of reactions. * - * @param {Object} props Component props. - * @param {Array} props.reactions Array of reaction objects. - * @param {string} props.type Type of reaction (likes/reposts). + * @param {Object} props Component props. + * @param {Array} props.reactions Array of reaction objects. + * @param {string} props.type Type of reaction (likes/reposts). * @return {JSX.Element} The rendered component. */ const ReactionList = ( { reactions, type } ) => ( @@ -204,9 +216,9 @@ const ReactionList = ( { reactions, type } ) => ( /** * A component that renders a reaction group with facepile and dropdown. * - * @param {Object} props Component props. - * @param {Array} props.items Array of reaction objects. - * @param {string} props.label Label for the reaction group. + * @param {Object} props Component props. + * @param {Array} props.items Array of reaction objects. + * @param {string} props.label Label for the reaction group. * @return {JSX.Element} The rendered component. */ const ReactionGroup = ( { items, label } ) => { @@ -238,7 +250,12 @@ const ReactionGroup = ( { items, label } ) => { // Calculate how many avatars can fit // First avatar takes full width, rest take effective width - const maxAvatars = Math.max( 1, Math.floor( ( availableWidth - AVATAR_WIDTH ) / EFFECTIVE_AVATAR_WIDTH ) ); + const maxAvatars = Math.max( + 1, + Math.floor( + ( availableWidth - AVATAR_WIDTH ) / EFFECTIVE_AVATAR_WIDTH + ) + ); // Ensure we don't show more than we have setVisibleCount( Math.min( maxAvatars, items.length ) ); @@ -284,18 +301,16 @@ const ReactionGroup = ( { items, label } ) => { /** * The Reactions component. * - * @param {Object} props Component props. - * @param {string} props.title The title text. - * @param {?number} props.postId The post ID. - * @param {?Object} props.reactions Optional reactions data. - * @param {?JSX.Element} props.titleComponent Optional component for title editing. - * @return {?JSX.Element} The rendered component. + * @param {Object} props Component props. + * @param {?number} props.postId The post ID. + * @param {?Object} props.reactions Optional reactions data. + * @param {?string} props.title Optional title attribute. + * @return {?JSX.Element} The rendered component. */ export function Reactions( { - title = '', postId = null, reactions: providedReactions = null, - titleComponent = null, + title = null, } ) { const { namespace } = useOptions(); const [ reactions, setReactions ] = useState( providedReactions ); @@ -317,11 +332,11 @@ export function Reactions( { apiFetch( { path: `/${ namespace }/posts/${ postId }/reactions`, } ) - .then( ( response ) => { - setReactions( response ); - setLoading( false ); - } ) - .catch( () => setLoading( false ) ); + .then( ( response ) => { + setReactions( response ); + setLoading( false ); + } ) + .catch( () => setLoading( false ) ); }, [ postId, providedReactions ] ); if ( loading ) { @@ -329,14 +344,18 @@ export function Reactions( { } // Return null if there are no reactions - if ( ! reactions || ! Object.values( reactions ).some( group => group.items?.length > 0 ) ) { + if ( + ! reactions || + ! Object.values( reactions ).some( + ( group ) => group.items?.length > 0 + ) + ) { return null; } return ( -
    - { titleComponent || ( title &&
    { title }
    ) } - + <> + { title &&
    { title }
    } { Object.entries( reactions ).map( ( [ key, group ] ) => { if ( ! group.items?.length ) { return null; @@ -350,6 +369,6 @@ export function Reactions( { /> ); } ) } -
    + ); } diff --git a/src/reactions/save.js b/src/reactions/save.js new file mode 100644 index 000000000..75a6b6401 --- /dev/null +++ b/src/reactions/save.js @@ -0,0 +1,10 @@ +import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; + +export default function save() { + return ( + <> + +
    + + ); +} diff --git a/src/reactions/style.scss b/src/reactions/style.scss index 9fd976de4..721736e0a 100644 --- a/src/reactions/style.scss +++ b/src/reactions/style.scss @@ -1,10 +1,4 @@ -.activitypub-reactions { - h6 { - border-top: 1px solid; - display: inline-block; - padding-top: .5em; - border-top-color: var(--wp--preset--color--contrast-2); - } +.wp-block-activitypub-reactions { .reaction-group { display: flex; align-items: center; diff --git a/src/reactions/view.js b/src/reactions/view.js index 16d202ab0..e191678bf 100644 --- a/src/reactions/view.js +++ b/src/reactions/view.js @@ -4,8 +4,11 @@ import { Reactions } from './reactions'; domReady( () => { // iterate over a nodelist - [].forEach.call( document.querySelectorAll( '.activitypub-reactions-block' ), ( element ) => { - const attrs = JSON.parse( element.dataset.attrs ); - createRoot( element ).render( ); - } ); -} ); \ No newline at end of file + [].forEach.call( + document.querySelectorAll( '.activitypub-reactions-block' ), + ( element ) => { + const attrs = JSON.parse( element.dataset.attrs || element.parentElement.dataset.attrs ); + createRoot( element ).render( ); + } + ); +} );