From 21b00e1937693d6e36cfd4f6f9b787d97920e2e4 Mon Sep 17 00:00:00 2001 From: Jeremy Rangel Date: Wed, 1 Jan 2025 03:08:58 -0800 Subject: [PATCH] Changes to blocks and styles --- .../blocks/lcp-footer-container/.editorconfig | 18 +++ .../blocks/lcp-footer-container/.gitignore | 30 ++++ .../lcp-footer-container/build/block.json | 29 ++++ .../lcp-footer-container/build/index-rtl.css | 1 + .../build/index.asset.php | 1 + .../lcp-footer-container/build/index.css | 1 + .../lcp-footer-container/build/index.js | 1 + .../build/style-index-rtl.css | 1 + .../build/style-index.css | 1 + .../lcp-footer-container/build/view.asset.php | 1 + .../blocks/lcp-footer-container/build/view.js | 1 + .../lcp-footer-container.php | 20 +++ .../blocks/lcp-footer-container/package.json | 20 +++ .../blocks/lcp-footer-container/readme.txt | 55 +++++++ .../lcp-footer-container/src/block.json | 30 ++++ .../blocks/lcp-footer-container/src/edit.js | 153 ++++++++++++++++++ .../lcp-footer-container/src/editor.scss | 9 ++ .../blocks/lcp-footer-container/src/index.js | 39 +++++ .../blocks/lcp-footer-container/src/save.js | 33 ++++ .../lcp-footer-container/src/style.scss | 12 ++ .../blocks/lcp-footer-container/src/view.js | 25 +++ .../build/index.asset.php | 2 +- .../lcp-header-container/build/index.js | 2 +- .../blocks/lcp-header-container/src/edit.js | 8 +- .../blocks/lcp-main-area/build/block.json | 6 +- .../blocks/lcp-main-area/build/index-rtl.css | 2 +- .../lcp-main-area/build/index.asset.php | 2 +- includes/blocks/lcp-main-area/build/index.css | 2 +- includes/blocks/lcp-main-area/build/index.js | 2 +- includes/blocks/lcp-main-area/src/block.json | 7 +- includes/blocks/lcp-main-area/src/edit.js | 16 +- includes/blocks/lcp-main-area/src/editor.scss | 2 +- includes/blocks/lcp-main-area/src/save.js | 32 ++-- includes/blocks/lcp-viewport/build/block.json | 2 +- .../blocks/lcp-viewport/build/index-rtl.css | 2 +- .../blocks/lcp-viewport/build/index.asset.php | 2 +- includes/blocks/lcp-viewport/build/index.css | 2 +- includes/blocks/lcp-viewport/build/index.js | 2 +- includes/blocks/lcp-viewport/src/block.json | 2 +- includes/blocks/lcp-viewport/src/edit.js | 36 ++++- includes/blocks/lcp-viewport/src/editor.scss | 6 + includes/blocks/lcp-viewport/src/save.js | 2 +- includes/classes/blocks.php | 1 + script.js | 9 +- style.css | 57 +++++-- 45 files changed, 617 insertions(+), 70 deletions(-) create mode 100644 includes/blocks/lcp-footer-container/.editorconfig create mode 100644 includes/blocks/lcp-footer-container/.gitignore create mode 100644 includes/blocks/lcp-footer-container/build/block.json create mode 100644 includes/blocks/lcp-footer-container/build/index-rtl.css create mode 100644 includes/blocks/lcp-footer-container/build/index.asset.php create mode 100644 includes/blocks/lcp-footer-container/build/index.css create mode 100644 includes/blocks/lcp-footer-container/build/index.js create mode 100644 includes/blocks/lcp-footer-container/build/style-index-rtl.css create mode 100644 includes/blocks/lcp-footer-container/build/style-index.css create mode 100644 includes/blocks/lcp-footer-container/build/view.asset.php create mode 100644 includes/blocks/lcp-footer-container/build/view.js create mode 100644 includes/blocks/lcp-footer-container/lcp-footer-container.php create mode 100644 includes/blocks/lcp-footer-container/package.json create mode 100644 includes/blocks/lcp-footer-container/readme.txt create mode 100644 includes/blocks/lcp-footer-container/src/block.json create mode 100644 includes/blocks/lcp-footer-container/src/edit.js create mode 100644 includes/blocks/lcp-footer-container/src/editor.scss create mode 100644 includes/blocks/lcp-footer-container/src/index.js create mode 100644 includes/blocks/lcp-footer-container/src/save.js create mode 100644 includes/blocks/lcp-footer-container/src/style.scss create mode 100644 includes/blocks/lcp-footer-container/src/view.js diff --git a/includes/blocks/lcp-footer-container/.editorconfig b/includes/blocks/lcp-footer-container/.editorconfig new file mode 100644 index 0000000..b5df0fc --- /dev/null +++ b/includes/blocks/lcp-footer-container/.editorconfig @@ -0,0 +1,18 @@ +# This file is for unifying the coding style for different editors and IDEs +# editorconfig.org + +# WordPress Coding Standards +# https://make.wordpress.org/core/handbook/coding-standards/ + +root = true + +[*] +charset = utf-8 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true +indent_style = tab + +[*.{yml,yaml}] +indent_style = space +indent_size = 2 diff --git a/includes/blocks/lcp-footer-container/.gitignore b/includes/blocks/lcp-footer-container/.gitignore new file mode 100644 index 0000000..f66335e --- /dev/null +++ b/includes/blocks/lcp-footer-container/.gitignore @@ -0,0 +1,30 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Coverage directory used by tools like istanbul +coverage + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Output of `npm pack` +*.tgz + +# Output of `wp-scripts plugin-zip` +*.zip + +# dotenv environment variables file +.env diff --git a/includes/blocks/lcp-footer-container/build/block.json b/includes/blocks/lcp-footer-container/build/block.json new file mode 100644 index 0000000..b0d5ade --- /dev/null +++ b/includes/blocks/lcp-footer-container/build/block.json @@ -0,0 +1,29 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "lcp/footer-container", + "version": "0.1.0", + "title": "Footer Container", + "category": "widgets", + "icon": "smiley", + "description": "A container for inserting the footer", + "example": {}, + "supports": { + "color": { + "background": true, + "text": false, + "link": false + } + }, + "attributes": { + "sticky": { + "type": "string", + "default": "never" + } + }, + "textdomain": "lcp", + "editorScript": "file:./index.js", + "editorStyle": "file:./index.css", + "style": "file:./style-index.css", + "viewScript": "file:./view.js" +} \ No newline at end of file diff --git a/includes/blocks/lcp-footer-container/build/index-rtl.css b/includes/blocks/lcp-footer-container/build/index-rtl.css new file mode 100644 index 0000000..06326ea --- /dev/null +++ b/includes/blocks/lcp-footer-container/build/index-rtl.css @@ -0,0 +1 @@ +.wp-block-create-block-lcp-viewport{border:1px dotted red} diff --git a/includes/blocks/lcp-footer-container/build/index.asset.php b/includes/blocks/lcp-footer-container/build/index.asset.php new file mode 100644 index 0000000..0028e9e --- /dev/null +++ b/includes/blocks/lcp-footer-container/build/index.asset.php @@ -0,0 +1 @@ + array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => 'f3a49fcf497c8df94623'); diff --git a/includes/blocks/lcp-footer-container/build/index.css b/includes/blocks/lcp-footer-container/build/index.css new file mode 100644 index 0000000..06326ea --- /dev/null +++ b/includes/blocks/lcp-footer-container/build/index.css @@ -0,0 +1 @@ +.wp-block-create-block-lcp-viewport{border:1px dotted red} diff --git a/includes/blocks/lcp-footer-container/build/index.js b/includes/blocks/lcp-footer-container/build/index.js new file mode 100644 index 0000000..54a8157 --- /dev/null +++ b/includes/blocks/lcp-footer-container/build/index.js @@ -0,0 +1 @@ +(()=>{"use strict";var e,t={717:()=>{const e=window.wp.blocks,t=window.wp.i18n,n=window.wp.blockEditor,l=window.wp.components,o=window.React,r=window.ReactJSXRuntime,i=JSON.parse('{"UU":"lcp/footer-container"}');(0,e.registerBlockType)(i.UU,{edit:function({attributes:e,setAttributes:i}){const[s,a]=(0,o.useState)(!1),[d,p]=(0,o.useState)("10px"),[c,x]=(0,o.useState)("10px"),[g,h]=(0,o.useState)("10px"),[u,v]=(0,o.useState)("10px"),{sticky:f}=e,j=(0,n.useBlockProps)();return(0,r.jsxs)("div",{...j,children:[(0,r.jsxs)(n.InspectorControls,{children:[(0,r.jsx)(l.SelectControl,{label:(0,t.__)("Sticky Behavior","lcp"),value:f,options:[{label:(0,t.__)("Never","lcp"),value:"never"},{label:(0,t.__)("On Scroll","lcp"),value:"onScroll"},{label:(0,t.__)("Always","lcp"),value:"always"}],onChange:e=>{i({sticky:e})}}),(0,r.jsxs)(l.BaseControl,{label:"Padding - Desktop",children:[(0,r.jsxs)("div",{style:{display:"flex",flexDirection:"row"},children:[(0,r.jsx)("span",{style:{marginRight:"10px"},children:"Padding"}),(0,r.jsx)(l.ToggleControl,{label:"Use Independent Padding",checked:s,onChange:()=>{a(!s)}})]}),s?(0,r.jsxs)("div",{style:{display:"grid",padding:"10px",gridTemplateColumns:"1fr 1fr",gap:"10px",justifyItems:"center"},children:[(0,r.jsxs)("fieldset",{style:{gridColumn:"span 2",width:"116px"},children:[(0,r.jsx)("legend",{children:"Top"}),(0,r.jsx)(l.__experimentalUnitControl,{value:d,onChange:e=>{p(e),i({paddingTop:e})}})]}),(0,r.jsxs)("fieldset",{children:[(0,r.jsx)("legend",{children:"Left"}),(0,r.jsx)(l.__experimentalUnitControl,{value:u,onChange:e=>{v(e),i({paddingLeft:e})}})]}),(0,r.jsxs)("fieldset",{children:[(0,r.jsx)("legend",{children:"Right"}),(0,r.jsx)(l.__experimentalUnitControl,{value:c,onChange:e=>{x(e),i({paddingRight:e})}})]}),(0,r.jsxs)("fieldset",{style:{gridColumn:"span 2",width:"116px"},children:[(0,r.jsx)("legend",{children:"Bottom"}),(0,r.jsx)(l.__experimentalUnitControl,{value:g,onChange:e=>{h(e),i({paddingBottom:e})}})]})]}):(0,r.jsx)(l.__experimentalUnitControl,{label:"Padding Value",value:999,onChange:e=>{i({padding:{extraLarge:{top:e,right:e,bottom:e,left:e},large:{top:e,right:e,bottom:e,left:e},medium:{top:e,right:e,bottom:e,left:e},small:{top:e,right:e,bottom:e,left:e}}})}})]})]}),(0,r.jsx)(n.InnerBlocks,{template:[["core/template-part",{slug:"footer"}]]})]})},save:function({attributes:e}){const{sticky:t}=e,l=n.useBlockProps.save();return(0,r.jsx)("div",{...l,className:"lcp",id:"lcp-footer-container",children:(0,r.jsx)(n.InnerBlocks.Content,{})})}})}},n={};function l(e){var o=n[e];if(void 0!==o)return o.exports;var r=n[e]={exports:{}};return t[e](r,r.exports,l),r.exports}l.m=t,e=[],l.O=(t,n,o,r)=>{if(!n){var i=1/0;for(p=0;p=r)&&Object.keys(l.O).every((e=>l.O[e](n[a])))?n.splice(a--,1):(s=!1,r0&&e[p-1][2]>r;p--)e[p]=e[p-1];e[p]=[n,o,r]},l.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={57:0,350:0};l.O.j=t=>0===e[t];var t=(t,n)=>{var o,r,i=n[0],s=n[1],a=n[2],d=0;if(i.some((t=>0!==e[t]))){for(o in s)l.o(s,o)&&(l.m[o]=s[o]);if(a)var p=a(l)}for(t&&t(n);dl(717)));o=l.O(o)})(); \ No newline at end of file diff --git a/includes/blocks/lcp-footer-container/build/style-index-rtl.css b/includes/blocks/lcp-footer-container/build/style-index-rtl.css new file mode 100644 index 0000000..47253dd --- /dev/null +++ b/includes/blocks/lcp-footer-container/build/style-index-rtl.css @@ -0,0 +1 @@ +.wp-block-create-block-lcp-viewport{background-color:#21759b;color:#fff;padding:2px} diff --git a/includes/blocks/lcp-footer-container/build/style-index.css b/includes/blocks/lcp-footer-container/build/style-index.css new file mode 100644 index 0000000..47253dd --- /dev/null +++ b/includes/blocks/lcp-footer-container/build/style-index.css @@ -0,0 +1 @@ +.wp-block-create-block-lcp-viewport{background-color:#21759b;color:#fff;padding:2px} diff --git a/includes/blocks/lcp-footer-container/build/view.asset.php b/includes/blocks/lcp-footer-container/build/view.asset.php new file mode 100644 index 0000000..3cee5e3 --- /dev/null +++ b/includes/blocks/lcp-footer-container/build/view.asset.php @@ -0,0 +1 @@ + array(), 'version' => 'd4e4a494008d04e1eb42'); diff --git a/includes/blocks/lcp-footer-container/build/view.js b/includes/blocks/lcp-footer-container/build/view.js new file mode 100644 index 0000000..f0b02e4 --- /dev/null +++ b/includes/blocks/lcp-footer-container/build/view.js @@ -0,0 +1 @@ +console.log("Hello World! (from create-block-lcp-viewport block)"); \ No newline at end of file diff --git a/includes/blocks/lcp-footer-container/lcp-footer-container.php b/includes/blocks/lcp-footer-container/lcp-footer-container.php new file mode 100644 index 0000000..09b6084 --- /dev/null +++ b/includes/blocks/lcp-footer-container/lcp-footer-container.php @@ -0,0 +1,20 @@ + array( 'lcp/viewport', 'lcp/main-area' ), + ) + ); +} +add_action( 'init', 'lcp_footer_container_block_init' ); diff --git a/includes/blocks/lcp-footer-container/package.json b/includes/blocks/lcp-footer-container/package.json new file mode 100644 index 0000000..75c43b5 --- /dev/null +++ b/includes/blocks/lcp-footer-container/package.json @@ -0,0 +1,20 @@ +{ + "name": "lcp-viewport", + "version": "0.1.0", + "description": "Example block scaffolded with Create Block tool.", + "author": "The WordPress Contributors", + "license": "GPL-2.0-or-later", + "main": "build/index.js", + "scripts": { + "build": "wp-scripts build", + "format": "wp-scripts format", + "lint:css": "wp-scripts lint-style", + "lint:js": "wp-scripts lint-js", + "packages-update": "wp-scripts packages-update", + "plugin-zip": "wp-scripts plugin-zip", + "start": "wp-scripts start" + }, + "devDependencies": { + "@wordpress/scripts": "^30.4.0" + } +} diff --git a/includes/blocks/lcp-footer-container/readme.txt b/includes/blocks/lcp-footer-container/readme.txt new file mode 100644 index 0000000..d7775a0 --- /dev/null +++ b/includes/blocks/lcp-footer-container/readme.txt @@ -0,0 +1,55 @@ +=== Lcp Viewport === +Contributors: The WordPress Contributors +Tags: block +Tested up to: 6.6 +Stable tag: 0.1.0 +License: GPL-2.0-or-later +License URI: https://www.gnu.org/licenses/gpl-2.0.html + +Example block scaffolded with Create Block tool. + +== Description == + +This is the long description. No limit, and you can use Markdown (as well as in the following sections). + +For backwards compatibility, if this section is missing, the full length of the short description will be used, and +Markdown parsed. + +== Installation == + +This section describes how to install the plugin and get it working. + +e.g. + +1. Upload the plugin files to the `/wp-content/plugins/lcp-viewport` directory, or install the plugin through the WordPress plugins screen directly. +1. Activate the plugin through the 'Plugins' screen in WordPress + + +== Frequently Asked Questions == + += A question that someone might have = + +An answer to that question. + += What about foo bar? = + +Answer to foo bar dilemma. + +== Screenshots == + +1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from +the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets +directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png` +(or jpg, jpeg, gif). +2. This is the second screen shot + +== Changelog == + += 0.1.0 = +* Release + +== Arbitrary section == + +You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated +plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or +"installation." Arbitrary sections will be shown below the built-in sections outlined above. diff --git a/includes/blocks/lcp-footer-container/src/block.json b/includes/blocks/lcp-footer-container/src/block.json new file mode 100644 index 0000000..b4033b5 --- /dev/null +++ b/includes/blocks/lcp-footer-container/src/block.json @@ -0,0 +1,30 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "lcp/footer-container", + "version": "0.1.0", + "title": "Footer Container", + "category": "widgets", + "icon": "smiley", + + "description": "A container for inserting the footer", + "example": {}, + "supports": { + "color": { + "background": true, + "text": false, + "link": false + } + }, + "attributes": { + "sticky": { + "type": "string", + "default": "never" + } + }, + "textdomain": "lcp", + "editorScript": "file:./index.js", + "editorStyle": "file:./index.css", + "style": "file:./style-index.css", + "viewScript": "file:./view.js" +} diff --git a/includes/blocks/lcp-footer-container/src/edit.js b/includes/blocks/lcp-footer-container/src/edit.js new file mode 100644 index 0000000..04784d9 --- /dev/null +++ b/includes/blocks/lcp-footer-container/src/edit.js @@ -0,0 +1,153 @@ +/** + * Retrieves the translation of text. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/ + */ +import { __ } from '@wordpress/i18n'; + +/** + * React hook that is used to mark the block wrapper element. + * It provides all the necessary props like the class name. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops + */ +import { useBlockProps, InnerBlocks, InspectorControls } from '@wordpress/block-editor'; +import { SelectControl, BaseControl, ToggleControl,__experimentalUnitControl as UnitControl } from '@wordpress/components'; +import { useState, useEffect } from 'react'; +/** + * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. + * Those files can contain any CSS code that gets applied to the editor. + * + * @see https://www.npmjs.com/package/@wordpress/scripts#using-css + */ +import './editor.scss'; + +/** + * The edit function describes the structure of your block in the context of the + * editor. This represents what the editor will render when the block is used. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit + * + * @return {Element} Element to render. + */ +export default function Edit({ attributes, setAttributes }) { + + const [isIndependentLarge, setIsIndependentLarge] = useState(false); + + const [paddingTop, setPaddingTop] = useState('10px'); + const [paddingRight, setPaddingRight] = useState('10px'); + const [paddingBottom, setPaddingBottom] = useState('10px'); + const [paddingLeft, setPaddingLeft] = useState('10px'); + + const { sticky } = attributes; + + // Block props for the outer block + const blockProps = useBlockProps(); + + // Handle the change of the sticky attribute + const handleStickyChange = (value) => { + setAttributes({ sticky: value }); + }; + const handleToggleChange = () => { + setIsIndependentLarge(!isIndependentLarge); + }; + + const updatePaddingForAllSizes = (newValue) => { + const newPadding = { + extraLarge: { top: newValue, right: newValue, bottom: newValue, left: newValue }, + large: { top: newValue, right: newValue, bottom: newValue, left: newValue }, + medium: { top: newValue, right: newValue, bottom: newValue, left: newValue }, + small: { top: newValue, right: newValue, bottom: newValue, left: newValue } + }; + + // Update the padding attribute with the new padding object + setAttributes({ padding: newPadding }); + }; + return ( +
+ {/* Inspector Controls: Add a SelectControl to change the sticky attribute */} + + + +
+ Padding + +
+ + {/* Padding controls */} + {isIndependentLarge ? ( +
+ {/* Padding controls for top, left, right, bottom */} +
+ Top + { + setPaddingTop(newValue); + setAttributes({ paddingTop: newValue }); + }} + /> +
+
+ Left + { + setPaddingLeft(newValue); + setAttributes({ paddingLeft: newValue }); + }} + /> +
+
+ Right + { + setPaddingRight(newValue); + setAttributes({ paddingRight: newValue }); + }} + /> +
+
+ Bottom + { + setPaddingBottom(newValue); + setAttributes({ paddingBottom: newValue }); + }} + /> +
+
+ ) : ( + + )} + + + + + +
+ ); +} diff --git a/includes/blocks/lcp-footer-container/src/editor.scss b/includes/blocks/lcp-footer-container/src/editor.scss new file mode 100644 index 0000000..6e6850f --- /dev/null +++ b/includes/blocks/lcp-footer-container/src/editor.scss @@ -0,0 +1,9 @@ +/** + * The following styles get applied inside the editor only. + * + * Replace them with your own styles or remove the file completely. + */ + +.wp-block-create-block-lcp-viewport { + border: 1px dotted #f00; +} diff --git a/includes/blocks/lcp-footer-container/src/index.js b/includes/blocks/lcp-footer-container/src/index.js new file mode 100644 index 0000000..ade1e47 --- /dev/null +++ b/includes/blocks/lcp-footer-container/src/index.js @@ -0,0 +1,39 @@ +/** + * Registers a new block provided a unique name and an object defining its behavior. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ + */ +import { registerBlockType } from '@wordpress/blocks'; + +/** + * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. + * All files containing `style` keyword are bundled together. The code used + * gets applied both to the front of your site and to the editor. + * + * @see https://www.npmjs.com/package/@wordpress/scripts#using-css + */ +import './style.scss'; + +/** + * Internal dependencies + */ +import Edit from './edit'; +import save from './save'; +import metadata from './block.json'; + +/** + * Every block starts by registering a new block type definition. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ + */ +registerBlockType( metadata.name, { + /** + * @see ./edit.js + */ + edit: Edit, + + /** + * @see ./save.js + */ + save, +} ); diff --git a/includes/blocks/lcp-footer-container/src/save.js b/includes/blocks/lcp-footer-container/src/save.js new file mode 100644 index 0000000..0f3f0b3 --- /dev/null +++ b/includes/blocks/lcp-footer-container/src/save.js @@ -0,0 +1,33 @@ +/** + * React hook that is used to mark the block wrapper element. + * It provides all the necessary props like the class name. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops + */ +import { useBlockProps, InnerBlocks } from '@wordpress/block-editor'; + +/** + * The save function defines the way in which the different attributes should + * be combined into the final markup, which is then serialized by the block + * editor into `post_content`. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save + * + * @return {Element} Element to render. + */ +export default function Save({ attributes }) { + // Destructure the 'sticky' attribute from the block attributes + const { sticky } = attributes; + + // Block props + const blockProps = useBlockProps.save(); + + + + + return ( + + ); +} diff --git a/includes/blocks/lcp-footer-container/src/style.scss b/includes/blocks/lcp-footer-container/src/style.scss new file mode 100644 index 0000000..e19fc0b --- /dev/null +++ b/includes/blocks/lcp-footer-container/src/style.scss @@ -0,0 +1,12 @@ +/** + * The following styles get applied both on the front of your site + * and in the editor. + * + * Replace them with your own styles or remove the file completely. + */ + +.wp-block-create-block-lcp-viewport { + background-color: #21759b; + color: #fff; + padding: 2px; +} diff --git a/includes/blocks/lcp-footer-container/src/view.js b/includes/blocks/lcp-footer-container/src/view.js new file mode 100644 index 0000000..e2a7ec6 --- /dev/null +++ b/includes/blocks/lcp-footer-container/src/view.js @@ -0,0 +1,25 @@ +/** + * Use this file for JavaScript code that you want to run in the front-end + * on posts/pages that contain this block. + * + * When this file is defined as the value of the `viewScript` property + * in `block.json` it will be enqueued on the front end of the site. + * + * Example: + * + * ```js + * { + * "viewScript": "file:./view.js" + * } + * ``` + * + * If you're not making any changes to this file because your project doesn't need any + * JavaScript running in the front-end, then you should delete this file and remove + * the `viewScript` property from `block.json`. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script + */ + +/* eslint-disable no-console */ +console.log( 'Hello World! (from create-block-lcp-viewport block)' ); +/* eslint-enable no-console */ diff --git a/includes/blocks/lcp-header-container/build/index.asset.php b/includes/blocks/lcp-header-container/build/index.asset.php index 5147c76..350d393 100644 --- a/includes/blocks/lcp-header-container/build/index.asset.php +++ b/includes/blocks/lcp-header-container/build/index.asset.php @@ -1 +1 @@ - array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '8285297d94129972e4c4'); + array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '92128317eaa465727f6e'); diff --git a/includes/blocks/lcp-header-container/build/index.js b/includes/blocks/lcp-header-container/build/index.js index 45b88f3..4e3a704 100644 --- a/includes/blocks/lcp-header-container/build/index.js +++ b/includes/blocks/lcp-header-container/build/index.js @@ -1 +1 @@ -(()=>{"use strict";var e,t={717:()=>{const e=window.wp.blocks,t=window.wp.i18n,n=window.wp.blockEditor,l=window.wp.components,o=window.React,r=window.ReactJSXRuntime,s=JSON.parse('{"UU":"lcp/header-container"}');(0,e.registerBlockType)(s.UU,{edit:function({attributes:e,setAttributes:s}){const[i,a]=(0,o.useState)(!1),[d,c]=(0,o.useState)("10px"),[p,h]=(0,o.useState)("10px"),[x,g]=(0,o.useState)("10px"),[u,v]=(0,o.useState)("10px"),{sticky:f}=e,j=(0,n.useBlockProps)();return(0,r.jsxs)("div",{...j,children:[(0,r.jsxs)(n.InspectorControls,{children:[(0,r.jsx)(l.SelectControl,{label:(0,t.__)("Sticky Behavior","lcp"),value:f,options:[{label:(0,t.__)("Never","lcp"),value:"never"},{label:(0,t.__)("On Scroll","lcp"),value:"onScroll"},{label:(0,t.__)("Always","lcp"),value:"always"}],onChange:e=>{s({sticky:e})}}),(0,r.jsxs)(l.BaseControl,{label:"Padding - Desktop",children:[(0,r.jsxs)("div",{style:{display:"flex",flexDirection:"row"},children:[(0,r.jsx)("span",{style:{marginRight:"10px"},children:"Padding"}),(0,r.jsx)(l.ToggleControl,{label:"Use Independent Padding",checked:i,onChange:()=>{a(!i)}})]}),i?(0,r.jsxs)("div",{style:{display:"grid",padding:"10px",gridTemplateColumns:"1fr 1fr",gap:"10px",justifyItems:"center"},children:[(0,r.jsxs)("fieldset",{style:{gridColumn:"span 2",width:"116px"},children:[(0,r.jsx)("legend",{children:"Top"}),(0,r.jsx)(l.__experimentalUnitControl,{value:d,onChange:e=>{c(e),s({paddingTop:e})}})]}),(0,r.jsxs)("fieldset",{children:[(0,r.jsx)("legend",{children:"Left"}),(0,r.jsx)(l.__experimentalUnitControl,{value:u,onChange:e=>{v(e),s({paddingLeft:e})}})]}),(0,r.jsxs)("fieldset",{children:[(0,r.jsx)("legend",{children:"Right"}),(0,r.jsx)(l.__experimentalUnitControl,{value:p,onChange:e=>{h(e),s({paddingRight:e})}})]}),(0,r.jsxs)("fieldset",{style:{gridColumn:"span 2",width:"116px"},children:[(0,r.jsx)("legend",{children:"Bottom"}),(0,r.jsx)(l.__experimentalUnitControl,{value:x,onChange:e=>{g(e),s({paddingBottom:e})}})]})]}):(0,r.jsx)(l.__experimentalUnitControl,{label:"Padding Value",value:999,onChange:e=>{s({padding:{extraLarge:{top:e,right:e,bottom:e,left:e},large:{top:e,right:e,bottom:e,left:e},medium:{top:e,right:e,bottom:e,left:e},small:{top:e,right:e,bottom:e,left:e}}})}})]})]}),(0,r.jsx)(n.InnerBlocks,{})]})},save:function({attributes:e}){const{sticky:t}=e,l=n.useBlockProps.save();let o="";"onScroll"===t?o="lcp-sticky-on-scroll":"always"===t&&(o="lcp-sticky");const s=`${l.className} ${o}`;return(0,r.jsx)("div",{...l,className:s,id:"lcp-header-container",children:(0,r.jsx)(n.InnerBlocks.Content,{})})}})}},n={};function l(e){var o=n[e];if(void 0!==o)return o.exports;var r=n[e]={exports:{}};return t[e](r,r.exports,l),r.exports}l.m=t,e=[],l.O=(t,n,o,r)=>{if(!n){var s=1/0;for(c=0;c=r)&&Object.keys(l.O).every((e=>l.O[e](n[a])))?n.splice(a--,1):(i=!1,r0&&e[c-1][2]>r;c--)e[c]=e[c-1];e[c]=[n,o,r]},l.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={57:0,350:0};l.O.j=t=>0===e[t];var t=(t,n)=>{var o,r,s=n[0],i=n[1],a=n[2],d=0;if(s.some((t=>0!==e[t]))){for(o in i)l.o(i,o)&&(l.m[o]=i[o]);if(a)var c=a(l)}for(t&&t(n);dl(717)));o=l.O(o)})(); \ No newline at end of file +(()=>{"use strict";var e,t={717:()=>{const e=window.wp.blocks,t=window.wp.i18n,l=window.wp.blockEditor,n=window.wp.components,r=window.React,o=window.ReactJSXRuntime,s=JSON.parse('{"UU":"lcp/header-container"}');(0,e.registerBlockType)(s.UU,{edit:function({attributes:e,setAttributes:s}){const[i,a]=(0,r.useState)(!1),[d,p]=(0,r.useState)("10px"),[c,h]=(0,r.useState)("10px"),[x,g]=(0,r.useState)("10px"),[u,v]=(0,r.useState)("10px"),{sticky:f}=e,m=(0,l.useBlockProps)();return(0,o.jsxs)("div",{...m,children:[(0,o.jsxs)(l.InspectorControls,{children:[(0,o.jsx)(n.SelectControl,{label:(0,t.__)("Sticky Behavior","lcp"),value:f,options:[{label:(0,t.__)("Never","lcp"),value:"never"},{label:(0,t.__)("On Scroll","lcp"),value:"onScroll"},{label:(0,t.__)("Always","lcp"),value:"always"}],onChange:e=>{s({sticky:e})}}),(0,o.jsxs)(n.BaseControl,{label:"Padding - Desktop",children:[(0,o.jsxs)("div",{style:{display:"flex",flexDirection:"row"},children:[(0,o.jsx)("span",{style:{marginRight:"10px"},children:"Padding"}),(0,o.jsx)(n.ToggleControl,{label:"Use Independent Padding",checked:i,onChange:()=>{a(!i)}})]}),i?(0,o.jsxs)("div",{style:{display:"grid",padding:"10px",gridTemplateColumns:"1fr 1fr",gap:"10px",justifyItems:"center"},children:[(0,o.jsxs)("fieldset",{style:{gridColumn:"span 2",width:"116px"},children:[(0,o.jsx)("legend",{children:"Top"}),(0,o.jsx)(n.__experimentalUnitControl,{value:d,onChange:e=>{p(e),s({paddingTop:e})}})]}),(0,o.jsxs)("fieldset",{children:[(0,o.jsx)("legend",{children:"Left"}),(0,o.jsx)(n.__experimentalUnitControl,{value:u,onChange:e=>{v(e),s({paddingLeft:e})}})]}),(0,o.jsxs)("fieldset",{children:[(0,o.jsx)("legend",{children:"Right"}),(0,o.jsx)(n.__experimentalUnitControl,{value:c,onChange:e=>{h(e),s({paddingRight:e})}})]}),(0,o.jsxs)("fieldset",{style:{gridColumn:"span 2",width:"116px"},children:[(0,o.jsx)("legend",{children:"Bottom"}),(0,o.jsx)(n.__experimentalUnitControl,{value:x,onChange:e=>{g(e),s({paddingBottom:e})}})]})]}):(0,o.jsx)(n.__experimentalUnitControl,{label:"Padding Value",value:999,onChange:e=>{s({padding:{extraLarge:{top:e,right:e,bottom:e,left:e},large:{top:e,right:e,bottom:e,left:e},medium:{top:e,right:e,bottom:e,left:e},small:{top:e,right:e,bottom:e,left:e}}})}})]})]}),(0,o.jsx)(l.InnerBlocks,{template:[["core/template-part",{slug:"header"}]]})]})},save:function({attributes:e}){const{sticky:t}=e,n=l.useBlockProps.save();let r="";"onScroll"===t?r="lcp-sticky-on-scroll":"always"===t&&(r="lcp-sticky");const s=`${n.className} ${r}`;return(0,o.jsx)("div",{...n,className:s,id:"lcp-header-container",children:(0,o.jsx)(l.InnerBlocks.Content,{})})}})}},l={};function n(e){var r=l[e];if(void 0!==r)return r.exports;var o=l[e]={exports:{}};return t[e](o,o.exports,n),o.exports}n.m=t,e=[],n.O=(t,l,r,o)=>{if(!l){var s=1/0;for(p=0;p=o)&&Object.keys(n.O).every((e=>n.O[e](l[a])))?l.splice(a--,1):(i=!1,o0&&e[p-1][2]>o;p--)e[p]=e[p-1];e[p]=[l,r,o]},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={57:0,350:0};n.O.j=t=>0===e[t];var t=(t,l)=>{var r,o,s=l[0],i=l[1],a=l[2],d=0;if(s.some((t=>0!==e[t]))){for(r in i)n.o(i,r)&&(n.m[r]=i[r]);if(a)var p=a(n)}for(t&&t(l);dn(717)));r=n.O(r)})(); \ No newline at end of file diff --git a/includes/blocks/lcp-header-container/src/edit.js b/includes/blocks/lcp-header-container/src/edit.js index 9914983..f11d6f7 100644 --- a/includes/blocks/lcp-header-container/src/edit.js +++ b/includes/blocks/lcp-header-container/src/edit.js @@ -63,6 +63,8 @@ export default function Edit({ attributes, setAttributes }) { // Update the padding attribute with the new padding object setAttributes({ padding: newPadding }); }; + + return (
{/* Inspector Controls: Add a SelectControl to change the sticky attribute */} @@ -142,10 +144,12 @@ export default function Edit({ attributes, setAttributes }) { +
); diff --git a/includes/blocks/lcp-main-area/build/block.json b/includes/blocks/lcp-main-area/build/block.json index 33ab6ea..acc0c26 100644 --- a/includes/blocks/lcp-main-area/build/block.json +++ b/includes/blocks/lcp-main-area/build/block.json @@ -3,7 +3,7 @@ "apiVersion": 3, "name": "lcp/main-area", "version": "0.1.0", - "title": "Main Content", + "title": "Content Container", "category": "widgets", "icon": "smiley", "description": "Viewport container which is designed to be the parent of all other blocks", @@ -15,6 +15,10 @@ "maxWidth": { "type": "string", "default": "100%" + }, + "expandVertical": { + "type": "boolean", + "default": true } }, "textdomain": "lcp-viewport", diff --git a/includes/blocks/lcp-main-area/build/index-rtl.css b/includes/blocks/lcp-main-area/build/index-rtl.css index 3064925..533917c 100644 --- a/includes/blocks/lcp-main-area/build/index-rtl.css +++ b/includes/blocks/lcp-main-area/build/index-rtl.css @@ -1 +1 @@ -.wp-block-create-block-lcp-viewport{border:1px dotted red}#lcp-main-wrap{margin-right:340px} +.wp-block-create-block-lcp-viewport{border:1px dotted red}.has-sidecontent #lcp-main-container{margin-right:340px} diff --git a/includes/blocks/lcp-main-area/build/index.asset.php b/includes/blocks/lcp-main-area/build/index.asset.php index be5c79a..e6712a7 100644 --- a/includes/blocks/lcp-main-area/build/index.asset.php +++ b/includes/blocks/lcp-main-area/build/index.asset.php @@ -1 +1 @@ - array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '4c475d6920d9d10f9da0'); + array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => 'e74f7d37dca7635e59f9'); diff --git a/includes/blocks/lcp-main-area/build/index.css b/includes/blocks/lcp-main-area/build/index.css index 2da0d40..5fe9b20 100644 --- a/includes/blocks/lcp-main-area/build/index.css +++ b/includes/blocks/lcp-main-area/build/index.css @@ -1 +1 @@ -.wp-block-create-block-lcp-viewport{border:1px dotted red}#lcp-main-wrap{margin-left:340px} +.wp-block-create-block-lcp-viewport{border:1px dotted red}.has-sidecontent #lcp-main-container{margin-left:340px} diff --git a/includes/blocks/lcp-main-area/build/index.js b/includes/blocks/lcp-main-area/build/index.js index 5386f6f..02926a3 100644 --- a/includes/blocks/lcp-main-area/build/index.js +++ b/includes/blocks/lcp-main-area/build/index.js @@ -1 +1 @@ -(()=>{"use strict";var e,t={998:()=>{const e=window.wp.blocks,t=window.wp.i18n,n=window.wp.blockEditor,r=window.wp.components,i=window.ReactJSXRuntime,o=JSON.parse('{"UU":"lcp/main-area"}');(0,e.registerBlockType)(o.UU,{edit:function(e){const{attributes:o,setAttributes:s}=e,{maxWidth:a="100%"}=o,l=(0,n.useBlockProps)(),c=(0,n.useInnerBlocksProps)(l);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.InspectorControls,{children:(0,i.jsx)(r.PanelBody,{title:(0,t.__)("Max Width Settings","lcp"),initialOpen:!0,children:(0,i.jsx)("div",{className:"max-width-settings",children:(0,i.jsx)(r.__experimentalUnitControl,{onChange:e=>{s({maxWidth:e})},value:a,defaultUnit:"px"})})})}),(0,i.jsx)("div",{...c,id:"lcp-main-wrap",children:(0,i.jsx)(n.InnerBlocks,{...c})})]})},save:function({attributes:e}){const{maxWidth:t="100%"}=e,r=n.useBlockProps.save(),o={maxWidth:t};return(0,i.jsx)("div",{...r,id:"lcp-main-wrap",style:o,children:(0,i.jsx)(n.InnerBlocks.Content,{})})}})}},n={};function r(e){var i=n[e];if(void 0!==i)return i.exports;var o=n[e]={exports:{}};return t[e](o,o.exports,r),o.exports}r.m=t,e=[],r.O=(t,n,i,o)=>{if(!n){var s=1/0;for(p=0;p=o)&&Object.keys(r.O).every((e=>r.O[e](n[l])))?n.splice(l--,1):(a=!1,o0&&e[p-1][2]>o;p--)e[p]=e[p-1];e[p]=[n,i,o]},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={57:0,350:0};r.O.j=t=>0===e[t];var t=(t,n)=>{var i,o,s=n[0],a=n[1],l=n[2],c=0;if(s.some((t=>0!==e[t]))){for(i in a)r.o(a,i)&&(r.m[i]=a[i]);if(l)var p=l(r)}for(t&&t(n);cr(998)));i=r.O(i)})(); \ No newline at end of file +(()=>{"use strict";var e,n={998:()=>{const e=window.wp.blocks,n=window.wp.i18n,t=window.wp.blockEditor,r=window.wp.components,i=window.ReactJSXRuntime,s=JSON.parse('{"UU":"lcp/main-area"}');(0,e.registerBlockType)(s.UU,{edit:function(e){const{attributes:s,setAttributes:a}=e,{maxWidth:o="100%",expandVertical:l=!0}=s,c=(0,t.useBlockProps)(),p=(0,t.useInnerBlocksProps)(c);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.InspectorControls,{children:(0,i.jsx)(r.PanelBody,{title:(0,n.__)("Max Width Settings","lcp"),initialOpen:!0,children:(0,i.jsxs)("div",{className:"max-width-settings",children:[(0,i.jsx)(r.__experimentalUnitControl,{onChange:e=>{a({maxWidth:e})},value:o,defaultUnit:"px"}),(0,i.jsx)(r.ToggleControl,{label:(0,n.__)("Enable Vertical Expansion","lcp"),checked:l,onChange:e=>{a({expandVertical:e})}})]})})}),(0,i.jsx)("div",{...p,id:"lcp-main-container",style:{minHeight:"200px"},children:(0,i.jsx)(t.InnerBlocks,{...p})})]})},save:function({attributes:e}){const{maxWidth:n="100%",expandVertical:r}=e,s=t.useBlockProps.save(),a=r?`${s.className} lcp-grow-vertical`:s.className,o={maxWidth:n};return(0,i.jsx)("div",{...s,id:"lcp-main-container",className:a,style:o,children:(0,i.jsx)(t.InnerBlocks.Content,{})})}})}},t={};function r(e){var i=t[e];if(void 0!==i)return i.exports;var s=t[e]={exports:{}};return n[e](s,s.exports,r),s.exports}r.m=n,e=[],r.O=(n,t,i,s)=>{if(!t){var a=1/0;for(p=0;p=s)&&Object.keys(r.O).every((e=>r.O[e](t[l])))?t.splice(l--,1):(o=!1,s0&&e[p-1][2]>s;p--)e[p]=e[p-1];e[p]=[t,i,s]},r.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),(()=>{var e={57:0,350:0};r.O.j=n=>0===e[n];var n=(n,t)=>{var i,s,a=t[0],o=t[1],l=t[2],c=0;if(a.some((n=>0!==e[n]))){for(i in o)r.o(o,i)&&(r.m[i]=o[i]);if(l)var p=l(r)}for(n&&n(t);cr(998)));i=r.O(i)})(); \ No newline at end of file diff --git a/includes/blocks/lcp-main-area/src/block.json b/includes/blocks/lcp-main-area/src/block.json index c0b4dca..4560c35 100644 --- a/includes/blocks/lcp-main-area/src/block.json +++ b/includes/blocks/lcp-main-area/src/block.json @@ -3,7 +3,7 @@ "apiVersion": 3, "name": "lcp/main-area", "version": "0.1.0", - "title": "Main Content", + "title": "Content Container", "category": "widgets", "icon": "smiley", "description": "Viewport container which is designed to be the parent of all other blocks", @@ -16,7 +16,12 @@ "type": "string", "default": "100%" + }, + "expandVertical": { + "type": "boolean", + "default": true } + }, "textdomain": "lcp-viewport", "editorScript": "file:./index.js", diff --git a/includes/blocks/lcp-main-area/src/edit.js b/includes/blocks/lcp-main-area/src/edit.js index 9598ad4..d973146 100644 --- a/includes/blocks/lcp-main-area/src/edit.js +++ b/includes/blocks/lcp-main-area/src/edit.js @@ -1,11 +1,11 @@ import { __ } from '@wordpress/i18n'; import { useBlockProps, InnerBlocks, useInnerBlocksProps, InspectorControls } from '@wordpress/block-editor'; -import { PanelBody, __experimentalUnitControl as UnitControl } from '@wordpress/components'; +import { PanelBody, ToggleControl, __experimentalUnitControl as UnitControl } from '@wordpress/components'; import './editor.scss'; export default function Edit(props) { const { attributes, setAttributes } = props; - const { maxWidth = '100%' } = attributes; // Default value for maxWidth if not set + const { maxWidth = '100%', expandVertical = true } = attributes; // Default value for maxWidth if not set // Function to handle the change of maxWidth const handleMaxWidthChange = (value) => { @@ -20,6 +20,11 @@ export default function Edit(props) { maxWidth: maxWidth, }; + const handleExpandVerticalChange = (value) => { + setAttributes({ expandVertical: value }); + }; + + return ( <> {/* Inspector Controls for maxWidth */} @@ -32,12 +37,17 @@ export default function Edit(props) { value={maxWidth} // Current value of maxWidth defaultUnit="px" // Optional: default unit for UnitControl /> + {/* Main block content */} -
+
diff --git a/includes/blocks/lcp-main-area/src/editor.scss b/includes/blocks/lcp-main-area/src/editor.scss index e00cb23..2c4271c 100644 --- a/includes/blocks/lcp-main-area/src/editor.scss +++ b/includes/blocks/lcp-main-area/src/editor.scss @@ -8,6 +8,6 @@ border: 1px dotted #f00; } -#lcp-main-wrap { +.has-sidecontent #lcp-main-container { margin-left:340px } \ No newline at end of file diff --git a/includes/blocks/lcp-main-area/src/save.js b/includes/blocks/lcp-main-area/src/save.js index 5f1e2ee..5637f8b 100644 --- a/includes/blocks/lcp-main-area/src/save.js +++ b/includes/blocks/lcp-main-area/src/save.js @@ -1,32 +1,22 @@ -/** - * React hook that is used to mark the block wrapper element. - * It provides all the necessary props like the class name. - * - * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops - */ import { useBlockProps, InnerBlocks } from '@wordpress/block-editor'; -/** - * The save function defines the way in which the different attributes should - * be combined into the final markup, which is then serialized by the block - * editor into `post_content`. - * - * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save - * - * @return {Element} Element to render. - */ -export default function Save( {attributes} ) { - const { maxWidth = '100%' } = attributes; // Destructure maxWidth from attributes (with a default value) +export default function Save( { attributes } ) { + const { maxWidth = '100%', expandVertical } = attributes; // Destructure maxWidth and expandVertical from attributes (with default values) + // Define the block props const blockProps = useBlockProps.save(); + + // Prepare the className based on expandVertical attribute + const className = expandVertical ? `${blockProps.className} lcp-grow-vertical` : blockProps.className; + + // Define the style object const style = { maxWidth: maxWidth, }; - return ( -
- - + return ( +
+
); } diff --git a/includes/blocks/lcp-viewport/build/block.json b/includes/blocks/lcp-viewport/build/block.json index 575c835..a2693ad 100644 --- a/includes/blocks/lcp-viewport/build/block.json +++ b/includes/blocks/lcp-viewport/build/block.json @@ -18,7 +18,7 @@ "attributes": { "hasSidecontent": { "type": "boolean", - "default": true + "default": false } }, "textdomain": "lcp-viewport", diff --git a/includes/blocks/lcp-viewport/build/index-rtl.css b/includes/blocks/lcp-viewport/build/index-rtl.css index 06326ea..27ab5cb 100644 --- a/includes/blocks/lcp-viewport/build/index-rtl.css +++ b/includes/blocks/lcp-viewport/build/index-rtl.css @@ -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} diff --git a/includes/blocks/lcp-viewport/build/index.asset.php b/includes/blocks/lcp-viewport/build/index.asset.php index de27e6b..fe80c80 100644 --- a/includes/blocks/lcp-viewport/build/index.asset.php +++ b/includes/blocks/lcp-viewport/build/index.asset.php @@ -1 +1 @@ - array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '65f373ffa98edc78a0fd'); + array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '6fbadff15d92199f61a3'); diff --git a/includes/blocks/lcp-viewport/build/index.css b/includes/blocks/lcp-viewport/build/index.css index 06326ea..27ab5cb 100644 --- a/includes/blocks/lcp-viewport/build/index.css +++ b/includes/blocks/lcp-viewport/build/index.css @@ -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} diff --git a/includes/blocks/lcp-viewport/build/index.js b/includes/blocks/lcp-viewport/build/index.js index 31d22d7..17ef466 100644 --- a/includes/blocks/lcp-viewport/build/index.js +++ b/includes/blocks/lcp-viewport/build/index.js @@ -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=i)&&Object.keys(t.O).every((e=>t.O[e](r[l])))?r.splice(l--,1):(c=!1,i0&&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);pt(998)));o=t.O(o)})(); \ No newline at end of file +(()=>{"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=c)&&Object.keys(o.O).every((e=>o.O[e](n[l])))?n.splice(l--,1):(s=!1,c0&&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);po(771)));r=o.O(r)})(); \ No newline at end of file diff --git a/includes/blocks/lcp-viewport/src/block.json b/includes/blocks/lcp-viewport/src/block.json index 503fb01..46d796c 100644 --- a/includes/blocks/lcp-viewport/src/block.json +++ b/includes/blocks/lcp-viewport/src/block.json @@ -18,7 +18,7 @@ "attributes" :{ "hasSidecontent":{ "type":"boolean", - "default":true + "default":false } }, "textdomain": "lcp-viewport", diff --git a/includes/blocks/lcp-viewport/src/edit.js b/includes/blocks/lcp-viewport/src/edit.js index 6a78fa3..3422544 100644 --- a/includes/blocks/lcp-viewport/src/edit.js +++ b/includes/blocks/lcp-viewport/src/edit.js @@ -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 ; + return ; // 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 (
{/* Inspector Controls: Add a toggle for the `hasSidecontent` attribute */} @@ -37,8 +59,8 @@ export default function Edit({ attributes, setAttributes }) {
{/* Render the InnerBlocks with conditional template */}
diff --git a/includes/blocks/lcp-viewport/src/editor.scss b/includes/blocks/lcp-viewport/src/editor.scss index 6e6850f..61d3a86 100644 --- a/includes/blocks/lcp-viewport/src/editor.scss +++ b/includes/blocks/lcp-viewport/src/editor.scss @@ -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 +} diff --git a/includes/blocks/lcp-viewport/src/save.js b/includes/blocks/lcp-viewport/src/save.js index 1c54df8..d41cf8f 100644 --- a/includes/blocks/lcp-viewport/src/save.js +++ b/includes/blocks/lcp-viewport/src/save.js @@ -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 (
diff --git a/includes/classes/blocks.php b/includes/classes/blocks.php index c115233..9ea8b3b 100644 --- a/includes/classes/blocks.php +++ b/includes/classes/blocks.php @@ -19,6 +19,7 @@ class Lcp_Blocks { include $this->template_directory. '/includes/blocks/lcp-key-points/lcp-key-points.php'; include $this->template_directory. '/includes/blocks/lcp-button/lcp-button.php'; include $this->template_directory. '/includes/blocks/lcp-visualizer/lcp-visualizer.php'; + include $this->template_directory. '/includes/blocks/lcp-footer-container/lcp-footer-container.php'; } diff --git a/script.js b/script.js index d9cb862..7e20078 100644 --- a/script.js +++ b/script.js @@ -25,12 +25,7 @@ document.addEventListener('DOMContentLoaded', function () { fullHeaderHeight = headerHeight; } - // Set the initial height of #lcp-sidecontent based on whether the header is sticky or not - if (headerIsSticky) { - sideContent.style.height = `calc(100vh - ${fullHeaderHeight}px)`; - } else { - sideContent.style.height = `100vh`; - } + // Function to handle the scroll event function handleScroll() { @@ -41,7 +36,7 @@ document.addEventListener('DOMContentLoaded', function () { if (scrolled >= headerHeight) { // Add the 'lcp-fixed' class and set 'top' to 0 for side content sideContent.classList.add('lcp-fixed'); - sideContent.style.top = '0'; + sideContent.style.top = fullHeaderHeight + 'px'; // If the header has 'lcp-sticky-on-scroll', adjust height of side content to be 100vh - fullHeaderHeight if (headerIsStickyOnScroll) { diff --git a/style.css b/style.css index 580ac64..002699c 100644 --- a/style.css +++ b/style.css @@ -22,34 +22,67 @@ Version: 1.0 position: relative; /* To ensure side content stays in place */ } +#lcp-viewport-inner { + display:flex;flex-direction:column; + min-height:100vh + } +#lcp-main-container.lcp-grow-vertical { + flex-grow:1 +} +.admin-bar #lcp-viewport-inner { + min-height:calc(100vh - 32px) +} + +/* Main Content */ +.lcp-has-sidecontent #lcp-main-container > * > *{ padding:20px + +} /* Side content */ #lcp-sidecontent { position: absolute; left: 0; - top: var(--my-top); + top: 0; width: 340px; height: 100%; - overflow: auto; + overflow: hidden; background: #fff; border-right: 2px solid #eee; z-index: 2; outline: 0; } +#lcp-sidecontent-inner { + height: 100%; + overflow: auto; /* Enable scrolling for inner content */ + padding:0 10px +} + +#lcp-sidecontent-inner > * { + margin-top: 10px;} #lcp-sidecontent.lcp-fixed { position:fixed } -/* Main content */ -.has-sidecontent #lcp-main-wrap { - flex: 1; /* Main content takes up the rest of the space */ - margin-left: 340px; /* Space for side content */ - padding: 20px; -} +@media only screen and (max-width: 1199px) { + + #lcp-sidecontent:not(.lcp-open) {display:none} +} +/* Main content an Footer */ +@media only screen and (min-width: 1200px) { + + + .lcp-has-sidecontent #lcp-main-container { + flex: 1; /* Main content takes up the rest of the space */ + margin-left: 340px; /* Space for side content */ + } + .lcp-has-sidecontent #lcp-footer-container { + margin-left: 340px; /* Space for side content */ + } +} /* Sticky header styles (if applicable) */ #lcp-header-container { z-index: 3; @@ -122,11 +155,6 @@ Version: 1.0 -#lcp-sidecontent-inner { - height: 100%; - overflow: auto; /* Enable scrolling for inner content */ - padding-right: 15px; /* Space for the custom scrollbar */ -} #lcp-scroll-track { position: absolute; @@ -276,4 +304,5 @@ Version: 1.0 .tab-pane.active { display: block; - } \ No newline at end of file + } +