first commit after npx @wordpress/create-block@latest
This commit is contained in:
commit
e4ed3d3dcb
|
|
@ -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
|
||||
|
|
@ -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,60 @@
|
|||
```
|
||||
vdv@lorelei:~$ npx @wordpress/create-block@latest
|
||||
|
||||
Let's customize your WordPress plugin with blocks:
|
||||
✔ The template variant to use for this block: dynamic
|
||||
✔ The block slug used for identification (also the output folder name): wp-printable-qrcode
|
||||
✔ The internal namespace for the block name (something unique for your products): wppqr
|
||||
✔ The display title for your block: Printable QR code
|
||||
✔ The short description for your block (optional): Print a QR code to the web view
|
||||
✔ The dashicon to make it easier to identify your block (optional): smiley
|
||||
✔ The category name to help users browse and discover your block: widgets
|
||||
✔ Do you want to customize the WordPress plugin? No
|
||||
|
||||
Creating a new WordPress plugin in the /home/vdv/wp-printable-qrcode directory.
|
||||
|
||||
Creating a "block.json" file.
|
||||
|
||||
Creating a "package.json" file.
|
||||
|
||||
Installing `@wordpress/scripts` package. It might take a couple of minutes...
|
||||
|
||||
Formatting JavaScript files.
|
||||
|
||||
Compiling block and generating blocks manifest.
|
||||
|
||||
Done: WordPress plugin Printable QR code bootstrapped in the /home/vdv/wp-printable-qrcode directory.
|
||||
|
||||
You can run several commands inside:
|
||||
|
||||
$ npm start
|
||||
Starts the build for development.
|
||||
|
||||
$ npm run build
|
||||
Builds the code for production.
|
||||
|
||||
$ npm run format
|
||||
Formats files.
|
||||
|
||||
$ npm run lint:css
|
||||
Lints CSS files.
|
||||
|
||||
$ npm run lint:js
|
||||
Lints JavaScript files.
|
||||
|
||||
$ npm run plugin-zip
|
||||
Creates a zip file for a WordPress plugin.
|
||||
|
||||
$ npm run packages-update
|
||||
Updates WordPress packages to the latest version.
|
||||
|
||||
To enter the directory type:
|
||||
|
||||
$ cd wp-printable-qrcode
|
||||
|
||||
You can start development with:
|
||||
|
||||
$ npm start
|
||||
|
||||
Code is Poetry
|
||||
```
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<?php
|
||||
// This file is generated. Do not modify it manually.
|
||||
return array(
|
||||
'wp-printable-qrcode' => array(
|
||||
'$schema' => 'https://schemas.wp.org/trunk/block.json',
|
||||
'apiVersion' => 3,
|
||||
'name' => 'wppqr/wp-printable-qrcode',
|
||||
'version' => '0.1.0',
|
||||
'title' => 'Printable QR code',
|
||||
'category' => 'widgets',
|
||||
'icon' => 'smiley',
|
||||
'description' => 'Print a QR code to the web view',
|
||||
'example' => array(
|
||||
|
||||
),
|
||||
'supports' => array(
|
||||
'html' => false
|
||||
),
|
||||
'textdomain' => 'wp-printable-qrcode',
|
||||
'editorScript' => 'file:./index.js',
|
||||
'editorStyle' => 'file:./index.css',
|
||||
'style' => 'file:./style-index.css',
|
||||
'render' => 'file:./render.php',
|
||||
'viewScript' => 'file:./view.js'
|
||||
)
|
||||
);
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "wppqr/wp-printable-qrcode",
|
||||
"version": "0.1.0",
|
||||
"title": "Printable QR code",
|
||||
"category": "widgets",
|
||||
"icon": "smiley",
|
||||
"description": "Print a QR code to the web view",
|
||||
"example": {},
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"textdomain": "wp-printable-qrcode",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"render": "file:./render.php",
|
||||
"viewScript": "file:./view.js"
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
.wp-block-wppqr-wp-printable-qrcode{border:1px dotted red}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-i18n'), 'version' => 'c9aefbfb813ae2ba43ca');
|
||||
|
|
@ -0,0 +1 @@
|
|||
.wp-block-wppqr-wp-printable-qrcode{border:1px dotted red}
|
||||
|
|
@ -0,0 +1 @@
|
|||
(()=>{"use strict";var r,e={247:()=>{const r=window.wp.blocks,e=window.wp.i18n,o=window.wp.blockEditor,i=window.ReactJSXRuntime,n=JSON.parse('{"UU":"wppqr/wp-printable-qrcode"}');(0,r.registerBlockType)(n.UU,{edit:function(){return(0,i.jsx)("p",{...(0,o.useBlockProps)(),children:(0,e.__)("Printable QR code – hello from the editor!","wp-printable-qrcode")})}})}},o={};function i(r){var n=o[r];if(void 0!==n)return n.exports;var t=o[r]={exports:{}};return e[r](t,t.exports,i),t.exports}i.m=e,r=[],i.O=(e,o,n,t)=>{if(!o){var p=1/0;for(s=0;s<r.length;s++){for(var[o,n,t]=r[s],l=!0,a=0;a<o.length;a++)(!1&t||p>=t)&&Object.keys(i.O).every((r=>i.O[r](o[a])))?o.splice(a--,1):(l=!1,t<p&&(p=t));if(l){r.splice(s--,1);var c=n();void 0!==c&&(e=c)}}return e}t=t||0;for(var s=r.length;s>0&&r[s-1][2]>t;s--)r[s]=r[s-1];r[s]=[o,n,t]},i.o=(r,e)=>Object.prototype.hasOwnProperty.call(r,e),(()=>{var r={350:0,994:0};i.O.j=e=>0===r[e];var e=(e,o)=>{var n,t,[p,l,a]=o,c=0;if(p.some((e=>0!==r[e]))){for(n in l)i.o(l,n)&&(i.m[n]=l[n]);if(a)var s=a(i)}for(e&&e(o);c<p.length;c++)t=p[c],i.o(r,t)&&r[t]&&r[t][0](),r[t]=0;return i.O(s)},o=globalThis.webpackChunkwp_printable_qrcode=globalThis.webpackChunkwp_printable_qrcode||[];o.forEach(e.bind(null,0)),o.push=e.bind(null,o.push.bind(o))})();var n=i.O(void 0,[994],(()=>i(247)));n=i.O(n)})();
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<?php
|
||||
/**
|
||||
* @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
|
||||
*/
|
||||
?>
|
||||
<p <?php echo get_block_wrapper_attributes(); ?>>
|
||||
<?php esc_html_e( 'Printable QR code – hello from a dynamic block!', 'wp-printable-qrcode' ); ?>
|
||||
</p>
|
||||
|
|
@ -0,0 +1 @@
|
|||
.wp-block-wppqr-wp-printable-qrcode{background-color:#21759b;color:#fff;padding:2px}
|
||||
|
|
@ -0,0 +1 @@
|
|||
.wp-block-wppqr-wp-printable-qrcode{background-color:#21759b;color:#fff;padding:2px}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<?php return array('dependencies' => array(), 'version' => '96b8a0b5a958166fdbb4');
|
||||
|
|
@ -0,0 +1 @@
|
|||
console.log("Hello World! (from wppqr-wp-printable-qrcode block)");
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"name": "wp-printable-qrcode",
|
||||
"version": "0.1.0",
|
||||
"description": "Print a QR code to the web view",
|
||||
"author": "The WordPress Contributors",
|
||||
"license": "GPL-2.0-or-later",
|
||||
"main": "build/index.js",
|
||||
"scripts": {
|
||||
"build": "wp-scripts build --webpack-copy-php --blocks-manifest",
|
||||
"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 --blocks-manifest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@wordpress/scripts": "^30.14.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
=== Printable QR code ===
|
||||
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
|
||||
|
||||
Print a QR code to the web view
|
||||
|
||||
== 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/wp-printable-qrcode` 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,20 @@
|
|||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "wppqr/wp-printable-qrcode",
|
||||
"version": "0.1.0",
|
||||
"title": "Printable QR code",
|
||||
"category": "widgets",
|
||||
"icon": "smiley",
|
||||
"description": "Print a QR code to the web view",
|
||||
"example": {},
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"textdomain": "wp-printable-qrcode",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"render": "file:./render.php",
|
||||
"viewScript": "file:./view.js"
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
/**
|
||||
* 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 } 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 (
|
||||
<p { ...useBlockProps() }>
|
||||
{ __(
|
||||
'Printable QR code – hello from the editor!',
|
||||
'wp-printable-qrcode'
|
||||
) }
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
|
@ -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-wppqr-wp-printable-qrcode {
|
||||
border: 1px dotted #f00;
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
/**
|
||||
* 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,8 @@
|
|||
<?php
|
||||
/**
|
||||
* @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
|
||||
*/
|
||||
?>
|
||||
<p <?php echo get_block_wrapper_attributes(); ?>>
|
||||
<?php esc_html_e( 'Printable QR code – hello from a dynamic block!', 'wp-printable-qrcode' ); ?>
|
||||
</p>
|
||||
|
|
@ -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-wppqr-wp-printable-qrcode {
|
||||
background-color: #21759b;
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
|
|
@ -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 wppqr-wp-printable-qrcode block)' );
|
||||
/* eslint-enable no-console */
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<?php
|
||||
/**
|
||||
* Plugin Name: Printable QR code
|
||||
* Description: Print a QR code to the web view
|
||||
* 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: wp-printable-qrcode
|
||||
*
|
||||
* @package Wppqr
|
||||
*/
|
||||
|
||||
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 wppqr_wp_printable_qrcode_block_init() {
|
||||
if ( function_exists( 'wp_register_block_types_from_metadata_collection' ) ) { // Function introduced in WordPress 6.8.
|
||||
wp_register_block_types_from_metadata_collection( __DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php' );
|
||||
} else {
|
||||
if ( function_exists( 'wp_register_block_metadata_collection' ) ) { // Function introduced in WordPress 6.7.
|
||||
wp_register_block_metadata_collection( __DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php' );
|
||||
}
|
||||
$manifest_data = require __DIR__ . '/build/blocks-manifest.php';
|
||||
foreach ( array_keys( $manifest_data ) as $block_type ) {
|
||||
register_block_type( __DIR__ . "/build/{$block_type}" );
|
||||
}
|
||||
}
|
||||
}
|
||||
add_action( 'init', 'wppqr_wp_printable_qrcode_block_init' );
|
||||
Loading…
Reference in New Issue