Skip to content

Instantly share code, notes, and snippets.

🎯
Focusing

Jeffrey Carandang phpbits

🎯
Focusing
Block or report user

Report or block phpbits

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View style.scss
.entry-content {
.wp-block-custom-block-container {
padding: 30px 50px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
}
View editor.scss
.wp-block[data-type="custom-block/container"] {
> .block-editor-block-list__block-edit {
padding: 30px 50px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
}
View style.scss
@import "./blocks/container/style.scss";
View editor.scss
@import "./blocks/container/editor.scss";
View index.js
/**
* WordPress dependencies
*/
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { InnerBlocks } = wp.blockEditor;
registerBlockType( 'custom-block/container', {
title: __( 'Custom Container' ),
View index.js
/**
* Internal dependencies
*/
import './blocks/container';
View plugin.php
<?php
/**
* Plugin Name: My Custom Block
* Plugin URI: https://github.com/phpbits/my-custom-block
* Description: Custom Gutenberg block for tutorial purposes
* Version: 1.0
* Author: Jeffrey Carandang
* Author URI: https://jeffreycarandang.com/
*
* @category Gutenberg
@phpbits
phpbits / webpack.config.js
Last active Aug 6, 2019
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/
View webpack.config.js
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
phpbits / editorskit.php
Created Aug 2, 2019
Using EditorsKit Utility Classes Filter
View editorskit.php
<?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
phpbits / style.css
Last active Jul 28, 2019
Custom Image Block Style Variations
View style.css
.is-style-circular-image img{
border-radius: 9999px !important;
object-fit: cover;
overflow: hidden;
}
.is-style-rounded-corners img{
border-radius: 0.5em;
overflow: hidden;
}
You can’t perform that action at this time.