Jeffrey Carandang phpbits

🎯

Focusing

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

phpbits / apply-extra-class.js

Last active April 7, 2021 15:56

Apply custom class to Gutenberg block element. View full tutorials at https://jeffreycarandang.com/extending-gutenberg-core-blocks-with-custom-attributes-and-controls/

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

	/**
	* Add custom element class in save element.
	*
	* @param {Object} extraProps Block element.
	* @param {Object} blockType Blocks object.

phpbits / advanced-settings.js

Last active March 11, 2022 21:07

Add custom toggle control on Gutenberg Advanced Block Panel. View full tutorials at https://jeffreycarandang.com/extending-gutenberg-core-blocks-with-custom-attributes-and-controls/

	/**
	* WordPress Dependencies
	*/
	const { __ } = wp.i18n;
	const { addFilter } = wp.hooks;
	const { Fragment } = wp.element;
	const { InspectorAdvancedControls } = wp.editor;
	const { createHigherOrderComponent } = wp.compose;
	const { ToggleControl } = wp.components;

phpbits / add-attributes.js

Last active May 1, 2019 01:07

Add Custom Attributes to Core Gutenberg Blocks. View full tutorials at https://jeffreycarandang.com/extending-gutenberg-core-blocks-with-custom-attributes-and-controls/

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

	/**
	* Add custom attribute for mobile visibility.
	*
	* @param {Object} settings Settings for the block.
	*

phpbits / apiRequest.js

Created October 3, 2018 06:42

Using wp.apiRequest to access custom endpoints.

	wp.apiRequest( { path: '/phpbits/test-blocks/v1/user-roles/' } )
	.then(
	( obj ) => {
	console.log( obj );
	}
	);

phpbits / Edit.js

Created October 3, 2018 06:38

Access on Edit component using withSelect

	edit: withSelect( ( select ) => {
	return {
	roles: select('phpbits/test-block').receiveUserRoles(),
	};
	} )( props => {
	console.log( this.props.roles );
	});

phpbits / api.js

Created October 3, 2018 06:35

Use withSelect instead of withAPIData

	const { apiFetch } = wp;
	const { registerStore, withSelect } = wp.data;

	const actions = {
	setUserRoles( userRoles ) {
	return {
	type: 'SET_USER_ROLES',
	userRoles,
	};
	},

phpbits / sidebar.php

Created August 30, 2018 08:57

Display Custom Sidebar on Pages only

	<?php if ( is_active_sidebar( 'page-only-custom-sidebar' ) && is_page() ) : ?>
	<aside id="secondary" class="widget-area" role="complementary">
	<?php dynamic_sidebar( 'page-only-custom-sidebar' ); ?>
	</aside>
	<?php endif; ?>

phpbits / custom-sidebar.php

Created August 30, 2018 08:56

Create Custom Sidebar

	<?php
	/*
	* Create Custom Widget Area for Pages Only
	*/
	function page_only_custom_sidebar() {
	register_sidebar(
	array (
	'name' => __( 'For Pages Only', 'your-site' ),
	'id' => 'page-only-custom-sidebar',
	'description' => __( 'Contents to this widget area will be displayed on pages only.', 'your-site' ),

phpbits / style.css

Created September 12, 2017 09:01

Genesis Workstation Pro Widget Styling

phpbits / style.css

Created September 12, 2017 09:00

Digital Pro Custom Footer Background Gradient

	.footer-widgets{
	padding: 0px;
	background: linear-gradient(90deg, #dd3333 50%, #000000 50%);
	}
	.footer-widgets .widget{
	padding: 90px 40px;
	margin: 0px;
	}
	.footer-widgets .widget-title{
	text-transform: uppercase;