initial commit
This commit is contained in:
46
gradient-link-card/src/block.json
Normal file
46
gradient-link-card/src/block.json
Normal file
@@ -0,0 +1,46 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "create-block/gradient-link-card",
|
||||
"version": "0.1.0",
|
||||
"title": "Gradient Link Card",
|
||||
"category": "widgets",
|
||||
"icon": "button",
|
||||
"description": "A link displayed as a card with text and a cool gradient hover effect",
|
||||
"supports": {
|
||||
"html": false,
|
||||
"color": {
|
||||
"gradients": true
|
||||
}
|
||||
},
|
||||
"attributes": {
|
||||
"title": {
|
||||
"type": "string",
|
||||
"source": "text",
|
||||
"selector": "h2"
|
||||
},
|
||||
"href": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"selector": "a",
|
||||
"attribute": "href"
|
||||
},
|
||||
"body": {
|
||||
"type": "string",
|
||||
"source": "text",
|
||||
"selector": "p"
|
||||
},
|
||||
"style": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
"color": {
|
||||
"gradient": "linear-gradient(45deg, hsl(348deg 79% 81%) 0%, hsl(336deg 73% 81%) 21%, hsl(321deg 61% 80%) 30%, hsl(296deg 47% 79%) 39%, hsl(269deg 64% 82%) 46%, hsl(244deg 82% 85%) 54%, hsl(224deg 99% 83%) 61%, hsl(211deg 100% 78%) 69%, hsl(203deg 100% 73%) 79%, hsl(197deg 94% 67%) 100%)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"textdomain": "gradient-link-card",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css"
|
||||
}
|
||||
58
gradient-link-card/src/edit.js
Normal file
58
gradient-link-card/src/edit.js
Normal file
@@ -0,0 +1,58 @@
|
||||
/**
|
||||
* Retrieves the translation of text.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
|
||||
*/
|
||||
import { __ } from "@wordpress/i18n";
|
||||
|
||||
import { TextControl } from "@wordpress/components";
|
||||
|
||||
/**
|
||||
* 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";
|
||||
|
||||
/**
|
||||
* 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 {WPElement} Element to render.
|
||||
*/
|
||||
export default function Edit({ attributes, setAttributes }) {
|
||||
return (
|
||||
<div {...useBlockProps()}>
|
||||
<div className="editor-inner">
|
||||
<TextControl
|
||||
label="Title"
|
||||
value={attributes.title}
|
||||
onChange={(val) => setAttributes({ title: val })}
|
||||
/>
|
||||
<TextControl
|
||||
label="href"
|
||||
value={attributes.href}
|
||||
onChange={(val) => setAttributes({ href: val })}
|
||||
/>
|
||||
<TextControl
|
||||
label="body"
|
||||
value={attributes.body}
|
||||
onChange={(val) => setAttributes({ body: val })}
|
||||
/>
|
||||
{/* <h2>{attributes.title}</h2>
|
||||
{attributes.body && <p>{attributes.body}</p>} */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
9
gradient-link-card/src/editor.scss
Normal file
9
gradient-link-card/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-gradient-link-card {
|
||||
border: 1px dotted #333;
|
||||
}
|
||||
39
gradient-link-card/src/index.js
Normal file
39
gradient-link-card/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,
|
||||
} );
|
||||
30
gradient-link-card/src/save.js
Normal file
30
gradient-link-card/src/save.js
Normal file
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* 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,
|
||||
__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
|
||||
} 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 {WPElement} Element to render.
|
||||
*/
|
||||
export default function save({ attributes }) {
|
||||
return (
|
||||
<div {...useBlockProps.save()}>
|
||||
<a href={attributes.href}>
|
||||
<h2>{attributes.title}</h2>
|
||||
{attributes.body && <p>{attributes.body}</p>}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
39
gradient-link-card/src/style.scss
Normal file
39
gradient-link-card/src/style.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
div.wp-block-create-block-gradient-link-card {
|
||||
flex: 1 0 27ch;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
background-size: 250% !important;
|
||||
border-radius: 10px;
|
||||
background-position: 100% !important;
|
||||
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.wp-block-create-block-gradient-link-card a, .wp-block-create-block-gradient-link-card > .editor-inner {
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
line-height: 1.4;
|
||||
padding: 1rem 1.3rem;
|
||||
border-radius: 5px;
|
||||
color: #111;
|
||||
background-color: white;
|
||||
transition: opacity 0.6s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.wp-block-create-block-gradient-link-card h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
.wp-block-create-block-gradient-link-card h2::after {
|
||||
content: "→";
|
||||
}
|
||||
.wp-block-create-block-gradient-link-card:is(:hover, :focus-within) {
|
||||
background-position: 0 !important;
|
||||
}
|
||||
.wp-block-create-block-gradient-link-card:is(:hover, :focus-within) a, .wp-block-create-block-gradient-link-card:is(:hover, :focus-within) > .editor-inner{
|
||||
opacity: 0.8;
|
||||
}
|
||||
Reference in New Issue
Block a user