Changes to blocks and styles
This commit is contained in:
Jeremy Rangel
18
includes/blocks/lcp-footer-container/.editorconfig
Normal file
18
includes/blocks/lcp-footer-container/.editorconfig
Normal file
@ -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
|
||||
30
includes/blocks/lcp-footer-container/.gitignore
vendored
Normal file
30
includes/blocks/lcp-footer-container/.gitignore
vendored
Normal file
@ -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
|
||||
29
includes/blocks/lcp-footer-container/build/block.json
Normal file
29
includes/blocks/lcp-footer-container/build/block.json
Normal file
@ -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"
|
||||
}
|
||||
1
includes/blocks/lcp-footer-container/build/index-rtl.css
Normal file
1
includes/blocks/lcp-footer-container/build/index-rtl.css
Normal file
@ -0,0 +1 @@
|
||||
.wp-block-create-block-lcp-viewport{border:1px dotted red}
|
||||
@ -0,0 +1 @@
|
||||
<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => 'f3a49fcf497c8df94623');
|
||||
1
includes/blocks/lcp-footer-container/build/index.css
Normal file
1
includes/blocks/lcp-footer-container/build/index.css
Normal file
@ -0,0 +1 @@
|
||||
.wp-block-create-block-lcp-viewport{border:1px dotted red}
|
||||
1
includes/blocks/lcp-footer-container/build/index.js
Normal file
1
includes/blocks/lcp-footer-container/build/index.js
Normal file
@ -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<e.length;p++){n=e[p][0],o=e[p][1],r=e[p][2];for(var s=!0,a=0;a<n.length;a++)(!1&r||i>=r)&&Object.keys(l.O).every((e=>l.O[e](n[a])))?n.splice(a--,1):(s=!1,r<i&&(i=r));if(s){e.splice(p--,1);var d=o();void 0!==d&&(t=d)}}return t}r=r||0;for(var p=e.length;p>0&&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);d<i.length;d++)r=i[d],l.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return l.O(p)},n=self.webpackChunklcp_viewport=self.webpackChunklcp_viewport||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))})();var o=l.O(void 0,[350],(()=>l(717)));o=l.O(o)})();
|
||||
@ -0,0 +1 @@
|
||||
.wp-block-create-block-lcp-viewport{background-color:#21759b;color:#fff;padding:2px}
|
||||
@ -0,0 +1 @@
|
||||
.wp-block-create-block-lcp-viewport{background-color:#21759b;color:#fff;padding:2px}
|
||||
@ -0,0 +1 @@
|
||||
<?php return array('dependencies' => array(), 'version' => 'd4e4a494008d04e1eb42');
|
||||
1
includes/blocks/lcp-footer-container/build/view.js
Normal file
1
includes/blocks/lcp-footer-container/build/view.js
Normal file
@ -0,0 +1 @@
|
||||
console.log("Hello World! (from create-block-lcp-viewport block)");
|
||||
@ -0,0 +1,20 @@
|
||||
<?php
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit; // Exit if accessed directly.
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers the block using the metadata loaded from the `block.json` file.
|
||||
* Behind the scenes, it registers also all assets so they can be enqueued
|
||||
* through the block editor in the corresponding context.
|
||||
*
|
||||
* @see https://developer.wordpress.org/reference/functions/register_block_type/
|
||||
*/
|
||||
function lcp_footer_container_block_init() {
|
||||
register_block_type( __DIR__ . '/build' , array(
|
||||
'parent' => array( 'lcp/viewport', 'lcp/main-area' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
add_action( 'init', 'lcp_footer_container_block_init' );
|
||||
20
includes/blocks/lcp-footer-container/package.json
Normal file
20
includes/blocks/lcp-footer-container/package.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
55
includes/blocks/lcp-footer-container/readme.txt
Normal file
55
includes/blocks/lcp-footer-container/readme.txt
Normal file
@ -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.
|
||||
30
includes/blocks/lcp-footer-container/src/block.json
Normal file
30
includes/blocks/lcp-footer-container/src/block.json
Normal file
@ -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"
|
||||
}
|
||||
153
includes/blocks/lcp-footer-container/src/edit.js
Normal file
153
includes/blocks/lcp-footer-container/src/edit.js
Normal file
@ -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 (
|
||||
<div {...blockProps}>
|
||||
{/* Inspector Controls: Add a SelectControl to change the sticky attribute */}
|
||||
<InspectorControls>
|
||||
<SelectControl
|
||||
label={__('Sticky Behavior', 'lcp')}
|
||||
value={sticky}
|
||||
options={[
|
||||
{ label: __('Never', 'lcp'), value: 'never' },
|
||||
{ label: __('On Scroll', 'lcp'), value: 'onScroll' },
|
||||
{ label: __('Always', 'lcp'), value: 'always' },
|
||||
]}
|
||||
onChange={handleStickyChange}
|
||||
/>
|
||||
<BaseControl label="Padding - Desktop">
|
||||
<div style={{ display: 'flex', flexDirection: 'row' }}>
|
||||
<span style={{ marginRight: '10px' }}>Padding</span>
|
||||
<ToggleControl
|
||||
label="Use Independent Padding"
|
||||
checked={isIndependentLarge}
|
||||
onChange={handleToggleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Padding controls */}
|
||||
{isIndependentLarge ? (
|
||||
<div style={{ display: 'grid', padding: '10px', gridTemplateColumns: '1fr 1fr', gap: '10px', justifyItems: 'center' }}>
|
||||
{/* Padding controls for top, left, right, bottom */}
|
||||
<fieldset style={{ gridColumn: 'span 2', width: '116px' }}>
|
||||
<legend>Top</legend>
|
||||
<UnitControl
|
||||
value={paddingTop}
|
||||
onChange={(newValue) => {
|
||||
setPaddingTop(newValue);
|
||||
setAttributes({ paddingTop: newValue });
|
||||
}}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Left</legend>
|
||||
<UnitControl
|
||||
value={paddingLeft}
|
||||
onChange={(newValue) => {
|
||||
setPaddingLeft(newValue);
|
||||
setAttributes({ paddingLeft: newValue });
|
||||
}}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Right</legend>
|
||||
<UnitControl
|
||||
value={paddingRight}
|
||||
onChange={(newValue) => {
|
||||
setPaddingRight(newValue);
|
||||
setAttributes({ paddingRight: newValue });
|
||||
}}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset style={{ gridColumn: 'span 2', width: '116px' }}>
|
||||
<legend>Bottom</legend>
|
||||
<UnitControl
|
||||
value={paddingBottom}
|
||||
onChange={(newValue) => {
|
||||
setPaddingBottom(newValue);
|
||||
setAttributes({ paddingBottom: newValue });
|
||||
}}
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
) : (
|
||||
<UnitControl
|
||||
label="Padding Value"
|
||||
value={999}
|
||||
onChange={updatePaddingForAllSizes}
|
||||
/>
|
||||
)}
|
||||
</BaseControl>
|
||||
</InspectorControls>
|
||||
|
||||
|
||||
<InnerBlocks
|
||||
template= {[
|
||||
["core/template-part", {slug:'footer'}]]
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
9
includes/blocks/lcp-footer-container/src/editor.scss
Normal file
9
includes/blocks/lcp-footer-container/src/editor.scss
Normal file
@ -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;
|
||||
}
|
||||
39
includes/blocks/lcp-footer-container/src/index.js
Normal file
39
includes/blocks/lcp-footer-container/src/index.js
Normal file
@ -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,
|
||||
} );
|
||||
33
includes/blocks/lcp-footer-container/src/save.js
Normal file
33
includes/blocks/lcp-footer-container/src/save.js
Normal file
@ -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 (
|
||||
<div {...blockProps} className={"lcp"} id="lcp-footer-container">
|
||||
<InnerBlocks.Content />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
12
includes/blocks/lcp-footer-container/src/style.scss
Normal file
12
includes/blocks/lcp-footer-container/src/style.scss
Normal file
@ -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;
|
||||
}
|
||||
25
includes/blocks/lcp-footer-container/src/view.js
Normal file
25
includes/blocks/lcp-footer-container/src/view.js
Normal file
@ -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 */
|
||||
@ -1 +1 @@
|
||||
<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '8285297d94129972e4c4');
|
||||
<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '92128317eaa465727f6e');
|
||||
|
||||
@ -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<e.length;c++){n=e[c][0],o=e[c][1],r=e[c][2];for(var i=!0,a=0;a<n.length;a++)(!1&r||s>=r)&&Object.keys(l.O).every((e=>l.O[e](n[a])))?n.splice(a--,1):(i=!1,r<s&&(s=r));if(i){e.splice(c--,1);var d=o();void 0!==d&&(t=d)}}return t}r=r||0;for(var c=e.length;c>0&&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);d<s.length;d++)r=s[d],l.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return l.O(c)},n=self.webpackChunklcp_viewport=self.webpackChunklcp_viewport||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))})();var o=l.O(void 0,[350],(()=>l(717)));o=l.O(o)})();
|
||||
(()=>{"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<e.length;p++){l=e[p][0],r=e[p][1],o=e[p][2];for(var i=!0,a=0;a<l.length;a++)(!1&o||s>=o)&&Object.keys(n.O).every((e=>n.O[e](l[a])))?l.splice(a--,1):(i=!1,o<s&&(s=o));if(i){e.splice(p--,1);var d=r();void 0!==d&&(t=d)}}return t}o=o||0;for(var p=e.length;p>0&&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);d<s.length;d++)o=s[d],n.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return n.O(p)},l=self.webpackChunklcp_viewport=self.webpackChunklcp_viewport||[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))})();var r=n.O(void 0,[350],(()=>n(717)));r=n.O(r)})();
|
||||
@ -63,6 +63,8 @@ export default function Edit({ attributes, setAttributes }) {
|
||||
// Update the padding attribute with the new padding object
|
||||
setAttributes({ padding: newPadding });
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div {...blockProps}>
|
||||
{/* Inspector Controls: Add a SelectControl to change the sticky attribute */}
|
||||
@ -142,10 +144,12 @@ export default function Edit({ attributes, setAttributes }) {
|
||||
</BaseControl>
|
||||
</InspectorControls>
|
||||
|
||||
|
||||
|
||||
<InnerBlocks
|
||||
// Optional: You can provide a template or allowed blocks
|
||||
// template={[['core/paragraph'], ['core/image']]}
|
||||
template= {[
|
||||
["core/template-part", {slug:'header'}]]
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -1 +1 @@
|
||||
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '4c475d6920d9d10f9da0');
|
||||
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => 'e74f7d37dca7635e59f9');
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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<e.length;p++){n=e[p][0],i=e[p][1],o=e[p][2];for(var a=!0,l=0;l<n.length;l++)(!1&o||s>=o)&&Object.keys(r.O).every((e=>r.O[e](n[l])))?n.splice(l--,1):(a=!1,o<s&&(s=o));if(a){e.splice(p--,1);var c=i();void 0!==c&&(t=c)}}return t}o=o||0;for(var p=e.length;p>0&&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);c<s.length;c++)o=s[c],r.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return r.O(p)},n=self.webpackChunklcp_viewport=self.webpackChunklcp_viewport||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))})();var i=r.O(void 0,[350],(()=>r(998)));i=r.O(i)})();
|
||||
(()=>{"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<e.length;p++){t=e[p][0],i=e[p][1],s=e[p][2];for(var o=!0,l=0;l<t.length;l++)(!1&s||a>=s)&&Object.keys(r.O).every((e=>r.O[e](t[l])))?t.splice(l--,1):(o=!1,s<a&&(a=s));if(o){e.splice(p--,1);var c=i();void 0!==c&&(n=c)}}return n}s=s||0;for(var p=e.length;p>0&&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);c<a.length;c++)s=a[c],r.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return r.O(p)},t=self.webpackChunklcp_viewport=self.webpackChunklcp_viewport||[];t.forEach(n.bind(null,0)),t.push=n.bind(null,t.push.bind(t))})();var i=r.O(void 0,[350],(()=>r(998)));i=r.O(i)})();
|
||||
@ -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",
|
||||
|
||||
@ -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
|
||||
/>
|
||||
<ToggleControl
|
||||
label={__('Enable Vertical Expansion', 'lcp')}
|
||||
checked={expandVertical} // Bind to expandVertical attribute
|
||||
onChange={handleExpandVerticalChange} // Function to update expandVertical
|
||||
/>
|
||||
</div>
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
|
||||
{/* Main block content */}
|
||||
<div {...innerBlocksProps} id="lcp-main-wrap">
|
||||
<div {...innerBlocksProps} id="lcp-main-container" style={{minHeight:'200px'}}>
|
||||
|
||||
|
||||
<InnerBlocks {...innerBlocksProps} />
|
||||
|
||||
@ -8,6 +8,6 @@
|
||||
border: 1px dotted #f00;
|
||||
}
|
||||
|
||||
#lcp-main-wrap {
|
||||
.has-sidecontent #lcp-main-container {
|
||||
margin-left:340px
|
||||
}
|
||||
@ -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 (
|
||||
<div {...blockProps} id="lcp-main-wrap" style={style}>
|
||||
|
||||
<InnerBlocks.Content />
|
||||
|
||||
return (
|
||||
<div {...blockProps} id="lcp-main-container" className={className} style={style}>
|
||||
<InnerBlocks.Content />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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';
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -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) {
|
||||
|
||||
57
style.css
57
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user