initial commit

gradient-link-card/.editorconfig

@@ -0,0 +1,18 @@
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+
+# WordPress Coding Standards
+# https://make.wordpress.org/core/handbook/coding-standards/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = tab
+
+[*.{yml,yaml}]
+indent_style = space
+indent_size = 2

gradient-link-card/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Output of `npm pack`
+*.tgz
+
+# Output of `wp-scripts plugin-zip`
+*.zip
+
+# dotenv environment variables file
+.env

gradient-link-card/build/block.json

@@ -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"
+}

gradient-link-card/build/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'd1293e1606fa95f272fb');

gradient-link-card/build/index.css

@@ -0,0 +1 @@
+.wp-block-create-block-gradient-link-card{border:1px dotted #333}

gradient-link-card/build/index.js

@@ -0,0 +1 @@
+(()=>{"use strict";var e,t={259:()=>{const e=window.wp.blocks,t=window.wp.element,r=(window.wp.i18n,window.wp.components),n=window.wp.blockEditor,o=JSON.parse('{"u2":"create-block/gradient-link-card"}');(0,e.registerBlockType)(o.u2,{edit:function({attributes:e,setAttributes:o}){return(0,t.createElement)("div",{...(0,n.useBlockProps)()},(0,t.createElement)("div",{className:"editor-inner"},(0,t.createElement)(r.TextControl,{label:"Title",value:e.title,onChange:e=>o({title:e})}),(0,t.createElement)(r.TextControl,{label:"href",value:e.href,onChange:e=>o({href:e})}),(0,t.createElement)(r.TextControl,{label:"body",value:e.body,onChange:e=>o({body:e})})))},save:function({attributes:e}){return(0,t.createElement)("div",{...n.useBlockProps.save()},(0,t.createElement)("a",{href:e.href},(0,t.createElement)("h2",null,e.title),e.body&&(0,t.createElement)("p",null,e.body)))}})}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var l=r[e]={exports:{}};return t[e](l,l.exports,n),l.exports}n.m=t,e=[],n.O=(t,r,o,l)=>{if(!r){var a=1/0;for(d=0;d<e.length;d++){r=e[d][0],o=e[d][1],l=e[d][2];for(var i=!0,c=0;c<r.length;c++)(!1&l||a>=l)&&Object.keys(n.O).every((e=>n.O[e](r[c])))?r.splice(c--,1):(i=!1,l<a&&(a=l));if(i){e.splice(d--,1);var s=o();void 0!==s&&(t=s)}}return t}l=l||0;for(var d=e.length;d>0&&e[d-1][2]>l;d--)e[d]=e[d-1];e[d]=[r,o,l]},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={826:0,431:0};n.O.j=t=>0===e[t];var t=(t,r)=>{var o,l,a=r[0],i=r[1],c=r[2],s=0;if(a.some((t=>0!==e[t]))){for(o in i)n.o(i,o)&&(n.m[o]=i[o]);if(c)var d=c(n)}for(t&&t(r);s<a.length;s++)l=a[s],n.o(e,l)&&e[l]&&e[l][0](),e[l]=0;return n.O(d)},r=self.webpackChunkgradient_link_card=self.webpackChunkgradient_link_card||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})();var o=n.O(void 0,[431],(()=>n(259)));o=n.O(o)})();

gradient-link-card/build/style-index.css

@@ -0,0 +1 @@
+div.wp-block-create-block-gradient-link-card{background-position:100%!important;background-size:250%!important;border-radius:10px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);color:#fff;display:flex;flex:1 0 27ch;margin:0;padding:5px;transition:background-position .6s cubic-bezier(.22,1,.36,1)}.wp-block-create-block-gradient-link-card a,.wp-block-create-block-gradient-link-card>.editor-inner{background-color:#fff;border-radius:5px;color:#111;line-height:1.4;opacity:1;padding:1rem 1.3rem;text-decoration:none;transition:opacity .6s ease;width:100%}.wp-block-create-block-gradient-link-card h2{font-size:1.25rem;margin:0;transition:color .6s cubic-bezier(.22,1,.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:.8}

gradient-link-card/gradient-link-card.php

@@ -0,0 +1,26 @@
+<?php
+/**
+ * Plugin Name:       Gradient Link Card
+ * Description:       Example block scaffolded with Create Block tool.
+ * Requires at least: 6.1
+ * Requires PHP:      7.0
+ * 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:       gradient-link-card
+ *
+ * @package           create-block
+ */
+
+/**
+ * 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_gradient_link_card_block_init() {
+	register_block_type( __DIR__ . '/build' );
+}
+add_action( 'init', 'create_block_gradient_link_card_block_init' );

gradient-link-card/package.json

@@ -0,0 +1,20 @@
+{
+	"name": "gradient-link-card",
+	"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": "^26.9.0"
+	}
+}

gradient-link-card/readme.txt

@@ -0,0 +1,55 @@
+=== Gradient Link Card ===
+Contributors:      The WordPress Contributors
+Tags:              block
+Tested up to:      6.1
+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/gradient-link-card` 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.

gradient-link-card/src/block.json

@@ -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"
+}

gradient-link-card/src/edit.js

@@ -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>
+	);
+}

gradient-link-card/src/editor.scss

@@ -0,0 +1,9 @@
+/**
+ * The following styles get applied inside the editor only.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-create-block-gradient-link-card {
+	border: 1px dotted #333;
+}

gradient-link-card/src/index.js

@@ -0,0 +1,39 @@
+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * All files containing `style` keyword are bundled together. The code used
+ * gets applied both to the front of your site and to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+import './style.scss';
+
+/**
+ * Internal dependencies
+ */
+import Edit from './edit';
+import save from './save';
+import metadata from './block.json';
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+registerBlockType( metadata.name, {
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+
+	/**
+	 * @see ./save.js
+	 */
+	save,
+} );

gradient-link-card/src/save.js

@@ -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>
+	);
+}

gradient-link-card/src/style.scss

@@ -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;
+}