autonomic-cooperative/free-palestine-block
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Aadil Ayub
2024-05-02 17:14:51 +05:00
commit cf15b3d815
25 changed files with 19344 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/block.json Normal file
View File

@ -0,0 +1,19 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "free-palestine/free-palestine",
"version": "0.1.0",
"title": "Free Palestine Banner",
"category": "widgets",
"icon": "flag",
"description": "Banner for Palestine solidarity",
"example": {},
"supports": {
"html": false
},
"textdomain": "free-palestine",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"viewScript": "file:./view.js"
}

38
src/edit.js Normal file
View File

@ -0,0 +1,38 @@
/**
* 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 (
<marquee className="free-palestine-banner">
FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE
</marquee>
);
}

9
src/editor.scss Normal file
View 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-free-palestine-free-palestine {
border: 1px dotted #f00;
}

39
src/index.js Normal file
View 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,
} );

24
src/save.js Normal file
View File

@ -0,0 +1,24 @@
/**
* 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';
/**
* 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 {Element} Element to render.
*/
export default function save() {
return (
<marquee className="free-palestine-banner">
FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE ・ FREE PALESTINE ・ END THE OCCUPATION ・ STOP THE GENOCIDE
</marquee>
);
}

17
src/style.scss Normal file
View File

@ -0,0 +1,17 @@
/**
* 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.
*/
@import url('https://fonts.coollabs.io/css2?family=Inter&display=swap');
.free-palestine-banner {
background: #CF0921;
display: block;
font-family: 'Inter';
font-weight: bold;
color: beige;
padding: 1rem;
font-size: 1rem;
}

25
src/view.js Normal file
View File

@ -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 free-palestine-free-palestine block)' );
/* eslint-enable no-console */