Skip to content

Instantly share code, notes, and snippets.

View imranhsayed's full-sized avatar
🖥️
Coding

Imran Sayed imranhsayed

🖥️
Coding
2.1k followers · 9 following
View GitHub Profile
@imranhsayed
imranhsayed / About.js
Last active March 29, 2019 11:11
Demo for Code Splitting
import React from 'react';
class About extends React.Component {
render() {
return(
<div>This is About Component</div>
);
}
}
@imranhsayed
imranhsayed / App.js
Created March 29, 2019 11:13
Demo for Code Splitting
import React from 'react';
import { Router, Link } from "@reach/router"
import Loadable from 'react-loadable';
const LoadableAbout = Loadable({
loader: () => import( './components/About' ),
loading() {
return <h1>Loading split out code...</h1>
}
});
@imranhsayed
imranhsayed / index.js
Last active April 1, 2019 05:36
// src/index.js
const { registerBlockType } = wp.blocks;
registerBlockType( 'myguten-block/test-block', {
title: 'Basic Example',
icon: 'smiley',
category: 'layout',
edit: ( { className } ) => <div className={ className }>Hello World!</div>,
save: () => <div>Hello World!</div>,
} );
@imranhsayed
imranhsayed / myguten-block.php
Last active April 1, 2019 05:36
<?php
/*
Plugin Name: My Gutenberg Block
*/
function my_custom_block_register_block() {
// Register JavasScript File build/index.js
wp_register_script(
'my-custom-block',
plugins_url( 'build/index.js', __FILE__ ),
@imranhsayed
imranhsayed / index.js
Last active April 3, 2019 09:02
BlockControl and AlignmentToolBar with ReactText Component
const { registerBlockType } = wp.blocks;
const { RichText, BlockControls, AlignmentToolbar } = wp.editor;
registerBlockType( 'myguten-block/test-block', {
title: 'Basic Example',
icon: 'smiley',
category: 'layout',
attributes: {
content: {
type: 'array',
@imranhsayed
imranhsayed / index.js
Created April 3, 2019 09:03
InspectorControl and ColorPallete along with BlockControls
const { registerBlockType } = wp.blocks;
const { RichText, BlockControls, AlignmentToolbar,
InspectorControls, ColorPalette } = wp.editor;
registerBlockType( 'myguten-block/test-block', {
title: 'Basic Example',
icon: 'smiley',
category: 'layout',
attributes: {
content: {
@imranhsayed
imranhsayed / index.js
Last active April 4, 2019 10:32
InspectControl & ColorPalette
const { registerBlockType } = wp.blocks;
const { RichText, BlockControls, AlignmentToolbar,
InspectorControls, ColorPalette } = wp.editor;
const result = registerBlockType( 'myguten-block/test-block', {
title: 'Basic Example',
icon: 'smiley',
category: 'layout',
attributes: {
content: {
@imranhsayed
imranhsayed / index.js
Created April 4, 2019 19:05
RichText Component
const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;
const result = registerBlockType( 'myguten-block/test-block', {
title: 'Basic Example',
icon: 'smiley',
category: 'layout',
attributes: {
content: {
type: 'array',
@imranhsayed
imranhsayed / index.html
Created April 11, 2019 16:43
JS Bin // source https://jsbin.com/mesuqel
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
@imranhsayed
imranhsayed / React-ES5
Created July 27, 2019 17:29
function save( props ) {
return wp.element.createElement(
'div',
{
id: props.attributes.id
},
props.attributes.content
);
}