Changes to directory structure
This commit is contained in:
Jeremy Rangel
18
includes/blocks/lcp-button/.editorconfig
Normal file
18
includes/blocks/lcp-button/.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-button/.gitignore
vendored
Normal file
30
includes/blocks/lcp-button/.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
|
||||
52
includes/blocks/lcp-button/components/IconSelectControl.js
Normal file
52
includes/blocks/lcp-button/components/IconSelectControl.js
Normal file
@ -0,0 +1,52 @@
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { SelectControl } from '@wordpress/components';
|
||||
|
||||
export function IconSelectControl(props) {
|
||||
const { iconSvgId, onIconChange } = props;
|
||||
|
||||
// Hardcoded icon data
|
||||
const iconData = [
|
||||
{
|
||||
"uuid": "c0a8012345678f3d5b847ad0f8a890f1",
|
||||
"iconId": "comment-dots",
|
||||
"family": "Font Awesome",
|
||||
"sub-family": "solid",
|
||||
"name": "Comment Dots",
|
||||
"path": "<path d='M168.2 384.9c-15-5.4-31.7-3.1-44.6 6.4c-8.2 6-22.3 14.8-39.4 22.7c5.6-14.7 9.9-31.3 11.3-49.4c1-12.9-3.3-25.7-11.8-35.5C60.4 302.8 48 272 48 240c0-79.5 83.3-160 208-160s208 80.5 208 160s-83.3 160-208 160c-31.6 0-61.3-5.5-87.8-15.1zM26.3 423.8c-1.6 2.7-3.3 5.4-5.1 8.1l-.3 .5c-1.6 2.3-3.2 4.6-4.8 6.9c-3.5 4.7-7.3 9.3-11.3 13.5c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c5.1 0 10.2-.3 15.3-.8l.7-.1c4.4-.5 8.8-1.1 13.2-1.9c.8-.1 1.6-.3 2.4-.5c17.8-3.5 34.9-9.5 50.1-16.1c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9zM144 272a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm144-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm80 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/>"
|
||||
},
|
||||
{
|
||||
"uuid": "a1b2c3d4e5f6789abcdef0123456789ab",
|
||||
"iconId": "newspaper",
|
||||
"family": "Font Awesome",
|
||||
"sub-family": "solid",
|
||||
"name": "Newspaper",
|
||||
"path": "<path d='M168 80c-13.3 0-24 10.7-24 24l0 304c0 8.4-1.4 16.5-4.1 24L440 432c13.3 0 24-10.7 24-24l0-304c0-13.3-10.7-24-24-24L168 80zM72 480c-39.8 0-72-32.2-72-72L0 112C0 98.7 10.7 88 24 88s24 10.7 24 24l0 296c0 13.3 10.7 24 24 24s24-10.7 24-24l0-304c0-39.8 32.2-72 72-72l272 0c39.8 0 72 32.2 72 72l0 304c0 39.8-32.2 72-72 72L72 480zM176 136c0-13.3 10.7-24 24-24l96 0c13.3 0 24 10.7 24 24l0 80c0 13.3-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24l0-80zm200-24l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zM200 272l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-208 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-208 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/>"
|
||||
}
|
||||
];
|
||||
|
||||
// Handle icon selection from dropdown
|
||||
const handleIconChange = (selectedIconId) => {
|
||||
const selectedIcon = iconData.find(icon => icon.uuid === selectedIconId);
|
||||
|
||||
if (selectedIcon && onIconChange) {
|
||||
onIconChange({
|
||||
iconSvgId: selectedIconId, // UUID of the selected icon
|
||||
iconSvgPath: selectedIcon.path // SVG path of the selected icon
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<SelectControl
|
||||
label={__("Select Icon")}
|
||||
value={iconSvgId}
|
||||
options={iconData.map((icon) => ({
|
||||
label: icon.name,
|
||||
value: icon.uuid, // Store the UUID as the value
|
||||
}))}
|
||||
onChange={handleIconChange}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
18
includes/blocks/lcp-button/components/iconsvgs.json
Normal file
18
includes/blocks/lcp-button/components/iconsvgs.json
Normal file
@ -0,0 +1,18 @@
|
||||
[
|
||||
{
|
||||
"uuid": "c0a8012345678f3d5b847ad0f8a890f1",
|
||||
"iconId": "comment-dots",
|
||||
"family": "Font Awesome",
|
||||
"sub-family": "solid",
|
||||
"name": "Comment Dots",
|
||||
"path": "<path d='M168.2 384.9c-15-5.4-31.7-3.1-44.6 6.4c-8.2 6-22.3 14.8-39.4 22.7c5.6-14.7 9.9-31.3 11.3-49.4c1-12.9-3.3-25.7-11.8-35.5C60.4 302.8 48 272 48 240c0-79.5 83.3-160 208-160s208 80.5 208 160s-83.3 160-208 160c-31.6 0-61.3-5.5-87.8-15.1zM26.3 423.8c-1.6 2.7-3.3 5.4-5.1 8.1l-.3 .5c-1.6 2.3-3.2 4.6-4.8 6.9c-3.5 4.7-7.3 9.3-11.3 13.5c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c5.1 0 10.2-.3 15.3-.8l.7-.1c4.4-.5 8.8-1.1 13.2-1.9c.8-.1 1.6-.3 2.4-.5c17.8-3.5 34.9-9.5 50.1-16.1c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9zM144 272a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm144-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm80 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/>"
|
||||
},
|
||||
{
|
||||
"uuid": "a1b2c3d4e5f6789abcdef0123456789ab",
|
||||
"iconId": "newspaper",
|
||||
"family": "Font Awesome",
|
||||
"sub-family": "solid",
|
||||
"name": "Newspaper",
|
||||
"path": "<path d='M168 80c-13.3 0-24 10.7-24 24l0 304c0 8.4-1.4 16.5-4.1 24L440 432c13.3 0 24-10.7 24-24l0-304c0-13.3-10.7-24-24-24L168 80zM72 480c-39.8 0-72-32.2-72-72L0 112C0 98.7 10.7 88 24 88s24 10.7 24 24l0 296c0 13.3 10.7 24 24 24s24-10.7 24-24l0-304c0-39.8 32.2-72 72-72l272 0c39.8 0 72 32.2 72 72l0 304c0 39.8-32.2 72-72 72L72 480zM176 136c0-13.3 10.7-24 24-24l96 0c13.3 0 24 10.7 24 24l0 80c0 13.3-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24l0-80zm200-24l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zM200 272l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-208 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-208 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/>"
|
||||
}
|
||||
]
|
||||
23
includes/blocks/lcp-button/icon-svgs.json
Normal file
23
includes/blocks/lcp-button/icon-svgs.json
Normal file
@ -0,0 +1,23 @@
|
||||
[
|
||||
{
|
||||
"id": "comment-dots",
|
||||
"family": "Font Awesome",
|
||||
"sub-family": "solid",
|
||||
"name": "Comment Dots",
|
||||
"path": "<path d='M168.2 384.9c-15-5.4-31.7-3.1-44.6 6.4c-8.2 6-22.3 14.8-39.4 22.7c5.6-14.7 9.9-31.3 11.3-49.4c1-12.9-3.3-25.7-11.8-35.5C60.4 302.8 48 272 48 240c0-79.5 83.3-160 208-160s208 80.5 208 160s-83.3 160-208 160c-31.6 0-61.3-5.5-87.8-15.1zM26.3 423.8c-1.6 2.7-3.3 5.4-5.1 8.1l-.3 .5c-1.6 2.3-3.2 4.6-4.8 6.9c-3.5 4.7-7.3 9.3-11.3 13.5c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c5.1 0 10.2-.3 15.3-.8l.7-.1c4.4-.5 8.8-1.1 13.2-1.9c.8-.1 1.6-.3 2.4-.5c17.8-3.5 34.9-9.5 50.1-16.1c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9zM144 272a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm144-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm80 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/>"
|
||||
},
|
||||
{
|
||||
"id": "newspaper",
|
||||
"family": "Font Awesome",
|
||||
"sub-family": "solid",
|
||||
"name": "Newspaper",
|
||||
"path": "<path d='M168 80c-13.3 0-24 10.7-24 24l0 304c0 8.4-1.4 16.5-4.1 24L440 432c13.3 0 24-10.7 24-24l0-304c0-13.3-10.7-24-24-24L168 80zM72 480c-39.8 0-72-32.2-72-72L0 112C0 98.7 10.7 88 24 88s24 10.7 24 24l0 296c0 13.3 10.7 24 24 24s24-10.7 24-24l0-304c0-39.8 32.2-72 72-72l272 0c39.8 0 72 32.2 72 72l0 304c0 39.8-32.2 72-72 72L72 480zM176 136c0-13.3 10.7-24 24-24l96 0c13.3 0 24 10.7 24 24l0 80c0 13.3-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24l0-80zm200-24l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zM200 272l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-208 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-208 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/>"
|
||||
},
|
||||
{
|
||||
"id": "map",
|
||||
"family": "Font Awesome",
|
||||
"sub-family": "solid",
|
||||
"name": "Map",
|
||||
"path": "<path d='M565.6 36.2C572.1 40.7 576 48.1 576 56l0 336c0 10-6.2 18.9-15.5 22.4l-168 64c-5.2 2-10.9 2.1-16.1 .3L192.5 417.5l-160 61c-7.4 2.8-15.7 1.8-22.2-2.7S0 463.9 0 456L0 120c0-10 6.1-18.9 15.5-22.4l168-64c5.2-2 10.9-2.1 16.1-.3L383.5 94.5l160-61c7.4-2.8 15.7-1.8 22.2 2.7zM48 136.5l0 284.6 120-45.7 0-284.6L48 136.5zM360 422.7l0-285.4-144-48 0 285.4 144 48zm48-1.5l120-45.7 0-284.6L408 136.5l0 284.6z'/>"
|
||||
}
|
||||
]
|
||||
30
includes/blocks/lcp-button/lcp-button.php
Normal file
30
includes/blocks/lcp-button/lcp-button.php
Normal file
@ -0,0 +1,30 @@
|
||||
<?php
|
||||
/**
|
||||
* Plugin Name: Button
|
||||
* Description: Example block scaffolded with Create Block tool.
|
||||
* Requires at least: 6.6
|
||||
* Requires PHP: 7.2
|
||||
* Version: 0.1.0
|
||||
* Author: The WordPress Contributors
|
||||
* License: GPL-2.0-or-later
|
||||
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
* Text Domain: button
|
||||
*
|
||||
* @package CreateBlock
|
||||
*/
|
||||
|
||||
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 create_block_button_block_init() {
|
||||
register_block_type( __DIR__ . '/build' );
|
||||
}
|
||||
add_action( 'init', 'create_block_button_block_init' );
|
||||
20
includes/blocks/lcp-button/package.json
Normal file
20
includes/blocks/lcp-button/package.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "button",
|
||||
"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.6.0"
|
||||
}
|
||||
}
|
||||
55
includes/blocks/lcp-button/readme.txt
Normal file
55
includes/blocks/lcp-button/readme.txt
Normal file
@ -0,0 +1,55 @@
|
||||
=== Button ===
|
||||
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/button` 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.
|
||||
46
includes/blocks/lcp-button/src/block.json
Normal file
46
includes/blocks/lcp-button/src/block.json
Normal file
@ -0,0 +1,46 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "lcp/button",
|
||||
"version": "0.1.0",
|
||||
"title": "Button",
|
||||
"category": "widgets",
|
||||
"icon": "smiley",
|
||||
"description": "Example block scaffolded with Create Block tool.",
|
||||
"example": {},
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"attributes": {
|
||||
"buttonFunction": {
|
||||
"type": "string",
|
||||
"default": "customUrl"
|
||||
},
|
||||
"buttonText": {
|
||||
"type": "string",
|
||||
"default": "Button Text"
|
||||
},
|
||||
"displayIcon": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"iconSource": {
|
||||
"type": "string",
|
||||
"default": "svgPath"
|
||||
},
|
||||
"iconSvgPath": {
|
||||
"type": "string"
|
||||
},
|
||||
"iconSvgId": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"popUpId": {
|
||||
"type": "number"
|
||||
}
|
||||
},
|
||||
"textdomain": "button",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"viewScript": "file:./view.js"
|
||||
}
|
||||
152
includes/blocks/lcp-button/src/edit.js
Normal file
152
includes/blocks/lcp-button/src/edit.js
Normal file
@ -0,0 +1,152 @@
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
|
||||
import { PanelBody, SelectControl, TextControl, TextareaControl, ToggleControl } from '@wordpress/components';
|
||||
import { useState, useEffect } from '@wordpress/element';
|
||||
import './editor.scss';
|
||||
import { useSelect } from '@wordpress/data';
|
||||
import { IconSelectControl } from '../components/IconSelectControl';
|
||||
|
||||
|
||||
// Sample JSON data for icons (with UUIDs)
|
||||
const iconData = [
|
||||
{
|
||||
"uuid": "c0a8012345678f3d5b847ad0f8a890f1",
|
||||
"iconId": "comment-dots",
|
||||
"family": "Font Awesome",
|
||||
"sub-family": "solid",
|
||||
"name": "Comment Dots",
|
||||
"path": "<path d='M168.2 384.9c-15-5.4-31.7-3.1-44.6 6.4c-8.2 6-22.3 14.8-39.4 22.7c5.6-14.7 9.9-31.3 11.3-49.4c1-12.9-3.3-25.7-11.8-35.5C60.4 302.8 48 272 48 240c0-79.5 83.3-160 208-160s208 80.5 208 160s-83.3 160-208 160c-31.6 0-61.3-5.5-87.8-15.1zM26.3 423.8c-1.6 2.7-3.3 5.4-5.1 8.1l-.3 .5c-1.6 2.3-3.2 4.6-4.8 6.9c-3.5 4.7-7.3 9.3-11.3 13.5c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c5.1 0 10.2-.3 15.3-.8l.7-.1c4.4-.5 8.8-1.1 13.2-1.9c.8-.1 1.6-.3 2.4-.5c17.8-3.5 34.9-9.5 50.1-16.1c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9zM144 272a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm144-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm80 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/>"
|
||||
},
|
||||
{
|
||||
"uuid": "a1b2c3d4e5f6789abcdef0123456789ab",
|
||||
"iconId": "newspaper",
|
||||
"family": "Font Awesome",
|
||||
"sub-family": "solid",
|
||||
"name": "Newspaper",
|
||||
"path": "<path d='M168 80c-13.3 0-24 10.7-24 24l0 304c0 8.4-1.4 16.5-4.1 24L440 432c13.3 0 24-10.7 24-24l0-304c0-13.3-10.7-24-24-24L168 80zM72 480c-39.8 0-72-32.2-72-72L0 112C0 98.7 10.7 88 24 88s24 10.7 24 24l0 296c0 13.3 10.7 24 24 24s24-10.7 24-24l0-304c0-39.8 32.2-72 72-72l272 0c39.8 0 72 32.2 72 72l0 304c0 39.8-32.2 72-72 72L72 480zM176 136c0-13.3 10.7-24 24-24l96 0c13.3 0 24 10.7 24 24l0 80c0 13.3-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24l0-80zm200-24l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zM200 272l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-208 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-208 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/>"
|
||||
}
|
||||
];
|
||||
|
||||
export default function Edit(props) {
|
||||
const { attributes, setAttributes } = props;
|
||||
const { buttonFunction, popUpId, buttonText, iconSvgId, iconSvgPath, displayIcon, iconSource} = attributes; // iconSvgId holds the UUID and iconSvgPath holds the SVG path
|
||||
const [popups, setPopups] = useState([]);
|
||||
|
||||
// Fetch published popups (lcp-popup CPT)
|
||||
useEffect(() => {
|
||||
const fetchPopups = async () => {
|
||||
const response = await fetch('/wp-json/wp/v2/lcp-popup');
|
||||
const data = await response.json();
|
||||
setPopups(data);
|
||||
};
|
||||
fetchPopups();
|
||||
}, []);
|
||||
|
||||
// Handle icon selection from dropdown
|
||||
const handleIconChange = (selectedIconId) => {
|
||||
console.log("an icon is selected");
|
||||
// Find the selected icon from the iconData array using the UUID
|
||||
const selectedIcon = iconData.find(icon => icon.uuid === selectedIconId);
|
||||
|
||||
if (selectedIcon) {
|
||||
// Update both iconSvgId (UUID) and iconSvgPath (SVG path)
|
||||
setAttributes({
|
||||
iconSvgId: selectedIconId, // UUID of the selected icon
|
||||
iconSvgPath: selectedIcon.path // SVG path of the selected icon
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleChange = (value) => {
|
||||
setAttributes({ displayIcon: value });
|
||||
};
|
||||
|
||||
const iconSourceOptions = [
|
||||
{ value: 'manualSvgPath', label: 'SVG Path' },
|
||||
{ value: 'iconSelector', label: 'Select Icon' },
|
||||
];
|
||||
|
||||
const buttonFunctionOptions = [
|
||||
{ value: 'customUrl', label: 'Custom URL' },
|
||||
{ value: 'openPopup', label: 'Open Popup' },
|
||||
{ value: 'showLoginForm', label: 'Show Login Form' },
|
||||
{ value: 'logOut', label: 'Open Popup' },
|
||||
{ value: 'shareCurrentPost', label: 'Share Current Post' }
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<InspectorControls>
|
||||
|
||||
<PanelBody title={__("Button Settings")}>
|
||||
<SelectControl
|
||||
label={__("Popup")}
|
||||
value={popUpId}
|
||||
options={iconSourceOptions}
|
||||
onChange={(value) => setAttributes({ iconSource })}
|
||||
/>
|
||||
{buttonFunction === 'openPopup' && (
|
||||
<SelectControl
|
||||
label={__("Popup")}
|
||||
value={popUpId}
|
||||
options={iconSourceOptions}
|
||||
onChange={(value) => setAttributes({ iconSource })}
|
||||
/>
|
||||
)}
|
||||
<TextControl
|
||||
label={__("Button Text")}
|
||||
value={buttonText}
|
||||
onChange={(value) => setAttributes({ buttonText: value })}
|
||||
/>
|
||||
<ToggleControl
|
||||
label="Display Icon"
|
||||
checked={displayIcon}
|
||||
onChange={handleToggleChange}
|
||||
/>
|
||||
{displayIcon && (
|
||||
<>
|
||||
<SelectControl
|
||||
label={__("Icon Source")}
|
||||
value={iconSource}
|
||||
options={iconSourceOptions}
|
||||
onChange={(value) => setAttributes({ iconSource: value })}
|
||||
/>
|
||||
{iconSource === 'manualSvgPath' && (
|
||||
<TextareaControl
|
||||
label="Icon SVG Path"
|
||||
value={iconSvgPath}
|
||||
onChange={(value) => props.setAttributes({ iconSvgPath: value })}
|
||||
/>
|
||||
)}
|
||||
{iconSource === 'iconSelector' && (
|
||||
<>
|
||||
<SelectControl
|
||||
label={__("Icon")}
|
||||
value={iconSvgId}
|
||||
options={iconData.map((icon) => ({
|
||||
label: icon.name,
|
||||
value: icon.uuid, // Store the UUID as the value
|
||||
}))}
|
||||
onChange={handleIconChange}
|
||||
/>
|
||||
<IconSelectControl
|
||||
value={props.attributes.icon}
|
||||
onChange={handleIconChange}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
<div {...useBlockProps()}>
|
||||
<div className="button-container">
|
||||
<span>{buttonText}</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
9
includes/blocks/lcp-button/src/editor.scss
Normal file
9
includes/blocks/lcp-button/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-button {
|
||||
border: 1px dotted #f00;
|
||||
}
|
||||
39
includes/blocks/lcp-button/src/index.js
Normal file
39
includes/blocks/lcp-button/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,
|
||||
} );
|
||||
25
includes/blocks/lcp-button/src/save.js
Normal file
25
includes/blocks/lcp-button/src/save.js
Normal file
@ -0,0 +1,25 @@
|
||||
import { useBlockProps } from '@wordpress/block-editor';
|
||||
|
||||
export default function save(props) {
|
||||
const { attributes } = props;
|
||||
const { type, popUpId, buttonText, iconSvgPath } = attributes; // Destructure buttonText and iconSvgPath from attributes
|
||||
|
||||
// Get the block props for the button
|
||||
const blockProps = useBlockProps.save();
|
||||
|
||||
// Conditionally add data-open-popup if type is 'openPopUp' and popUpId is not empty
|
||||
if (type === 'openPopUp' && popUpId) {
|
||||
blockProps['data-open-popup'] = popUpId; // Add the data attribute dynamically
|
||||
}
|
||||
|
||||
return (
|
||||
<button {...blockProps}>
|
||||
{/* Conditionally render the icon if iconSvgPath is set */}
|
||||
{iconSvgPath && (
|
||||
<svg className="icon" viewBox="0 0 24 24" width="100" height="100" dangerouslySetInnerHTML={{ __html: iconSvgPath }} />
|
||||
)}
|
||||
{/* Render the button text */}
|
||||
{buttonText || 'Button'} {/* Use buttonText or fallback */}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
12
includes/blocks/lcp-button/src/style.scss
Normal file
12
includes/blocks/lcp-button/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-button {
|
||||
background-color: #21759b;
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
25
includes/blocks/lcp-button/src/view.js
Normal file
25
includes/blocks/lcp-button/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-button block)' );
|
||||
/* eslint-enable no-console */
|
||||
18
includes/blocks/lcp-dynamic-container/.editorconfig
Normal file
18
includes/blocks/lcp-dynamic-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-dynamic-container/.gitignore
vendored
Normal file
30
includes/blocks/lcp-dynamic-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
|
||||
131
includes/blocks/lcp-dynamic-container/lcp-dynamic-container.php
Normal file
131
includes/blocks/lcp-dynamic-container/lcp-dynamic-container.php
Normal file
@ -0,0 +1,131 @@
|
||||
<?php /**
|
||||
* Function to generate random class and add dynamic padding styles
|
||||
*/
|
||||
function render_lcp_container( $attributes, $content ) {
|
||||
// Debugging: Check the passed attributes
|
||||
//var_dump($attributes);
|
||||
|
||||
// Generate a random class name (optional, could be customized)
|
||||
$random_class = 'lcp-container-' . wp_generate_password( 12, false, false );
|
||||
|
||||
// Get the padding and backgroundColor attributes
|
||||
$padding = isset( $attributes['padding'] ) ? $attributes['padding'] : array();
|
||||
$background_color = isset( $attributes['backgroundColor'] ) ? $attributes['backgroundColor'] : '#ffffff'; // Default color
|
||||
|
||||
// Debugging: Check padding and background color
|
||||
error_log(print_r($padding, true));
|
||||
error_log(print_r($background_color, true));
|
||||
|
||||
// Check if all padding values are the same across all sizes
|
||||
$same_padding = true;
|
||||
$padding_top = $padding['extraLarge']['top'];
|
||||
$padding_right = $padding['extraLarge']['right'];
|
||||
$padding_bottom = $padding['extraLarge']['bottom'];
|
||||
$padding_left = $padding['extraLarge']['left'];
|
||||
|
||||
// Compare the padding for all other sizes (large, medium, small)
|
||||
foreach ( ['large', 'medium', 'small'] as $size ) {
|
||||
if (
|
||||
$padding[$size]['top'] !== $padding_top ||
|
||||
$padding[$size]['right'] !== $padding_right ||
|
||||
$padding[$size]['bottom'] !== $padding_bottom ||
|
||||
$padding[$size]['left'] !== $padding_left
|
||||
) {
|
||||
$same_padding = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Prepare the inline style or media queries
|
||||
$style = '';
|
||||
|
||||
// Add background-color to the inline style
|
||||
$style .= sprintf( 'background-color: %s;', esc_attr( $background_color ) );
|
||||
|
||||
if ( $same_padding ) {
|
||||
// If all padding values are the same, use inline style
|
||||
$style .= sprintf(
|
||||
'padding-top: %s; padding-right: %s; padding-bottom: %s; padding-left: %s;',
|
||||
esc_attr( $padding_top ),
|
||||
esc_attr( $padding_right ),
|
||||
esc_attr( $padding_bottom ),
|
||||
esc_attr( $padding_left )
|
||||
);
|
||||
} else {
|
||||
// If padding is different, generate media queries for different sizes
|
||||
$style .= sprintf(
|
||||
'@media (min-width: 1200px) { .%s { padding-top: %s; padding-right: %s; padding-bottom: %s; padding-left: %s; } }',
|
||||
esc_attr( $random_class ),
|
||||
esc_attr( $padding['extraLarge']['top'] ),
|
||||
esc_attr( $padding['extraLarge']['right'] ),
|
||||
esc_attr( $padding['extraLarge']['bottom'] ),
|
||||
esc_attr( $padding['extraLarge']['left'] )
|
||||
);
|
||||
|
||||
$style .= sprintf(
|
||||
'@media (min-width: 1024px) { .%s { padding-top: %s; padding-right: %s; padding-bottom: %s; padding-left: %s; } }',
|
||||
esc_attr( $random_class ),
|
||||
esc_attr( $padding['large']['top'] ),
|
||||
esc_attr( $padding['large']['right'] ),
|
||||
esc_attr( $padding['large']['bottom'] ),
|
||||
esc_attr( $padding['large']['left'] )
|
||||
);
|
||||
|
||||
$style .= sprintf(
|
||||
'@media (min-width: 768px) { .%s { padding-top: %s; padding-right: %s; padding-bottom: %s; padding-left: %s; } }',
|
||||
esc_attr( $random_class ),
|
||||
esc_attr( $padding['medium']['top'] ),
|
||||
esc_attr( $padding['medium']['right'] ),
|
||||
esc_attr( $padding['medium']['bottom'] ),
|
||||
esc_attr( $padding['medium']['left'] )
|
||||
);
|
||||
|
||||
$style .= sprintf(
|
||||
'@media (max-width: 767px) { .%s { padding-top: %s; padding-right: %s; padding-bottom: %s; padding-left: %s; } }',
|
||||
esc_attr( $random_class ),
|
||||
esc_attr( $padding['small']['top'] ),
|
||||
esc_attr( $padding['small']['right'] ),
|
||||
esc_attr( $padding['small']['bottom'] ),
|
||||
esc_attr( $padding['small']['left'] )
|
||||
);
|
||||
}
|
||||
|
||||
// Generate the <style> tag with the final CSS (either inline or media queries)
|
||||
$style_tag = '';
|
||||
if ( ! empty( $style ) ) {
|
||||
$style_tag = sprintf( '<style>.%s { %s }</style>', esc_attr( $random_class ), $style );
|
||||
}
|
||||
|
||||
// Output the content wrapped in the div with the random class and padding styles
|
||||
return $style_tag . sprintf(
|
||||
'<div class="lcp-container %s">%s</div>',
|
||||
esc_attr( $random_class ),
|
||||
$content
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Function to return the media query breakpoint based on the size
|
||||
*/
|
||||
function get_media_query_breakpoint( $size ) {
|
||||
// Define breakpoints for each size
|
||||
$breakpoints = array(
|
||||
'extraLarge' => '1200px',
|
||||
'large' => '1024px',
|
||||
'medium' => '768px',
|
||||
'small' => '480px',
|
||||
);
|
||||
|
||||
return isset( $breakpoints[$size] ) ? $breakpoints[$size] : '480px';
|
||||
}
|
||||
|
||||
/**
|
||||
* Function to initialize the block
|
||||
*/
|
||||
function lcp_dynamic_container_block_init() {
|
||||
register_block_type( __DIR__ . '/build', array(
|
||||
'render_callback' => 'render_lcp_dynamic_container', // Add the render callback here
|
||||
));
|
||||
}
|
||||
add_action( 'init', 'lcp_dynamic_container_block_init' );
|
||||
20
includes/blocks/lcp-dynamic-container/package.json
Normal file
20
includes/blocks/lcp-dynamic-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-dynamic-container/readme.txt
Normal file
55
includes/blocks/lcp-dynamic-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.
|
||||
136
includes/blocks/lcp-dynamic-container/src/block.json
Normal file
136
includes/blocks/lcp-dynamic-container/src/block.json
Normal file
@ -0,0 +1,136 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "lcp/dynamic-container",
|
||||
"version": "0.1.0",
|
||||
"title": "Dynamic Container",
|
||||
"category": "widgets",
|
||||
"icon": "smiley",
|
||||
"description": "A general purpose container that uses dynamic rendering",
|
||||
"example": {},
|
||||
"supports": {
|
||||
"anchor": true,
|
||||
"align": [ "left", "right", "wide", "full" ],
|
||||
"background": {
|
||||
"backgroundImage": true,
|
||||
"backgroundSize": true,
|
||||
"__experimentalDefaultControls": {
|
||||
"backgroundImage": true
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"gradients": true,
|
||||
"background": true,
|
||||
"link": true,
|
||||
"__experimentalDefaultControls": {
|
||||
"background": true,
|
||||
"text": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"attributes": {
|
||||
"maxWidthExtraLarge": {
|
||||
"type": "string"
|
||||
},
|
||||
"maxWidthLarge": {
|
||||
"type": "string"
|
||||
},
|
||||
"maxWidthMedium": {
|
||||
"type": "string"
|
||||
},
|
||||
"maxWidthSmall": {
|
||||
"type": "string"
|
||||
},
|
||||
"minHeightExtraLarge": {
|
||||
"type": "string"
|
||||
},
|
||||
"minHeightLarge": {
|
||||
"type": "string"
|
||||
},
|
||||
"minHeightMedium": {
|
||||
"type": "string"
|
||||
},
|
||||
"minHeightSmall": {
|
||||
"type": "string"
|
||||
},
|
||||
"isBox": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"backgroundColor": {
|
||||
"type": "string"
|
||||
},
|
||||
"entranceAnimation": {
|
||||
"type": "string"
|
||||
},
|
||||
"exitAnimation": {
|
||||
"type": "string"
|
||||
},
|
||||
|
||||
"overflow": {
|
||||
"type": "string"
|
||||
},
|
||||
"padding": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
"extraLarge": {
|
||||
"top": "0",
|
||||
"right": "0",
|
||||
"bottom": "0",
|
||||
"left": "0"
|
||||
},
|
||||
"large": {
|
||||
"top": "0",
|
||||
"right": "0",
|
||||
"bottom": "0",
|
||||
"left": "0"
|
||||
},
|
||||
"medium": {
|
||||
"top": "0",
|
||||
"right": "0",
|
||||
"bottom": "0",
|
||||
"left": "0"
|
||||
},
|
||||
"small": {
|
||||
"top": "0",
|
||||
"right": "0",
|
||||
"bottom": "0",
|
||||
"left": "0"
|
||||
}
|
||||
}
|
||||
},
|
||||
"margin": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
"extraLarge": {
|
||||
"top": "12px",
|
||||
"right": "0",
|
||||
"bottom": "12px",
|
||||
"left": "0"
|
||||
},
|
||||
"large": {
|
||||
"top": "12px",
|
||||
"right": "0",
|
||||
"bottom": "12px",
|
||||
"left": "0"
|
||||
},
|
||||
"medium": {
|
||||
"top": "12px",
|
||||
"right": "0",
|
||||
"bottom": "12px",
|
||||
"left": "0"
|
||||
},
|
||||
"small": {
|
||||
"top": "12px",
|
||||
"right": "0",
|
||||
"bottom": "12px",
|
||||
"left": "0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"textdomain": "lcp",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"viewScript": "file:./view.js"}
|
||||
211
includes/blocks/lcp-dynamic-container/src/edit.js
Normal file
211
includes/blocks/lcp-dynamic-container/src/edit.js
Normal file
@ -0,0 +1,211 @@
|
||||
import { useBlockProps, InnerBlocks, InspectorControls } from '@wordpress/block-editor';
|
||||
import { __experimentalToggleGroupControl as ToggleGroupControl,
|
||||
__experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalUnitControl as UnitControl, BaseControl, ToggleControl, ColorPalette, Popover, Button } from '@wordpress/components';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
* @param {Object} props - The props for the block.
|
||||
* @return {Element} Element to render.
|
||||
*/
|
||||
export default function Edit({ attributes, setAttributes }) {
|
||||
const blockProps = useBlockProps();
|
||||
const { padding, maxWidthLarge, maxWidthMedium, maxWidthSmall, minHeightLarge, minHeightMedium, minHeightSmall, backgroundColor } = attributes; // Destructure necessary attributes
|
||||
|
||||
// State for independent padding toggle
|
||||
const [isIndependentLarge, setIsIndependentLarge] = useState(false);
|
||||
|
||||
// Toggle to show or hide the color picker popover
|
||||
const [showColorPopover, setShowColorPopover] = useState(false);
|
||||
const [selectedColor, setSelectedColor] = useState(backgroundColor || '#ffffff'); // Default color
|
||||
|
||||
// Toggle padding for individual sizes
|
||||
const handleToggleChange = () => {
|
||||
setIsIndependentLarge(!isIndependentLarge);
|
||||
};
|
||||
|
||||
// Update padding for all sizes
|
||||
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 }
|
||||
};
|
||||
setAttributes({ padding: newPadding });
|
||||
};
|
||||
|
||||
// Handle individual padding changes
|
||||
const handlePaddingChange = (size, position, newValue) => {
|
||||
const updatedPadding = { ...padding };
|
||||
updatedPadding[size][position] = newValue;
|
||||
setAttributes({ padding: updatedPadding });
|
||||
};
|
||||
|
||||
// Handle color change
|
||||
const handleColorChange = (color) => {
|
||||
setSelectedColor(color);
|
||||
setAttributes({ backgroundColor: color }); // Update background color
|
||||
};
|
||||
|
||||
// Handle maxWidth change for different sizes
|
||||
const handleMaxWidthChange = (value, size) => {
|
||||
setAttributes({ [`maxWidth${size}`]: value });
|
||||
};
|
||||
|
||||
// Handle minHeight change for different sizes
|
||||
const handleMinHeightChange = (value, size) => {
|
||||
setAttributes({ [`minHeight${size}`]: value });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log("Updated attributes:", attributes);
|
||||
}, [attributes]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<InspectorControls>
|
||||
<ToggleGroupControl
|
||||
label="my label"
|
||||
value="vertical"
|
||||
isBlock
|
||||
__nextHasNoMarginBottom
|
||||
__next40pxDefaultSize
|
||||
>
|
||||
<ToggleGroupControlOption value="horizontal" label="Horizontal" />
|
||||
<ToggleGroupControlOption value="vertical" label="Vertical" />
|
||||
</ToggleGroupControl>
|
||||
{/* BaseControl for padding */}
|
||||
<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={padding.extraLarge?.top || '10px'}
|
||||
onChange={(newValue) => handlePaddingChange('extraLarge', 'top', newValue)}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Left</legend>
|
||||
<UnitControl
|
||||
value={padding.extraLarge?.left || '10px'}
|
||||
onChange={(newValue) => handlePaddingChange('extraLarge', 'left', newValue)}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Right</legend>
|
||||
<UnitControl
|
||||
value={padding.extraLarge?.right || '10px'}
|
||||
onChange={(newValue) => handlePaddingChange('extraLarge', 'right', newValue)}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset style={{ gridColumn: 'span 2', width: '116px' }}>
|
||||
<legend>Bottom</legend>
|
||||
<UnitControl
|
||||
value={padding.extraLarge?.bottom || '10px'}
|
||||
onChange={(newValue) => handlePaddingChange('extraLarge', 'bottom', newValue)}
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
) : (
|
||||
<UnitControl
|
||||
label="Padding Value"
|
||||
value={999} // You can replace this with an attribute value
|
||||
onChange={updatePaddingForAllSizes}
|
||||
/>
|
||||
)}
|
||||
</BaseControl>
|
||||
|
||||
{/* Max Width Controls */}
|
||||
<BaseControl label="Max Width">
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<UnitControl
|
||||
label="Large"
|
||||
value={maxWidthLarge}
|
||||
onChange={(value) => handleMaxWidthChange(value, 'Large')}
|
||||
defaultUnit="px"
|
||||
/>
|
||||
<UnitControl
|
||||
label="Medium"
|
||||
value={maxWidthMedium}
|
||||
onChange={(value) => handleMaxWidthChange(value, 'Medium')}
|
||||
defaultUnit="px"
|
||||
/>
|
||||
<UnitControl
|
||||
label="Small"
|
||||
value={maxWidthSmall}
|
||||
onChange={(value) => handleMaxWidthChange(value, 'Small')}
|
||||
defaultUnit="px"
|
||||
/>
|
||||
</div>
|
||||
</BaseControl>
|
||||
|
||||
{/* Min Height Controls */}
|
||||
<BaseControl label="Min Height">
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<UnitControl
|
||||
label="Large"
|
||||
value={minHeightLarge}
|
||||
onChange={(value) => handleMinHeightChange(value, 'Large')}
|
||||
defaultUnit="px"
|
||||
/>
|
||||
<UnitControl
|
||||
label="Medium"
|
||||
value={minHeightMedium}
|
||||
onChange={(value) => handleMinHeightChange(value, 'Medium')}
|
||||
defaultUnit="px"
|
||||
/>
|
||||
<UnitControl
|
||||
label="Small"
|
||||
value={minHeightSmall}
|
||||
onChange={(value) => handleMinHeightChange(value, 'Small')}
|
||||
defaultUnit="px"
|
||||
/>
|
||||
</div>
|
||||
</BaseControl>
|
||||
|
||||
{/* Background color picker */}
|
||||
<BaseControl label={__('Background Color')}>
|
||||
<div>
|
||||
<Button onClick={() => setShowColorPopover(!showColorPopover)}>
|
||||
{__('Choose Background Color')}
|
||||
</Button>
|
||||
|
||||
{showColorPopover && (
|
||||
<Popover position="bottom center">
|
||||
<ColorPalette
|
||||
value={selectedColor}
|
||||
onChange={handleColorChange}
|
||||
colors={[{ name: "Primary", slug: "primary", color: "#3E5062" }, { name: "Secondary", slug: "secondary", color: "#2B3843" }, { name: "Light Color - 1", slug: "light-color-1", color: "#ECF0F5" }, { name: "Dark Gray", slug: "dark-gray", color: "#333333" }, { name: "Accent", slug: "accent", color: "#61FFB6" }]}
|
||||
disableCustomColors={false}
|
||||
/>
|
||||
</Popover>
|
||||
)}
|
||||
|
||||
{/* Color indicator */}
|
||||
<div style={{ backgroundColor: selectedColor, width: '30px', height: '30px', marginTop: '10px', borderRadius: '50%' }}></div>
|
||||
</div>
|
||||
</BaseControl>
|
||||
</InspectorControls>
|
||||
|
||||
<div {...blockProps} style={{ maxWidth: maxWidthLarge, minHeight: minHeightLarge }}>
|
||||
<InnerBlocks />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
9
includes/blocks/lcp-dynamic-container/src/editor.scss
Normal file
9
includes/blocks/lcp-dynamic-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-dynamic-container/src/index.js
Normal file
39
includes/blocks/lcp-dynamic-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,
|
||||
} );
|
||||
12
includes/blocks/lcp-dynamic-container/src/save.js
Normal file
12
includes/blocks/lcp-dynamic-container/src/save.js
Normal file
@ -0,0 +1,12 @@
|
||||
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
|
||||
|
||||
export default function Save() {
|
||||
// Block props
|
||||
const blockProps = useBlockProps.save();
|
||||
|
||||
return (
|
||||
<div {...blockProps}>
|
||||
<InnerBlocks.Content />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
12
includes/blocks/lcp-dynamic-container/src/style.scss
Normal file
12
includes/blocks/lcp-dynamic-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-dynamic-container/src/view.js
Normal file
25
includes/blocks/lcp-dynamic-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 */
|
||||
18
includes/blocks/lcp-header-container/.editorconfig
Normal file
18
includes/blocks/lcp-header-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-header-container/.gitignore
vendored
Normal file
30
includes/blocks/lcp-header-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
|
||||
33
includes/blocks/lcp-header-container/header-container.php
Normal file
33
includes/blocks/lcp-header-container/header-container.php
Normal file
@ -0,0 +1,33 @@
|
||||
<?php
|
||||
/**
|
||||
* Plugin Name: Lcp Viewport
|
||||
* Description: Example block scaffolded with Create Block tool.
|
||||
* Requires at least: 6.6
|
||||
* Requires PHP: 7.2
|
||||
* Version: 0.1.0
|
||||
* Author: The WordPress Contributors
|
||||
* License: GPL-2.0-or-later
|
||||
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
* Text Domain: lcp-viewport
|
||||
*
|
||||
* @package CreateBlock
|
||||
*/
|
||||
|
||||
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 header_container_block_init() {
|
||||
register_block_type( __DIR__ . '/build' , array(
|
||||
'parent' => array( 'lcp/viewport', 'lcp/main-area' ), // Only allow this block to be inserted inside the 'lcp/viewport' block
|
||||
)
|
||||
);
|
||||
}
|
||||
add_action( 'init', 'header_container_block_init' );
|
||||
20
includes/blocks/lcp-header-container/package.json
Normal file
20
includes/blocks/lcp-header-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-header-container/readme.txt
Normal file
55
includes/blocks/lcp-header-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.
|
||||
29
includes/blocks/lcp-header-container/src/block.json
Normal file
29
includes/blocks/lcp-header-container/src/block.json
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "lcp/header-container",
|
||||
"version": "0.1.0",
|
||||
"title": "Header Container",
|
||||
"category": "widgets",
|
||||
"icon": "smiley",
|
||||
"description": "Viewport container which is designed to be the parent of all other blocks",
|
||||
"example": {},
|
||||
"supports": {
|
||||
"color": {
|
||||
"background": true,
|
||||
"text": false,
|
||||
"link": false
|
||||
}
|
||||
},
|
||||
"attributes": {
|
||||
"sticky": {
|
||||
"type": "string",
|
||||
"default": "never"
|
||||
}
|
||||
},
|
||||
"textdomain": "lcp-viewport",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"viewScript": "file:./view.js"
|
||||
}
|
||||
155
includes/blocks/lcp-header-container/src/edit.js
Normal file
155
includes/blocks/lcp-header-container/src/edit.js
Normal file
@ -0,0 +1,155 @@
|
||||
/**
|
||||
* 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>
|
||||
|
||||
<p>
|
||||
{__('Lcp Main – hello from the editor!', 'lcp')}
|
||||
</p>
|
||||
|
||||
<InnerBlocks
|
||||
// Optional: You can provide a template or allowed blocks
|
||||
// template={[['core/paragraph'], ['core/image']]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
9
includes/blocks/lcp-header-container/src/editor.scss
Normal file
9
includes/blocks/lcp-header-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-header-container/src/index.js
Normal file
39
includes/blocks/lcp-header-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,
|
||||
} );
|
||||
40
includes/blocks/lcp-header-container/src/save.js
Normal file
40
includes/blocks/lcp-header-container/src/save.js
Normal file
@ -0,0 +1,40 @@
|
||||
/**
|
||||
* 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();
|
||||
|
||||
// Define a class based on the 'sticky' attribute
|
||||
let stickyClass = '';
|
||||
if (sticky === 'onScroll') {
|
||||
stickyClass = 'lcp-sticky-on-scroll';
|
||||
} else if (sticky === 'always') {
|
||||
stickyClass = 'lcp-sticky';
|
||||
}
|
||||
// Add the dynamic sticky class to the blockProps className
|
||||
const className = `${blockProps.className} ${stickyClass}`;
|
||||
|
||||
return (
|
||||
<div {...blockProps} className={className} id="lcp-header-container">
|
||||
<InnerBlocks.Content />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
12
includes/blocks/lcp-header-container/src/style.scss
Normal file
12
includes/blocks/lcp-header-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-header-container/src/view.js
Normal file
25
includes/blocks/lcp-header-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 */
|
||||
18
includes/blocks/lcp-key-points/.editorconfig
Normal file
18
includes/blocks/lcp-key-points/.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-key-points/.gitignore
vendored
Normal file
30
includes/blocks/lcp-key-points/.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
|
||||
97
includes/blocks/lcp-key-points/key-points.php
Normal file
97
includes/blocks/lcp-key-points/key-points.php
Normal file
@ -0,0 +1,97 @@
|
||||
<?php
|
||||
/**
|
||||
* Plugin Name: Key Points
|
||||
* Description: Example block scaffolded with Create Block tool.
|
||||
* Requires at least: 6.6
|
||||
* Requires PHP: 7.2
|
||||
* Version: 0.1.0
|
||||
* Author: The WordPress Contributors
|
||||
* License: GPL-2.0-or-later
|
||||
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
* Text Domain: key-points
|
||||
*
|
||||
* @package CreateBlock
|
||||
*/
|
||||
|
||||
// Exit if accessed directly
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
// Enqueue block assets for the editor
|
||||
function enqueue_key_points_block_assets() {
|
||||
wp_enqueue_script(
|
||||
'key-points-editor-script', // Handle for the block script
|
||||
plugin_dir_url(__FILE__) . 'block.js', // Path to the block JS file
|
||||
['wp-blocks', 'wp-element', 'wp-editor'], // Dependencies
|
||||
filemtime(plugin_dir_path(__FILE__) . 'block.js'), // Cache-busting
|
||||
true // Load script in the footer
|
||||
);
|
||||
}
|
||||
add_action('enqueue_block_editor_assets', 'enqueue_key_points_block_assets');
|
||||
|
||||
// Render callback function to display the key points
|
||||
// Render callback function to display the key points
|
||||
// Render callback function to display the key points
|
||||
function render_key_points_block($attributes, $content) {
|
||||
// Ensure we're in the correct post context
|
||||
if (!is_single()) {
|
||||
return null; // Only render on single post pages
|
||||
}
|
||||
|
||||
// Get the current post ID (Ensure the correct context)
|
||||
$post_id = get_the_ID();
|
||||
|
||||
// Log for debugging purposes
|
||||
error_log('Current Post ID: ' . $post_id);
|
||||
|
||||
// Get the key points stored as a serialized string in post meta
|
||||
$key_points_serialized = get_post_meta($post_id, 'key_points', true);
|
||||
|
||||
// Log the serialized data
|
||||
error_log('Key Points Serialized Data: ' . var_export($key_points_serialized, true)); // Log to debug
|
||||
|
||||
// Unserialize the data into an array
|
||||
$key_points = !empty($key_points_serialized) ? unserialize($key_points_serialized) : [];
|
||||
|
||||
// Log the unserialized data
|
||||
error_log('Key Points Unserialized Data: ' . var_export($key_points, true)); // Log to debug
|
||||
|
||||
// If no key points are available, return an error message
|
||||
if (empty($key_points)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Check if the headingTag attribute is set and wrap the heading accordingly
|
||||
$heading_tag = !empty($attributes['headingTag']) ? $attributes['headingTag'] : 'h2'; // Default to h2 if not provided
|
||||
$heading_font_size = !empty($attributes['headingFontSizeLarge']) ? $attributes['headingFontSizeLarge'] : '24px'; // Default size if not provided
|
||||
$points_font_size = !empty($attributes['pointsFontSizeLarge']) ? $attributes['pointsFontSizeLarge'] : '16px'; // Default size if not provided
|
||||
$list_style_type = !empty($attributes['listStyleType']) ? $attributes['listStyleType'] : 'disc'; // Default size if not provided
|
||||
|
||||
// Create the heading with font size applied
|
||||
$heading = "<{$heading_tag} style='font-size: " . esc_attr($heading_font_size) . ";'>" . esc_html($attributes['heading']) . "</{$heading_tag}>";
|
||||
|
||||
// Create the <ul> list and populate it with the key points
|
||||
$output = $heading; // Start with the heading
|
||||
$output .= '<ul id="lcp-key-points" style="list-style-type: ' . esc_attr($list_style_type) . ';">';
|
||||
foreach ($key_points as $point) {
|
||||
// Avoid empty points
|
||||
if (!empty($point)) {
|
||||
$output .= '<li style="font-size: ' . esc_attr($points_font_size) . ';">' . esc_html($point) . '</li>';
|
||||
}
|
||||
}
|
||||
$output .= '</ul>';
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Register the block
|
||||
function register_key_points_block() {
|
||||
register_block_type(__DIR__ . '/build', [
|
||||
'editor_script' => 'key-points-editor-script', // Script for the editor
|
||||
'render_callback' => 'render_key_points_block', // PHP callback for frontend rendering
|
||||
]);
|
||||
}
|
||||
add_action('init', 'register_key_points_block');
|
||||
20
includes/blocks/lcp-key-points/package.json
Normal file
20
includes/blocks/lcp-key-points/package.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "key-points",
|
||||
"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.6.0"
|
||||
}
|
||||
}
|
||||
55
includes/blocks/lcp-key-points/readme.txt
Normal file
55
includes/blocks/lcp-key-points/readme.txt
Normal file
@ -0,0 +1,55 @@
|
||||
=== Key Points ===
|
||||
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/key-points` 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.
|
||||
41
includes/blocks/lcp-key-points/src/block.json
Normal file
41
includes/blocks/lcp-key-points/src/block.json
Normal file
@ -0,0 +1,41 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "lcp/key-points",
|
||||
"version": "0.1.0",
|
||||
"title": "Key Points",
|
||||
"category": "widgets",
|
||||
"icon": "smiley",
|
||||
"description": "Key points meta field for single posts",
|
||||
"example": {},
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"attributes": {
|
||||
"heading": {
|
||||
"type": "string",
|
||||
"default": "Key Points"
|
||||
},
|
||||
"headingTag": {
|
||||
"type": "string",
|
||||
"default": "h3"
|
||||
},
|
||||
"headingFontSizeLarge": {
|
||||
"type": "string",
|
||||
"default": "24px"
|
||||
},
|
||||
"pointsFontSizeLarge": {
|
||||
"type": "string",
|
||||
"default": "16px"
|
||||
},
|
||||
"listStyleType": {
|
||||
"type": "string",
|
||||
"default": "disc"
|
||||
}
|
||||
},
|
||||
"textdomain": "key-points",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"viewScript": "file:./view.js"
|
||||
}
|
||||
118
includes/blocks/lcp-key-points/src/edit.js
Normal file
118
includes/blocks/lcp-key-points/src/edit.js
Normal file
@ -0,0 +1,118 @@
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
|
||||
import { SelectControl, FontSizePicker, TextControl } from '@wordpress/components';
|
||||
import { useState, useEffect } from 'react';
|
||||
import './editor.scss';
|
||||
|
||||
export default function Edit( { attributes, setAttributes } ) {
|
||||
const { heading, pointsFontSizeLarge, headingFontSizeLarge, listStyleType } = attributes;
|
||||
|
||||
const fontSizes = [
|
||||
{
|
||||
name: __( 'Small', 'key-points' ),
|
||||
slug: 'small',
|
||||
size: '12px',
|
||||
},
|
||||
{
|
||||
name: __( 'Medium', 'key-points' ),
|
||||
slug: 'medium',
|
||||
size: '16px',
|
||||
},
|
||||
{
|
||||
name: __( 'Large', 'key-points' ),
|
||||
slug: 'large',
|
||||
size: '24px',
|
||||
},
|
||||
{
|
||||
name: __( 'Extra Large', 'key-points' ),
|
||||
slug: 'x-large',
|
||||
size: '36px',
|
||||
},
|
||||
];
|
||||
|
||||
const listStyleTypeOptions = [
|
||||
{ label: __( 'Disc', 'lcp' ), value: 'disc' },
|
||||
{ label: __( 'Circle', 'lcp' ), value: 'circle' },
|
||||
{ label: __( 'Square', 'lcp' ), value: 'square' },
|
||||
{ label: __( 'None', 'lcp' ), value: 'none' },
|
||||
];
|
||||
|
||||
// Static Lorem Ipsum key points (5 unique points)
|
||||
const loremIpsumPoints = [
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
|
||||
"Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
||||
"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
|
||||
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
|
||||
"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
|
||||
];
|
||||
|
||||
const [keyPoints, setKeyPoints] = useState(loremIpsumPoints); // Set initial key points to the Lorem Ipsum array
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Inspector Controls */}
|
||||
<InspectorControls>
|
||||
{/* List Style Dropdown */}
|
||||
<SelectControl
|
||||
label={ __( 'List Style', 'lcp' ) }
|
||||
value={ listStyleType }
|
||||
options={ listStyleTypeOptions }
|
||||
onChange={ ( newValue ) => {
|
||||
setAttributes( { listStyleType: newValue } );
|
||||
} }
|
||||
/>
|
||||
|
||||
{/* Heading Input */}
|
||||
<TextControl
|
||||
label={ __( 'Heading', 'lcp' ) }
|
||||
value={ heading || '' }
|
||||
onChange={ ( newHeading ) => setAttributes( { heading: newHeading } ) }
|
||||
/>
|
||||
|
||||
{/* Font Size Picker for Points */}
|
||||
<FontSizePicker
|
||||
fontSizes={ fontSizes }
|
||||
units={ ['px', 'em', 'rem', 'vw', 'vh'] }
|
||||
value={ pointsFontSizeLarge }
|
||||
onChange={ ( newFontSize ) => {
|
||||
if ( typeof newFontSize === 'string' ) {
|
||||
setAttributes( { pointsFontSizeLarge: newFontSize } );
|
||||
}
|
||||
} }
|
||||
fallbackFontSize={ '16px' }
|
||||
/>
|
||||
|
||||
{/* Font Size Picker for Heading */}
|
||||
<FontSizePicker
|
||||
fontSizes={ fontSizes }
|
||||
units={ ['px', 'em', 'rem', 'vw', 'vh'] }
|
||||
value={ headingFontSizeLarge }
|
||||
onChange={ ( newFontSize ) => {
|
||||
if ( typeof newFontSize === 'string' ) {
|
||||
setAttributes( { headingFontSizeLarge: newFontSize } );
|
||||
}
|
||||
} }
|
||||
fallbackFontSize={ '24px' }
|
||||
/>
|
||||
</InspectorControls>
|
||||
|
||||
{/* Block Content */}
|
||||
<p { ...useBlockProps() }>
|
||||
{ __( 'Key Points – hello from the editor!', 'lcp' ) }
|
||||
</p>
|
||||
{ heading && <h2>{ heading }</h2> }
|
||||
|
||||
{/* Display key points */}
|
||||
{ keyPoints && keyPoints.length > 0 && (
|
||||
<ul style={{ listStyleType: listStyleType }}>
|
||||
{keyPoints.map((point, index) => (
|
||||
<li key={index} style={{ fontSize: pointsFontSizeLarge }}>
|
||||
{point}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
9
includes/blocks/lcp-key-points/src/editor.scss
Normal file
9
includes/blocks/lcp-key-points/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-key-points {
|
||||
border: 1px dotted #f00;
|
||||
}
|
||||
39
includes/blocks/lcp-key-points/src/index.js
Normal file
39
includes/blocks/lcp-key-points/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,
|
||||
} );
|
||||
22
includes/blocks/lcp-key-points/src/save.js
Normal file
22
includes/blocks/lcp-key-points/src/save.js
Normal file
@ -0,0 +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 } 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() {
|
||||
return (
|
||||
null
|
||||
);
|
||||
}
|
||||
12
includes/blocks/lcp-key-points/src/style.scss
Normal file
12
includes/blocks/lcp-key-points/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-key-points {
|
||||
background-color: #21759b;
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
25
includes/blocks/lcp-key-points/src/view.js
Normal file
25
includes/blocks/lcp-key-points/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-key-points block)' );
|
||||
/* eslint-enable no-console */
|
||||
18
includes/blocks/lcp-main-area/.editorconfig
Normal file
18
includes/blocks/lcp-main-area/.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-main-area/.gitignore
vendored
Normal file
30
includes/blocks/lcp-main-area/.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
|
||||
30
includes/blocks/lcp-main-area/main-area.php
Normal file
30
includes/blocks/lcp-main-area/main-area.php
Normal file
@ -0,0 +1,30 @@
|
||||
<?php
|
||||
/**
|
||||
* Plugin Name: Lcp Viewport
|
||||
* Description: Example block scaffolded with Create Block tool.
|
||||
* Requires at least: 6.6
|
||||
* Requires PHP: 7.2
|
||||
* Version: 0.1.0
|
||||
* Author: The WordPress Contributors
|
||||
* License: GPL-2.0-or-later
|
||||
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
* Text Domain: lcp-viewport
|
||||
*
|
||||
* @package CreateBlock
|
||||
*/
|
||||
|
||||
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 main_content_init() {
|
||||
register_block_type( __DIR__ . '/build' );
|
||||
}
|
||||
add_action( 'init', 'main_content_init' );
|
||||
20
includes/blocks/lcp-main-area/package.json
Normal file
20
includes/blocks/lcp-main-area/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-main-area/readme.txt
Normal file
55
includes/blocks/lcp-main-area/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.
|
||||
26
includes/blocks/lcp-main-area/src/block.json
Normal file
26
includes/blocks/lcp-main-area/src/block.json
Normal file
@ -0,0 +1,26 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "lcp/main-area",
|
||||
"version": "0.1.0",
|
||||
"title": "Main Content",
|
||||
"category": "widgets",
|
||||
"icon": "smiley",
|
||||
"description": "Viewport container which is designed to be the parent of all other blocks",
|
||||
"example": {},
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"attributes": {
|
||||
"maxWidth": {
|
||||
"type": "string",
|
||||
"default": "100%"
|
||||
|
||||
}
|
||||
},
|
||||
"textdomain": "lcp-viewport",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"viewScript": "file:./view.js"
|
||||
}
|
||||
47
includes/blocks/lcp-main-area/src/edit.js
Normal file
47
includes/blocks/lcp-main-area/src/edit.js
Normal file
@ -0,0 +1,47 @@
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useBlockProps, InnerBlocks, useInnerBlocksProps, InspectorControls } from '@wordpress/block-editor';
|
||||
import { PanelBody, __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
|
||||
|
||||
// Function to handle the change of maxWidth
|
||||
const handleMaxWidthChange = (value) => {
|
||||
setAttributes({ maxWidth: value });
|
||||
};
|
||||
|
||||
const blockProps = useBlockProps(); // Standard block props for the child block
|
||||
const innerBlocksProps = useInnerBlocksProps(blockProps); // Using blockProps for inner block props
|
||||
|
||||
// Correctly define style as an object
|
||||
const style = {
|
||||
maxWidth: maxWidth,
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Inspector Controls for maxWidth */}
|
||||
<InspectorControls>
|
||||
<PanelBody title={__('Max Width Settings', 'lcp')} initialOpen={true}>
|
||||
<div className="max-width-settings">
|
||||
{/* UnitControl to adjust maxWidth value */}
|
||||
<UnitControl
|
||||
onChange={handleMaxWidthChange} // Function to handle change
|
||||
value={maxWidth} // Current value of maxWidth
|
||||
defaultUnit="px" // Optional: default unit for UnitControl
|
||||
/>
|
||||
</div>
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
|
||||
{/* Main block content */}
|
||||
<div {...innerBlocksProps} style={style}>
|
||||
|
||||
|
||||
<InnerBlocks {...innerBlocksProps} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
9
includes/blocks/lcp-main-area/src/editor.scss
Normal file
9
includes/blocks/lcp-main-area/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-main-area/src/index.js
Normal file
39
includes/blocks/lcp-main-area/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,
|
||||
} );
|
||||
32
includes/blocks/lcp-main-area/src/save.js
Normal file
32
includes/blocks/lcp-main-area/src/save.js
Normal file
@ -0,0 +1,32 @@
|
||||
/**
|
||||
* 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)
|
||||
|
||||
const blockProps = useBlockProps.save();
|
||||
const style = {
|
||||
maxWidth: maxWidth,
|
||||
};
|
||||
return (
|
||||
<div {...blockProps} id="lcp-main-content" style={style}>
|
||||
|
||||
<InnerBlocks.Content />
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
12
includes/blocks/lcp-main-area/src/style.scss
Normal file
12
includes/blocks/lcp-main-area/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-main-area/src/view.js
Normal file
25
includes/blocks/lcp-main-area/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 */
|
||||
18
includes/blocks/lcp-sidecontent/.editorconfig
Normal file
18
includes/blocks/lcp-sidecontent/.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-sidecontent/.gitignore
vendored
Normal file
30
includes/blocks/lcp-sidecontent/.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
|
||||
30
includes/blocks/lcp-sidecontent/lcp-sidecontent.php
Normal file
30
includes/blocks/lcp-sidecontent/lcp-sidecontent.php
Normal file
@ -0,0 +1,30 @@
|
||||
<?php
|
||||
/**
|
||||
* Plugin Name: Lcp Sidecontent
|
||||
* Description: Example block scaffolded with Create Block tool.
|
||||
* Requires at least: 6.6
|
||||
* Requires PHP: 7.2
|
||||
* Version: 0.1.0
|
||||
* Author: The WordPress Contributors
|
||||
* License: GPL-2.0-or-later
|
||||
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
* Text Domain: lcp-sidecontent
|
||||
*
|
||||
* @package CreateBlock
|
||||
*/
|
||||
|
||||
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_sidecontent_block_init() {
|
||||
register_block_type( __DIR__ . '/build' );
|
||||
}
|
||||
add_action( 'init', 'lcp_sidecontent_block_init' );
|
||||
20
includes/blocks/lcp-sidecontent/package.json
Normal file
20
includes/blocks/lcp-sidecontent/package.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "lcp-sidecontent",
|
||||
"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-sidecontent/readme.txt
Normal file
55
includes/blocks/lcp-sidecontent/readme.txt
Normal file
@ -0,0 +1,55 @@
|
||||
=== Lcp Sidecontent ===
|
||||
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-sidecontent` 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.
|
||||
19
includes/blocks/lcp-sidecontent/src/block.json
Normal file
19
includes/blocks/lcp-sidecontent/src/block.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "lcp/sidecontent",
|
||||
"version": "0.1.0",
|
||||
"title": "Sidecontent",
|
||||
"category": "widgets",
|
||||
"icon": "smiley",
|
||||
"description": "A separate content area to be nested inside the LCP viewport",
|
||||
"example": {},
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"textdomain": "lcp",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"viewScript": "file:./view.js"
|
||||
}
|
||||
44
includes/blocks/lcp-sidecontent/src/edit.js
Normal file
44
includes/blocks/lcp-sidecontent/src/edit.js
Normal file
@ -0,0 +1,44 @@
|
||||
/**
|
||||
* 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} from '@wordpress/block-editor';
|
||||
|
||||
/**
|
||||
* 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() {
|
||||
return (<div>
|
||||
<p { ...useBlockProps() }>
|
||||
{ __( 'Lcp Sidecontent – hello from the editor!', 'lcp' ) }
|
||||
</p>
|
||||
<InnerBlocks
|
||||
// Optional: You can provide a template or allowed blocks
|
||||
// template={[['core/paragraph'], ['core/image']]}
|
||||
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
9
includes/blocks/lcp-sidecontent/src/editor.scss
Normal file
9
includes/blocks/lcp-sidecontent/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-sidecontent {
|
||||
border: 1px dotted #f00;
|
||||
}
|
||||
39
includes/blocks/lcp-sidecontent/src/index.js
Normal file
39
includes/blocks/lcp-sidecontent/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,
|
||||
} );
|
||||
28
includes/blocks/lcp-sidecontent/src/save.js
Normal file
28
includes/blocks/lcp-sidecontent/src/save.js
Normal file
@ -0,0 +1,28 @@
|
||||
/**
|
||||
* 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() {
|
||||
const blockProps = useBlockProps.save();
|
||||
|
||||
return (
|
||||
<div {...blockProps} id="lcp-sidecontent">
|
||||
|
||||
<InnerBlocks.Content />
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
12
includes/blocks/lcp-sidecontent/src/style.scss
Normal file
12
includes/blocks/lcp-sidecontent/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-sidecontent {
|
||||
background-color: #21759b;
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
25
includes/blocks/lcp-sidecontent/src/view.js
Normal file
25
includes/blocks/lcp-sidecontent/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-sidecontent block)' );
|
||||
/* eslint-enable no-console */
|
||||
18
includes/blocks/lcp-viewport/.editorconfig
Normal file
18
includes/blocks/lcp-viewport/.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-viewport/.gitignore
vendored
Normal file
30
includes/blocks/lcp-viewport/.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
|
||||
30
includes/blocks/lcp-viewport/lcp-viewport.php
Normal file
30
includes/blocks/lcp-viewport/lcp-viewport.php
Normal file
@ -0,0 +1,30 @@
|
||||
<?php
|
||||
/**
|
||||
* Plugin Name: Lcp Viewport
|
||||
* Description: Example block scaffolded with Create Block tool.
|
||||
* Requires at least: 6.6
|
||||
* Requires PHP: 7.2
|
||||
* Version: 0.1.0
|
||||
* Author: The WordPress Contributors
|
||||
* License: GPL-2.0-or-later
|
||||
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
* Text Domain: lcp-viewport
|
||||
*
|
||||
* @package CreateBlock
|
||||
*/
|
||||
|
||||
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 create_block_lcp_viewport_block_init() {
|
||||
register_block_type( __DIR__ . '/build' );
|
||||
}
|
||||
add_action( 'init', 'create_block_lcp_viewport_block_init' );
|
||||
20
includes/blocks/lcp-viewport/package.json
Normal file
20
includes/blocks/lcp-viewport/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-viewport/readme.txt
Normal file
55
includes/blocks/lcp-viewport/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.
|
||||
29
includes/blocks/lcp-viewport/src/block.json
Normal file
29
includes/blocks/lcp-viewport/src/block.json
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "lcp/viewport",
|
||||
"version": "0.1.0",
|
||||
"title": "Viewport",
|
||||
"category": "widgets",
|
||||
"icon": "smiley",
|
||||
"description": "Viewport container which is designed to be the parent of all other blocks",
|
||||
"example": {},
|
||||
"supports": {
|
||||
"color": {
|
||||
"background": true,
|
||||
"text": false,
|
||||
"link": false
|
||||
}
|
||||
},
|
||||
"attributes" :{
|
||||
"hasSidecontent":{
|
||||
"type":"boolean",
|
||||
"default":true
|
||||
}
|
||||
},
|
||||
"textdomain": "lcp-viewport",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"viewScript": "file:./view.js"
|
||||
}
|
||||
45
includes/blocks/lcp-viewport/src/edit.js
Normal file
45
includes/blocks/lcp-viewport/src/edit.js
Normal file
@ -0,0 +1,45 @@
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useBlockProps, InnerBlocks, InspectorControls } from '@wordpress/block-editor';
|
||||
import { ToggleControl } from '@wordpress/components';
|
||||
import './editor.scss';
|
||||
|
||||
export default function Edit({ attributes, setAttributes }) {
|
||||
const { hasSidecontent } = attributes;
|
||||
|
||||
// Block props
|
||||
const blockProps = useBlockProps();
|
||||
|
||||
// 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)
|
||||
|
||||
// Render appender logic to handle block insertion
|
||||
const renderAppender = () => {
|
||||
return <InnerBlocks.ButtonBlockAppender />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div {...blockProps}>
|
||||
{/* Inspector Controls: Add a toggle for the `hasSidecontent` attribute */}
|
||||
<InspectorControls>
|
||||
<ToggleControl
|
||||
label={__('Include Side Content', 'lcp-viewport')}
|
||||
checked={hasSidecontent}
|
||||
onChange={(value) => setAttributes({ hasSidecontent: value })}
|
||||
/>
|
||||
</InspectorControls>
|
||||
|
||||
<p>
|
||||
{__('Lcp Viewport – hello from the editor!', 'lcp-viewport')}
|
||||
</p>
|
||||
|
||||
{/* Render the InnerBlocks with conditional template */}
|
||||
<InnerBlocks
|
||||
template={template} // Use the template logic here
|
||||
renderAppender={renderAppender} // Custom appender logic
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
9
includes/blocks/lcp-viewport/src/editor.scss
Normal file
9
includes/blocks/lcp-viewport/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-viewport/src/index.js
Normal file
39
includes/blocks/lcp-viewport/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,
|
||||
} );
|
||||
26
includes/blocks/lcp-viewport/src/save.js
Normal file
26
includes/blocks/lcp-viewport/src/save.js
Normal file
@ -0,0 +1,26 @@
|
||||
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 { hasSidecontent } = attributes; // Retrieve the hasSidecontent attribute
|
||||
const blockProps = useBlockProps.save();
|
||||
|
||||
// Conditionally add the .lcp-has-sidecontent class if hasSidecontent is true
|
||||
const hasSidecontentClass = hasSidecontent ? 'class="lcp-has-sidecontent"' : null;
|
||||
|
||||
return (
|
||||
<div {...blockProps} id="lcp-viewport-outer" >
|
||||
<div hasSidecontentClass id="lcp-viewport-inner">
|
||||
<InnerBlocks.Content />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
7
includes/blocks/lcp-viewport/src/style.scss
Normal file
7
includes/blocks/lcp-viewport/src/style.scss
Normal file
@ -0,0 +1,7 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
25
includes/blocks/lcp-viewport/src/view.js
Normal file
25
includes/blocks/lcp-viewport/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 */
|
||||
30
includes/classes/blocks.php
Normal file
30
includes/classes/blocks.php
Normal file
@ -0,0 +1,30 @@
|
||||
<?php
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
class Lcp_Blocks {
|
||||
|
||||
private $template_directory;
|
||||
|
||||
public function __construct() {
|
||||
// Set the template directory path
|
||||
$this->template_directory = get_template_directory();
|
||||
|
||||
// Include files
|
||||
include $this->template_directory. '/includes/blocks/lcp-gallery/lcp-gallery.php';
|
||||
include $this->template_directory. '/includes/blocks/lcp-viewport/lcp-viewport.php';
|
||||
include $this->template_directory. '/includes/blocks/lcp-sidecontent/lcp-sidecontent.php';
|
||||
include $this->template_directory. '/includes/blocks/lcp-main-area/main-area.php';
|
||||
include $this->template_directory. '/includes/blocks/lcp-header-container/header-container.php';
|
||||
include $this->template_directory. '/includes/blocks/lcp-container/lcp-dynamic-container.php';
|
||||
include $this->template_directory. '/includes/blocks/lcp-key-points/key-points.php';
|
||||
include $this->template_directory. '/includes/blocks/lcp-button/lcp-button.php';
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user