Changes to blocks and styles
This commit is contained in:
Jeremy Rangel
@ -18,7 +18,7 @@
|
||||
"attributes": {
|
||||
"hasSidecontent": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
"default": false
|
||||
}
|
||||
},
|
||||
"textdomain": "lcp-viewport",
|
||||
|
||||
@ -1 +1 @@
|
||||
.wp-block-create-block-lcp-viewport{border:1px dotted red}
|
||||
.wp-block-create-block-lcp-viewport{border:1px dotted red}#lcp-viewport{display:flex;min-height:100vw}#lcp-main-wrap{flex-grow:1}
|
||||
|
||||
@ -1 +1 @@
|
||||
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '65f373ffa98edc78a0fd');
|
||||
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '6fbadff15d92199f61a3');
|
||||
|
||||
@ -1 +1 @@
|
||||
.wp-block-create-block-lcp-viewport{border:1px dotted red}
|
||||
.wp-block-create-block-lcp-viewport{border:1px dotted red}#lcp-viewport{display:flex;min-height:100vw}#lcp-main-wrap{flex-grow:1}
|
||||
|
||||
@ -1 +1 @@
|
||||
(()=>{"use strict";var e,n={998:()=>{const e=window.wp.blocks,n=window.wp.i18n,r=window.wp.blockEditor,t=window.wp.components,o=window.ReactJSXRuntime,i=JSON.parse('{"UU":"lcp/viewport"}');(0,e.registerBlockType)(i.UU,{edit:function({attributes:e,setAttributes:i}){const{hasSidecontent:s}=e,c=(0,r.useBlockProps)({className:s?"has-sidecontent":""}),l=[s&&["lcp/sidecontent"],["lcp/main-area"]].filter(Boolean);return(0,o.jsxs)("div",{...c,children:[(0,o.jsx)(r.InspectorControls,{children:(0,o.jsx)(t.ToggleControl,{label:(0,n.__)("Include Side Content","lcp-viewport"),checked:s,onChange:e=>i({hasSidecontent:e})})}),(0,o.jsx)("div",{id:"lcp-viewport-outer",children:(0,o.jsx)("div",{id:"lcp-viewport-inner",children:(0,o.jsx)(r.InnerBlocks,{template:l,renderAppender:()=>(0,o.jsx)(r.InnerBlocks.ButtonBlockAppender,{})})})})]})},save:function({attributes:e}){const{hasSidecontent:n}=e,t=(r.useBlockProps.save(),n?"has-sidecontent":"");return(0,o.jsx)("div",{class:t,id:"lcp-viewport-outer",children:(0,o.jsx)("div",{id:"lcp-viewport-inner",class:t,children:(0,o.jsx)(r.InnerBlocks.Content,{})})})}})}},r={};function t(e){var o=r[e];if(void 0!==o)return o.exports;var i=r[e]={exports:{}};return n[e](i,i.exports,t),i.exports}t.m=n,e=[],t.O=(n,r,o,i)=>{if(!r){var s=1/0;for(d=0;d<e.length;d++){r=e[d][0],o=e[d][1],i=e[d][2];for(var c=!0,l=0;l<r.length;l++)(!1&i||s>=i)&&Object.keys(t.O).every((e=>t.O[e](r[l])))?r.splice(l--,1):(c=!1,i<s&&(s=i));if(c){e.splice(d--,1);var p=o();void 0!==p&&(n=p)}}return n}i=i||0;for(var d=e.length;d>0&&e[d-1][2]>i;d--)e[d]=e[d-1];e[d]=[r,o,i]},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),(()=>{var e={57:0,350:0};t.O.j=n=>0===e[n];var n=(n,r)=>{var o,i,s=r[0],c=r[1],l=r[2],p=0;if(s.some((n=>0!==e[n]))){for(o in c)t.o(c,o)&&(t.m[o]=c[o]);if(l)var d=l(t)}for(n&&n(r);p<s.length;p++)i=s[p],t.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return t.O(d)},r=self.webpackChunklcp_viewport=self.webpackChunklcp_viewport||[];r.forEach(n.bind(null,0)),r.push=n.bind(null,r.push.bind(r))})();var o=t.O(void 0,[350],(()=>t(998)));o=t.O(o)})();
|
||||
(()=>{"use strict";var e,t={771:()=>{const e=window.wp.blocks,t=window.wp.i18n,n=window.wp.blockEditor,o=window.wp.components,r=window.wp.element,c=window.ReactJSXRuntime,i=JSON.parse('{"UU":"lcp/viewport"}');(0,e.registerBlockType)(i.UU,{edit:function({attributes:i,setAttributes:s,clientId:l}){const{hasSidecontent:p}=i,d=(0,n.useBlockProps)({className:p?"has-sidecontent":""}),a=[p?["lcp/sidecontent"]:null,["lcp/header-container"],,["lcp/main-area"],["lcp/footer-container"]].filter(Boolean);return(0,r.useEffect)((()=>{if(p){const t=(0,e.createBlock)("lcp/sidecontent",{});wp.data.select("core/block-editor").getBlocks(l),wp.data.dispatch("core/block-editor").insertBlocks(t,1,l)}}),[p,l]),(0,c.jsxs)("div",{...d,children:[(0,c.jsx)(n.InspectorControls,{children:(0,c.jsx)(o.ToggleControl,{label:(0,t.__)("Include Side Content","lcp-viewport"),checked:p,onChange:e=>s({hasSidecontent:e})})}),(0,c.jsx)("div",{id:"lcp-viewport-outer",children:(0,c.jsx)("div",{id:"lcp-viewport-inner",children:(0,c.jsx)(n.InnerBlocks,{renderAppender:()=>(0,c.jsx)(n.InnerBlocks.ButtonBlockAppender,{}),template:a})})})]})},save:function({attributes:e}){const{hasSidecontent:t}=e,o=(n.useBlockProps.save(),t?"lcp-has-sidecontent":"");return(0,c.jsx)("div",{class:o,id:"lcp-viewport-outer",children:(0,c.jsx)("div",{id:"lcp-viewport-inner",class:o,children:(0,c.jsx)(n.InnerBlocks.Content,{})})})}})}},n={};function o(e){var r=n[e];if(void 0!==r)return r.exports;var c=n[e]={exports:{}};return t[e](c,c.exports,o),c.exports}o.m=t,e=[],o.O=(t,n,r,c)=>{if(!n){var i=1/0;for(d=0;d<e.length;d++){n=e[d][0],r=e[d][1],c=e[d][2];for(var s=!0,l=0;l<n.length;l++)(!1&c||i>=c)&&Object.keys(o.O).every((e=>o.O[e](n[l])))?n.splice(l--,1):(s=!1,c<i&&(i=c));if(s){e.splice(d--,1);var p=r();void 0!==p&&(t=p)}}return t}c=c||0;for(var d=e.length;d>0&&e[d-1][2]>c;d--)e[d]=e[d-1];e[d]=[n,r,c]},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={57:0,350:0};o.O.j=t=>0===e[t];var t=(t,n)=>{var r,c,i=n[0],s=n[1],l=n[2],p=0;if(i.some((t=>0!==e[t]))){for(r in s)o.o(s,r)&&(o.m[r]=s[r]);if(l)var d=l(o)}for(t&&t(n);p<i.length;p++)c=i[p],o.o(e,c)&&e[c]&&e[c][0](),e[c]=0;return o.O(d)},n=self.webpackChunklcp_viewport=self.webpackChunklcp_viewport||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))})();var r=o.O(void 0,[350],(()=>o(771)));r=o.O(r)})();
|
||||
@ -18,7 +18,7 @@
|
||||
"attributes" :{
|
||||
"hasSidecontent":{
|
||||
"type":"boolean",
|
||||
"default":true
|
||||
"default":false
|
||||
}
|
||||
},
|
||||
"textdomain": "lcp-viewport",
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useBlockProps, InnerBlocks, InspectorControls } from '@wordpress/block-editor';
|
||||
import { ToggleControl } from '@wordpress/components';
|
||||
import { useEffect } from '@wordpress/element';
|
||||
import { createBlock } from '@wordpress/blocks'; // Used for creating new blocks
|
||||
|
||||
import './editor.scss';
|
||||
|
||||
export default function Edit({ attributes, setAttributes }) {
|
||||
export default function Edit({ attributes, setAttributes, clientId }) {
|
||||
const { hasSidecontent } = attributes;
|
||||
|
||||
// Block props with custom className management
|
||||
@ -13,15 +16,34 @@ export default function Edit({ attributes, setAttributes }) {
|
||||
|
||||
// Custom template logic based on hasSidecontent
|
||||
const template = [
|
||||
hasSidecontent && ['lcp/sidecontent'], // Only include lcp/sidecontent if the toggle is true
|
||||
['lcp/main-area'], // Always include lcp/main-area
|
||||
].filter(Boolean); // Filter out falsey values (e.g., undefined when hasSidecontent is false)
|
||||
|
||||
hasSidecontent ? ['lcp/sidecontent'] : null, // Only include 'lcp/sidecontent' if `hasSidecontent` is true
|
||||
['lcp/header-container'], // Add initial content to header-container
|
||||
, // Always include 'lcp/header-container' and add a paragraph block inside it
|
||||
['lcp/main-area'], // Always include 'lcp/main-area'
|
||||
['lcp/footer-container'] // Always include 'lcp/footer-container'
|
||||
].filter(Boolean); // Remove any null or undefined values from the array
|
||||
|
||||
// Render appender logic to handle block insertion
|
||||
const renderAppender = () => {
|
||||
return <InnerBlocks.ButtonBlockAppender />;
|
||||
return <InnerBlocks.ButtonBlockAppender />; // The default block appender
|
||||
};
|
||||
|
||||
// Add sidecontent if attribute changes
|
||||
useEffect(() => {
|
||||
if (hasSidecontent) {
|
||||
// Create a new block and insert it in the block's inner blocks
|
||||
const blockToAdd = createBlock('lcp/sidecontent', {
|
||||
|
||||
});
|
||||
|
||||
// Insert the block programmatically into the block
|
||||
const innerBlocks = wp.data.select('core/block-editor').getBlocks(clientId);
|
||||
|
||||
wp.data.dispatch('core/block-editor').insertBlocks(blockToAdd, 1, clientId); // Insert at position 0
|
||||
|
||||
}
|
||||
}, [hasSidecontent, clientId]); // Only runs when `hasSidecontent` or `clientId` changes
|
||||
|
||||
return (
|
||||
<div {...blockProps}>
|
||||
{/* Inspector Controls: Add a toggle for the `hasSidecontent` attribute */}
|
||||
@ -37,8 +59,8 @@ export default function Edit({ attributes, setAttributes }) {
|
||||
<div id="lcp-viewport-inner">
|
||||
{/* Render the InnerBlocks with conditional template */}
|
||||
<InnerBlocks
|
||||
template={template} // Use the template logic here
|
||||
renderAppender={renderAppender} // Custom appender logic
|
||||
template={template} // Dynamic template based on `hasSidecontent`
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,3 +7,9 @@
|
||||
.wp-block-create-block-lcp-viewport {
|
||||
border: 1px dotted #f00;
|
||||
}
|
||||
|
||||
#lcp-viewport {display:flex;min-height:100vw}
|
||||
|
||||
#lcp-main-wrap {
|
||||
flex-grow:1
|
||||
}
|
||||
|
||||
@ -14,7 +14,7 @@ export default function Save({ attributes }) {
|
||||
const blockProps = useBlockProps.save();
|
||||
|
||||
// Conditionally add the 'has-sidecontent' class if hasSidecontent is true
|
||||
const className = hasSidecontent ? 'has-sidecontent' : '';
|
||||
const className = hasSidecontent ? 'lcp-has-sidecontent' : '';
|
||||
|
||||
return (
|
||||
<div class={className} id="lcp-viewport-outer">
|
||||
|
||||
Reference in New Issue
Block a user