init commit
This commit is contained in:
18
src/blocks/featured-image-block/.editorconfig
Normal file
18
src/blocks/featured-image-block/.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
src/blocks/featured-image-block/.gitignore
vendored
Normal file
30
src/blocks/featured-image-block/.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
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 2,
|
||||
"name": "create-block/featured-image-block",
|
||||
"version": "0.1.0",
|
||||
"title": "Featured Image Block",
|
||||
"category": "widgets",
|
||||
"icon": "format-image",
|
||||
"description": "Example block scaffolded with Create Block tool.",
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"attributes": {
|
||||
"heading": {
|
||||
"type": "string"
|
||||
},
|
||||
"buttonText": {
|
||||
"type": "string",
|
||||
"default": "Learn More"
|
||||
},
|
||||
"buttonLink": {
|
||||
"type": "string"
|
||||
},
|
||||
"backgroundImage": {
|
||||
"type": "integer"
|
||||
}
|
||||
},
|
||||
"textdomain": "double-image",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"render": "file:./render.php"
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
/*!*************************************************************************************************************************************************************************************************************************************************************!*\
|
||||
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/featured-image-block/editor.scss ***!
|
||||
\*************************************************************************************************************************************************************************************************************************************************************/
|
||||
/**
|
||||
* The following styles get applied inside the editor only.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
@@ -0,0 +1 @@
|
||||
<?php return array('dependencies' => array('react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-date', 'wp-deprecated', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-primitives', 'wp-rich-text', 'wp-url'), 'version' => '239178da82c0d8063b17');
|
||||
@@ -0,0 +1,10 @@
|
||||
/*!*************************************************************************************************************************************************************************************************************************************************************!*\
|
||||
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/featured-image-block/editor.scss ***!
|
||||
\*************************************************************************************************************************************************************************************************************************************************************/
|
||||
/**
|
||||
* The following styles get applied inside the editor only.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
/*# sourceMappingURL=index.css.map*/
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"featured-image-block/index.css","mappings":";;;AAAA;;;;EAAA,C","sources":["webpack://featured-image-block/./src/featured-image-block/editor.scss"],"sourcesContent":["/**\n * The following styles get applied inside the editor only.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n\n"],"names":[],"sourceRoot":""}
|
||||
42714
src/blocks/featured-image-block/build/featured-image-block/index.js
Normal file
42714
src/blocks/featured-image-block/build/featured-image-block/index.js
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,28 @@
|
||||
<?php
|
||||
/**
|
||||
* Block render callback.
|
||||
*
|
||||
* @param array $attributes The block attributes.
|
||||
* @param string $content The block content.
|
||||
* @param WP_Block $block The block object.
|
||||
*
|
||||
* @package wpdev
|
||||
*/
|
||||
?>
|
||||
|
||||
<div <?php echo get_block_wrapper_attributes(); ?>
|
||||
style="background-image: url(<?php echo wp_get_attachment_image_url($attributes['backgroundImage']); ?>"
|
||||
tabindex="0">
|
||||
|
||||
<div class="call-to-action">
|
||||
<?php
|
||||
if (isset($attributes['heading']) && $attributes['heading']) {
|
||||
echo "<h2>";
|
||||
echo esc_html($attributes['heading']);
|
||||
echo "</h2>";
|
||||
}
|
||||
?>
|
||||
|
||||
<a href="<?php echo esc_html($attributes['buttonLink']); ?>" class="btn btn-primary btn-lg"><?php echo esc_html($attributes['buttonText']); ?></a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,32 @@
|
||||
/*!************************************************************************************************************************************************************************************************************************************************************!*\
|
||||
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/featured-image-block/style.scss ***!
|
||||
\************************************************************************************************************************************************************************************************************************************************************/
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
body:not(.wp-admin) .wp-block-create-block-featured-image-block {
|
||||
background-repeat: no-repeat;
|
||||
width: auto;
|
||||
height: 600px;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
body:not(.wp-admin) .wp-block-create-block-featured-image-block .call-to-action {
|
||||
margin-right: 2em;
|
||||
margin-left: 2em;
|
||||
background-color: white;
|
||||
padding: 1em;
|
||||
}
|
||||
body:not(.wp-admin) .wp-block-create-block-featured-image-block h2 {
|
||||
font-size: 40px;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.wp-block-create-block-featured-image-block img,
|
||||
.wp-block-create-block-featured-image-block .call-to-action {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
/*!************************************************************************************************************************************************************************************************************************************************************!*\
|
||||
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/featured-image-block/style.scss ***!
|
||||
\************************************************************************************************************************************************************************************************************************************************************/
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
body:not(.wp-admin) .wp-block-create-block-featured-image-block {
|
||||
background-repeat: no-repeat;
|
||||
width: auto;
|
||||
height: 600px;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
body:not(.wp-admin) .wp-block-create-block-featured-image-block .call-to-action {
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
background-color: white;
|
||||
padding: 1em;
|
||||
}
|
||||
body:not(.wp-admin) .wp-block-create-block-featured-image-block h2 {
|
||||
font-size: 40px;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.wp-block-create-block-featured-image-block img,
|
||||
.wp-block-create-block-featured-image-block .call-to-action {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=style-index.css.map*/
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"featured-image-block/style-index.css","mappings":";;;AAAA;;;;;EAAA;AAMC;EACA;EACA;EACA;EACA;EACA;EACA;AACD;AACC;EACC;EACA;EACA;EACA;AACF;AAEC;EACC;EACA;AAAF;;AAIA;;EAEC;AADD,C","sources":["webpack://featured-image-block/./src/featured-image-block/style.scss"],"sourcesContent":["/**\n * The following styles get applied both on the front of your site\n * and in the editor.\n *\n * Replace them with your own styles or remove the file completely.\n */\n body:not(.wp-admin) .wp-block-create-block-featured-image-block {\n\tbackground-repeat: no-repeat;\n\twidth: auto;\n\theight: 600px;\n\tdisplay: flex;\n\tjustify-content: end;\n\talign-items: center;\n\n\t.call-to-action {\n\t\tmargin-left: 2em;\n\t\tmargin-right: 2em;\n\t\tbackground-color: white;\n\t\tpadding: 1em;\n\t}\n\n\th2 {\n\t\tfont-size: 40px;\n\t\tmargin-bottom: .5em;\n\t}\n}\n\n.wp-block-create-block-featured-image-block img,\n.wp-block-create-block-featured-image-block .call-to-action {\n\tmargin-bottom: 0.5em;\n}\n\n"],"names":[],"sourceRoot":""}
|
||||
30
src/blocks/featured-image-block/featured-image-block.php
Normal file
30
src/blocks/featured-image-block/featured-image-block.php
Normal file
@@ -0,0 +1,30 @@
|
||||
<?php
|
||||
/**
|
||||
* Plugin Name: Featured Image Block
|
||||
* Description: Example block scaffolded with Create Block tool.
|
||||
* Version: 0.1.0
|
||||
* Requires at least: 6.7
|
||||
* Requires PHP: 7.4
|
||||
* Author: The WordPress Contributors
|
||||
* License: GPL-2.0-or-later
|
||||
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
* Text Domain: featured-image-block
|
||||
*
|
||||
* @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_featured_image_block_block_init() {
|
||||
register_block_type( __DIR__ . '/build/featured-image-block' );
|
||||
}
|
||||
add_action( 'init', 'create_block_featured_image_block_block_init' );
|
||||
23
src/blocks/featured-image-block/package.json
Normal file
23
src/blocks/featured-image-block/package.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "featured-image-block",
|
||||
"version": "0.1.0",
|
||||
"description": "Block displaying featured image, heading and button..",
|
||||
"author": "The WordPress Contributors",
|
||||
"license": "GPL-2.0-or-later",
|
||||
"main": "build/index.js",
|
||||
"scripts": {
|
||||
"build": "wp-scripts build --webpack-copy-php",
|
||||
"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 --webpack-copy-php"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@wordpress/scripts": "^30.11.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@10up/block-components": "^1.20.0"
|
||||
}
|
||||
}
|
||||
55
src/blocks/featured-image-block/readme.txt
Normal file
55
src/blocks/featured-image-block/readme.txt
Normal file
@@ -0,0 +1,55 @@
|
||||
=== Featured Image Block ===
|
||||
Contributors: The WordPress Contributors
|
||||
Tags: block
|
||||
Tested up to: 6.7
|
||||
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/featured-image-block` 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.
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 2,
|
||||
"name": "create-block/featured-image-block",
|
||||
"version": "0.1.0",
|
||||
"title": "Featured Image Block",
|
||||
"category": "widgets",
|
||||
"icon": "format-image",
|
||||
"description": "Block displaying featured image, heading and button.",
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"attributes": {
|
||||
"heading": {
|
||||
"type": "string"
|
||||
},
|
||||
"buttonText": {
|
||||
"type": "string",
|
||||
"default": "Learn More"
|
||||
},
|
||||
"buttonLink": {
|
||||
"type": "string"
|
||||
},
|
||||
"backgroundImage": {
|
||||
"type": "integer"
|
||||
}
|
||||
},
|
||||
"textdomain": "double-image",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"render": "file:./render.php"
|
||||
}
|
||||
148
src/blocks/featured-image-block/src/featured-image-block/edit.js
Normal file
148
src/blocks/featured-image-block/src/featured-image-block/edit.js
Normal file
@@ -0,0 +1,148 @@
|
||||
/**
|
||||
* 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, InspectorControls, BlockControls } from '@wordpress/block-editor';
|
||||
import { Panel, PanelBody, PanelRow, TextControl, Button } from '@wordpress/components';
|
||||
|
||||
import { MediaToolbar, Image } from '@10up/block-components';
|
||||
|
||||
/**
|
||||
* 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(props) {
|
||||
const { attributes, setAttributes } = props;
|
||||
const { heading, backgroundImage, buttonText, buttonLink } = attributes;
|
||||
|
||||
const handleBackgroundImageSelect = (image) => {
|
||||
setAttributes({
|
||||
backgroundImage: image.id,
|
||||
});
|
||||
};
|
||||
|
||||
const handleBackgroundImageRemove = () => {
|
||||
setAttributes({
|
||||
backgroundImage: null,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div { ...useBlockProps() }>
|
||||
|
||||
|
||||
<div class="call-to-action">
|
||||
<h2>{heading}</h2>
|
||||
<a href={buttonLink} class="btn btn-primary btn-lg">{buttonText}</a>
|
||||
</div>
|
||||
|
||||
<InspectorControls>
|
||||
<Panel>
|
||||
<PanelBody title={ __( 'Background Image Settings', 'featured-image-block' ) }>
|
||||
<PanelRow>
|
||||
<Image
|
||||
id={backgroundImage}
|
||||
className="my-image"
|
||||
size="full"
|
||||
onSelect={handleBackgroundImageSelect}
|
||||
labels={{
|
||||
title: 'Select Background Image',
|
||||
instructions: 'Upload a media file or pick one from your media library.'
|
||||
}}
|
||||
/>
|
||||
</PanelRow>
|
||||
<PanelRow>
|
||||
<Button isDestructive variant="link" onClick={handleBackgroundImageRemove}>Remove Background Image</Button>
|
||||
</PanelRow>
|
||||
<PanelRow>
|
||||
<TextControl
|
||||
__nextHasNoMarginBottom
|
||||
__next40pxDefaultSize
|
||||
label={ __(
|
||||
'Heading',
|
||||
'featured-image-block'
|
||||
) }
|
||||
value={ heading || '' }
|
||||
onChange={ ( value ) =>
|
||||
setAttributes( { heading: value } )
|
||||
}
|
||||
/>
|
||||
</PanelRow>
|
||||
<PanelRow>
|
||||
<TextControl
|
||||
__nextHasNoMarginBottom
|
||||
__next40pxDefaultSize
|
||||
label={ __(
|
||||
'Button Link',
|
||||
'featured-image-block'
|
||||
) }
|
||||
value={ buttonLink || '' }
|
||||
onChange={ ( value ) =>
|
||||
setAttributes( { buttonLink: value } )
|
||||
}
|
||||
/>
|
||||
</PanelRow>
|
||||
<PanelRow>
|
||||
<TextControl
|
||||
__nextHasNoMarginBottom
|
||||
__next40pxDefaultSize
|
||||
label={ __(
|
||||
'Button Text',
|
||||
'featured-image-block'
|
||||
) }
|
||||
value={ buttonText || '' }
|
||||
onChange={ ( value ) =>
|
||||
setAttributes( { buttonText: value } )
|
||||
}
|
||||
/>
|
||||
</PanelRow>
|
||||
</PanelBody>
|
||||
</Panel>
|
||||
</InspectorControls>
|
||||
|
||||
|
||||
<BlockControls>
|
||||
<MediaToolbar
|
||||
isOptional
|
||||
id={ backgroundImage }
|
||||
onSelect={ handleBackgroundImageSelect }
|
||||
onRemove={ handleBackgroundImageRemove }
|
||||
/>
|
||||
</BlockControls>
|
||||
|
||||
|
||||
<Image
|
||||
id={backgroundImage}
|
||||
className="my-image"
|
||||
size="full"
|
||||
onSelect={handleBackgroundImageSelect}
|
||||
labels={{
|
||||
title: 'Select Background Image',
|
||||
instructions: 'Upload a media file or pick one from your media library.'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* The following styles get applied inside the editor only.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
/**
|
||||
* 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 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,
|
||||
} );
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
<?php
|
||||
/**
|
||||
* Block render callback.
|
||||
*
|
||||
* @param array $attributes The block attributes.
|
||||
* @param string $content The block content.
|
||||
* @param WP_Block $block The block object.
|
||||
*
|
||||
* @package wpdev
|
||||
*/
|
||||
?>
|
||||
|
||||
<div <?php echo get_block_wrapper_attributes(); ?>
|
||||
style="background-image: url(<?php echo wp_get_attachment_image_url($attributes['backgroundImage']); ?>"
|
||||
tabindex="0">
|
||||
|
||||
<div class="call-to-action">
|
||||
<?php
|
||||
if (isset($attributes['heading']) && $attributes['heading']) {
|
||||
echo "<h2>";
|
||||
echo esc_html($attributes['heading']);
|
||||
echo "</h2>";
|
||||
}
|
||||
?>
|
||||
|
||||
<a href="<?php echo esc_html($attributes['buttonLink']); ?>" class="btn btn-primary btn-lg"><?php echo esc_html($attributes['buttonText']); ?></a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
body:not(.wp-admin) .wp-block-create-block-featured-image-block {
|
||||
background-repeat: no-repeat;
|
||||
width: auto;
|
||||
height: 600px;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
|
||||
.call-to-action {
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
background-color: white;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-create-block-featured-image-block img,
|
||||
.wp-block-create-block-featured-image-block .call-to-action {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
@@ -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-featured-image-block block)' );
|
||||
/* eslint-enable no-console */
|
||||
Reference in New Issue
Block a user