Skip to content

Instantly share code, notes, and snippets.

View phpbits's full-sized avatar
🎯
Focusing

Jeffrey Carandang phpbits

🎯
Focusing
View GitHub Profile
import { select } from '@wordpress/data';
import { addFilter } from '@wordpress/hooks';
/**
* Component to disable dimension settings based on block context.
*
* @param {Object} settings - The block settings object.
* @param {string} settingsName - The name of the settings being modified.
* @param {string} clientId - The block id.
* @param {string} blockName - The block name.
@phpbits
phpbits / disable-blocks.php
Last active October 24, 2023 10:51
How to Disable Specific Blocks in the WordPress Gutenberg Block Editor using the allowed_block_types_all Hook
<?php
function disable_specific_blocks( $allowed_block_types, $post ) {
// Make sure allowed types is an array
if ( ! is_array( $allowed_block_types ) ) {
$allowed_block_types = array(
'core/block', // Required to enable "Reusable blocks" feature.
'core/columns',
'core/paragraph',
'core/image',
'core/heading',
/**
* Add Custom Block Control to Existing Block
*/
import Controls from './controls';
const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;
const allowedBlocks = ['core/group']; // Enable control to existing Group block
import Controls from './controls'; // Make sure that the import path is correct
const { registerBlockType } = wp.blocks;
const { useBlockProps } = wp.blockEditor;
registerBlockType('gutenberg-examples/example-block-controls', {
apiVersion: 3,
title: 'Example: Controls',
icon: 'align-full-width',
attributes: {
const { __ } = wp.i18n;
const { BlockControls } = wp.blockEditor;
const { DropdownMenu, MenuGroup, MenuItem, ToolbarGroup } = wp.components;
const Controls = (props) => {
const { attributes, setAttributes } = props;
const { theme } = attributes;
const themes = [
{
<?php
/**
* Render Custom Block
*
* @param array $atts Block Attributes
* @param string $content Block Content (InnerBlocks)
* @param WP_Block $block_class Block Class Instance
* @return string Block Markup
*/
function render( $atts, $content, $block_class ) {
const { __ } = wp.i18n;
const { useSelect } = wp.data;
const { store: blockEditorStore } = wp.blockEditor;
/**
* Block Edit Component
*/
const Edit = (props) => {
const { clientId } = props;
const innerBlocks = useSelect(
@phpbits
phpbits / saveMeta.js
Created June 2, 2023 09:18
Modifying, Editing, and Saving Post Meta Values in the Gutenberg Block Editor: https://jeffreycarandang.com/how-to-enable-read-and-update-post-meta-in-the-wordpress-block-editor-gutenberg/(opens in a new tab)
import { __ } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
import { PanelBody, PanelRow, TextControl } from '@wordpress/components';
import { InspectorControls } from '@wordpress/block-editor';
/**
* My Custom Block
*/
const MyCustomBlock = () => {
const META_KEY = 'custom_post_meta';
import { useSelect } from '@wordpress/data';
/**
* My Custom Block
*/
const MyCustomBlock = () => {
const META_KEY = 'custom_post_meta';
const meta = useSelect((select) =>
select('core/editor').getEditedPostAttribute('meta')
);
@phpbits
phpbits / gist.html
Created November 19, 2019 18:55
CoBlocks Gist Block Demo.
CoBlocks Github Gist Block Demo.