Breaking News: Grepper is joining You.com. Read the official announcement!

create wordpress block

chifarol answered on August 12, 2022 Popularity 9/10 Helpfulness 2/10

answer create wordpress block

create wordpress block

Comment

# in plugin directory run => npx @wordpress/create-block <block-name-goes-here>

# in block.json add these lines
"attributes": {
    "heading": {
        "type": "string",
        "source": "html",
        "selector": "p"
    },
    "expRight": {
        "type": "boolean",
        "default": true
    },
	"hd_bg_color":{
		"type":"string",
		"default":"#313131"	
	},
	"hd_color":{
		"type":"string",
		"default":"#fff"	
	},
	"ct_bg_color":{
		"type":"string",
		"default":"#444444"	
	},
	"ct_color":{
		"type":"string",
		"default":"#fff"	
	},
	"isOpen":{
		"type": "boolean",
        "default": false
	}
},

# in index.js
	import { registerBlockType } from "@wordpress/blocks";
	import "./style.scss";import Edit from "./edit";
	import save from "./save";
	import metadata from "./block.json";
	registerBlockType(metadata.name, {
		edit: Edit,
    	save,
	});

# in edit.js
import { __ } from "@wordpress/i18n";
import { TextControl } from "@wordpress/components";
import "./editor.scss";
import {
	useBlockProps,
	RichText,
	ColorPalette,
	InspectorControls,
	InnerBlocks,
} from "@wordpress/block-editor";
import { ToggleControl } from "@wordpress/components";
import "./editor.scss";

export default function Edit({ attributes, setAttributes }) {
	const onChangeHdBGColor = (hexColor) => {
		setAttributes({ hd_bg_color: hexColor });
	};
	const onChangeCtBGColor = (hexColor) => {
		setAttributes({ ct_bg_color: hexColor });
	};

	const onChangeHdTextColor = (hexColor) => {
		setAttributes({ hd_color: hexColor });
	};
	const onChangeCtTextColor = (hexColor) => {
		setAttributes({ ct_color: hexColor });
	};
	return (
		<div {...useBlockProps()}>
			<div
				style={{
					backgroundColor: attributes.ct_bg_color,
					color: attributes.ct_color,
				}}
			>
				<div
					className="wp-block-create-block-wp-tut-heading-container"
					style={{
						backgroundColor: attributes.hd_bg_color,
						color: attributes.hd_color,
					}}
				>
					{!attributes.expRight && (
						<span
							className="wp-block-create-block-wp-tut-expander-right left"
							onClick={(e) => {
								setAttributes({ isOpen: !attributes.isOpen });
							}}
						>
							&#9650;
						</span>
					)}
					<RichText
						className="wp-block-create-block-wp-tut-heading"
						tagName="p"
						onChange={(newContent) => {
							setAttributes({ heading: newContent });
							console.log(attributes.heading);
						}}
						value={attributes.heading}
					/>
					{attributes.expRight && (
						<span
							className="wp-block-create-block-wp-tut-expander-right right"
							onClick={(e) => {
								setAttributes({ isOpen: !attributes.isOpen });
							}}
						>
							&#9650;
						</span>
					)}
				</div>
				{attributes.isOpen && (
					<InnerBlocks id="wp-block-create-block-wp-tut-content" />
				)}
			</div>
			<InspectorControls key="setting">
				<div id="gutenpride-controls">
					<fieldset>
						<legend className="blocks-base-control__label">
							Heading Background Color:
						</legend>
						<ColorPalette onChange={onChangeHdBGColor} />
					</fieldset>
					<fieldset>
						<legend className="blocks-base-control__label">
							Heading Text Color:
						</legend>
						<ColorPalette onChange={onChangeHdTextColor} />
					</fieldset>
					<fieldset>
						<legend className="blocks-base-control__label">
							Content Background Color:
						</legend>
						<ColorPalette onChange={onChangeCtBGColor} />
					</fieldset>
					<fieldset>
						<legend className="blocks-base-control__label">
							Content Text Color:
						</legend>
						<ColorPalette onChange={onChangeCtTextColor} />
					</fieldset>
				</div>
				<button
					onClick={() => setAttributes({ expRight: !attributes.expRight })}
				>
					Toggle expander position
				</button>
			</InspectorControls>
		</div>
	);
}

#in save.js
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";

export default function save({ attributes }) {
	const blockProps = useBlockProps.save();
	return (
		<div {...blockProps}>
			<div
				style={{
					backgroundColor: attributes.ct_bg_color,
					color: attributes.ct_color,
				}}
			>
				<div className="wp-block-create-block-wp-tut-heading-container">
					{!attributes.expRight && (
						<span className="wp-block-create-block-wp-tut-expander-right left">
							&#9650;
						</span>
					)}
					<RichText.Content
						tagName="p"
						className="wp-block-create-block-wp-tut-heading"
						value={attributes.heading}
					/>
					{attributes.expRight && (
						<span className="wp-block-create-block-wp-tut-expander-right right">
							&#9650;
						</span>
					)}
				</div>
				{attributes.isOpen && <InnerBlocks.Content />}
			</div>
		</div>
	);
}

Popularity 9/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: block whatever wordpress

Link to this answer
Share Copy Link

Contributed on Aug 12 2022

chifarol

0 Answers Avg Quality 2/10

create wordpress block

Contents

More Related Answers

create wordpress block

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.