Jeffrey Carandang phpbits

🎯

Focusing

I love creating unique, clean, usable code for the web and other digital sources. Senior Web Engineer at @10up.

phpbits / webpack.config.js

Last active October 12, 2022 12:42

Webpack config for `wp-scripts` package with postcss processing to handle css files. Learn more here : https://jeffreycarandang.com/create-gutenberg-block-plugin-wp-scripts-postcss-build/

	const defaultConfig = require( './node_modules/@wordpress/scripts/config/webpack.config.js' );
	const path = require( 'path' );
	const postcssPresetEnv = require( 'postcss-preset-env' );
	const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
	const IgnoreEmitPlugin = require( 'ignore-emit-webpack-plugin' );

	const production = process.env.NODE_ENV === '';

	module.exports = {
	...defaultConfig,

phpbits / editorskit.php

Created August 2, 2019 12:15

Using EditorsKit Utility Classes Filter

	<?php
	/**
	* Add Support for EditorsKit Plugin
	*
	* @package Jarvis
	* @subpackage EditorsKit
	* @author Jeffrey Carandang <jeffreycarandang.com>
	* @link https://editorskit.com/
	* @license http://www.gnu.org/licenses/gpl-2.0.html GNU Public License
	*/

phpbits / style.css

Last active February 5, 2022 09:28

Custom Image Block Style Variations

phpbits / block-styles-es5.js

Last active July 28, 2019 14:05

Create custom image block style variations.

	wp.domReady( () => {

	wp.blocks.registerBlockStyle( 'core/image', {
	name: 'default',
	label: __( 'Default' ),
	isDefault: true,
	} );

	wp.blocks.registerBlockStyle( 'core/image', {
	name: 'circular-image',

phpbits / block-styles.js

Last active April 22, 2021 20:22

Create Custom Image Block Styles

	/**
	* WordPress dependencies
	*/
	const { __ } = wp.i18n;
	const { registerBlockStyle } = wp.blocks;

	registerBlockStyle( 'core/image' , {
	name: 'default',
	label: __( 'Default' ),
	isDefault: true,

phpbits / wp_insert_attachment_from_url.php

Created June 21, 2019 04:38 — forked from m1r0/wp_insert_attachment_from_url.php

WP: Insert attachment from URL

	<?php

	/**
	* Insert an attachment from an URL address.
	*
	* @param String $url
	* @param Int $parent_post_id
	* @return Int Attachment ID
	*/
	function crb_insert_attachment_from_url($url, $parent_post_id = null) {

phpbits / editorskit-genesis-layout-block-sizes.php

Created May 17, 2019 04:39

Change Gutenberg Blocks Width to Match Genesis Layout Selection

	<?php

	//Genesis Framework layout support for blocks width
	add_theme_support('editorskit-genesis-layout-block-sizes', array(
	'content-sidebar' => array(
	'default' => array(
	'post' => '700px',
	'page' => '800px',
	),
	'wide' => '900px',

phpbits / editorskit-template-block-sizes.php

Last active May 17, 2019 04:38

Change Gutenberg Blocks Width to Match Page Template

	<?php

	//add theme support for template blocks width
	add_theme_support('editorskit-template-block-sizes', array(
	'default' => array(
	'default' => '700px',
	'wide' => '1000px',
	'full' => '1200px',
	),
	'page-templates/landing.php' => array(

phpbits / format-underline.js

Last active April 27, 2021 17:45

Create custom Underline rich text format for Gutenberg editor. Learn more at https://jeffreycarandang.com/how-to-create-custom-text-formats-for-gutenberg-block-editor/

	/**
	* WordPress dependencies
	*/
	const { __ } = wp.i18n;
	const { Fragment } = wp.element;
	const { toggleFormat } = wp.richText;
	const { RichTextToolbarButton, RichTextShortcut } = wp.editor;
	const { registerFormatType } = wp.richText;

	/**

phpbits / full-codes.js

Last active July 1, 2022 11:32

Extend core Gutenberg blocks with custom attributes and settings. View full tutorials here : https://jeffreycarandang.com/extending-gutenberg-core-blocks-with-custom-attributes-and-controls/

	/**
	* External Dependencies
	*/
	import classnames from 'classnames';

	/**
	* WordPress Dependencies
	*/
	const { __ } = wp.i18n;
	const { addFilter } = wp.hooks;