Skip to content

Instantly share code, notes, and snippets.

Avatar
😇
Working actively on @designblocks

Haris Zulfiqar mharis

😇
Working actively on @designblocks
View GitHub Profile
@mharis
mharis / custom-modal-metabox.js
Created Aug 23, 2020 — forked from helgatheviking/custom-modal-metabox.js
Create a completely custom media frame (WIP)
View custom-modal-metabox.js
/**
* @type {Object} JavaScript namespace for our application.
*/
var Custom_Modal = {};
(function($, Custom_Modal) {
var $ = jQuery;
_.extend( Custom_Modal, { view: {}, controller: {} } );
View edit.js
/**
* External dependencies
*/
import root from 'react-shadow';
/**
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
import { ServerSideRender } from '@wordpress/editor';
@mharis
mharis / FontAwesome-v5.0.9-Free.json
Created Jan 9, 2020 — forked from sakalauskas/FontAwesome-v5.0.9-Free.json
List of all Font Awesome 5 icons in JSON Cheetsheet
View FontAwesome-v5.0.9-Free.json
{
"fas fa-address-book","fas fa-address-card","fas fa-adjust","fas fa-align-center","fas fa-align-justify","fas fa-align-left","fas fa-align-right","fas fa-allergies","fas fa-ambulance","fas fa-american-sign-language-interpreting","fas fa-anchor","fas fa-angle-double-down","fas fa-angle-double-left","fas fa-angle-double-right","fas fa-angle-double-up","fas fa-angle-down","fas fa-angle-left","fas fa-angle-right","fas fa-angle-up","fas fa-archive","fas fa-arrow-alt-circle-down","fas fa-arrow-alt-circle-left","fas fa-arrow-alt-circle-right","fas fa-arrow-alt-circle-up","fas fa-arrow-circle-down","fas fa-arrow-circle-left","fas fa-arrow-circle-right","fas fa-arrow-circle-up","fas fa-arrow-down","fas fa-arrow-left","fas fa-arrow-right","fas fa-arrow-up","fas fa-arrows-alt","fas fa-arrows-alt-h","fas fa-arrows-alt-v","fas fa-assistive-listening-systems","fas fa-asterisk","fas fa-at","fas fa-audio-description","fas fa-backward","fas fa-balance-scale","fas fa-ban","fas fa-band-aid","fas fa-barcode","fas fa-bars",
View vanilla-gutenberg-block.js
/**
* Hello World: Step 1
*
* Simple block, renders and saves the same content without interactivity.
*
* Using inline styles - no external stylesheet needed. Not recommended
* because all of these styles will appear in `post_content`.
*/
( function( blocks, i18n, element ) {
var el = element.createElement;
View hooks.php
<?php
/**
* Adds Gutenberg Blocks with ACF.
*
* @return void
*/
function wds_register_acf_gutenberg_blocks() {
if ( function_exists( 'acf_register_block' ) ) {
// Register the hero block.
acf_register_block(array(
View gutenberg.css
.wds-hero {
margin-bottom: 0;
overflow-y: hidden;
position: relative;
z-index: 1;
}
.wds-hero::after {
background-color: rgba(0, 0, 0, 0.5);
content: '';
height: 100%;
View hero.scss
//*!--------------------------------------------------------------
// Gutenberg Hero Block
//--------------------------------------------------------------
$color-black: #000;
$color-white: #fff;
.wds-hero {
margin-bottom: 0;
overflow-y: hidden;
View functions.php
<?php
/**
* Enqueue Gutenberg scripts and styles to backend area.
*/
function wds_gutenberg_assets() {
wp_enqueue_style( 'wds-gutenberg-admin', get_stylesheet_directory_uri() . '/gutenberg.css', array(), '1.0.0' );
}
add_action( 'enqueue_block_assets', 'wds_gutenberg_assets' );
View hero.php
<?php
/**
* The template used for displaying a Hero block.
*
* @package _s
*/
// Set up fields.
$title = get_field( 'title' );
$text = get_field( 'text' );
View esnext-gutenberg-block.js
const { __, setLocaleData } = wp.i18n;
const { registerBlockType } = wp.blocks;
const blockStyle = {
backgroundColor: '#900',
color: '#fff',
padding: '20px',
};
setLocaleData( window.gutenberg_examples_01_esnext.localeData, 'gutenberg-examples' );