Code Monkey home page Code Monkey logo

sb-post-edit-block's Introduction

Post Edit block

banner

Post edit block to allow direct editing of the post

Description

A single block plugin to display a link to edit the post. The link is only displayed to logged in users.

Installation

  1. Upload the plugin files to the /wp-content/plugins/sb-post-edit-block directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the 'Plugins' screen in WordPress

Screenshots

  1. Post edit block and default settings

Upgrade Notice

0.3.2

Update for support for PHP 8.1, 8.2 and 8.3

0.3.1

Tested with Gutenberg 11.4.1

0.3.0

Upgrade for an internationalized version.

0.2.0

Upgrade for text align control and improved color and font settings.

0.1.1

Update for a workaround to Gutenberg issue 33401.

0.1.0

Update for an improved version that's selectable.

0.0.0

First version to replace any [post-edit] shortcodes in FSE themes

Changelog

0.3.2

  • Changed: Support PHP 8.1, 8.2 and 8.3 #6
  • Changed: Updated wp-scripts and rebuild #6
  • Tested: With WordPress 6.4.1 and WordPress Multisite
  • Tested: With Gutenberg 17.1.4
  • Tested: With PHP 8.0, 8.1, 8.2 and 8.3
  • Tested: With PHPUnit 9.6

0.3.1

  • Changed: Ensures default link text of (Edit) is localized #5
  • Changed: Add repository, correct license, update version #5
  • Tested: With WordPress 5.8 and WordPress Multi Site
  • Tested: With Gutenberg 11.4.1
  • Tested: With PHP 8.0

0.3.0

  • Changed: Internationalized #5
  • Tested: With WordPress 5.8 and WordPress Multi Site
  • Tested: With Gutenberg 11.2.1
  • Tested: With PHP 8.0

0.2.0

  • Changed: Change block title to 'Post Edit' #1
  • Changed: Remove unnecessary import of ServerSideRender #1
  • Changed: Disable Text colour control. #3
  • Changed: Don't use get_block_wrapper_attributes for link #3
  • Tested: With Gutenberg 11.1.0
  • Tested: With WordPress 5.8 and WordPress Multi Site

0.1.1

  • Changed: Implement workaround to Gutenberg issue 33401 #2
  • Tested: With Gutenberg 11.0.0
  • Tested: With WordPress 5.8-RC2

0.1.0

  • Added: Add attributes and supports to block.json #1
  • Added: Support Link text field and alignment in the editor #2
  • Changed: Implement SSR rendering to match editor #2
  • Tested: With WordPress 5.7.2 and WordPress Multi Site
  • Tested: With Gutenberg 10.8.0
  • Tested: With PHP 8.0

0.0.0

  • Added: First version of the server side rendered block,#1
  • Tested: With WordPress 5.7.1 and WordPress Multi Site
  • Tested: With Gutenberg 10.6.0-rc.1
  • Tested: With PHP 8.0

sb-post-edit-block's People

Contributors

bobbingwide avatar

Watchers

avatar avatar

sb-post-edit-block's Issues

Post Edit block invisible when using textColor: white and a default gradient

Post Edit block invisible on the front end when using textColor: white and a default gradient.

The following source can lead to the display of an invisible block. The gradient is not being rendered.

<!-- wp:oik-sb/sb-post-edit-block {"textColor":"white","gradient":"vivid-cyan-blue-to-vivid-purple"} /-->

This is strange because the gradient works for the the UK tides block!
Here's an example with the gradient set to Light green cyan to vivid green cyan for the first UK Tides block and the Post Edit block.
image
In the front end gradient is not being applied to the Post Edit block.
image

The generated outer div for the UK tides block is

<div class="has-text-color has-dark-gray-color has-background has-light-green-cyan-to-vivid-green-cyan-gradient-background wp-block-uk-tides-uk-tides has-medium-font-size">
rest of block output goes here
</div>

For the Post Edit block it's

<div class="wp-elements-60fd966435b20 wp-elements-60fd966435afa wp-block-oik-sb-sb-post-edit-block">
rest of block output goes here
</div>

What's the secret to getting Link Colour to appear?

For both the Post Edit block and the UK tides block I want to be able to customize the foreground and background colours for both the text and the link. Getting the Link Colour settings pane to appear is not an easy task.
It appears for Fizzie and ThisIs, both using Gutenberg, but not for other themes.
What's the secret?

Colour settings for the Post Edit block using the ThisIs theme. ( WP 5.7.2 GB 11.0.0 )

image

Colour settings using the Fizzie theme ( WP 5.7.2 GB 11.1.0 )

image

Internationalize and localize the Post Edit block ( `oik-sb/sb-post-edit-block` )

The Post Edit block is registered from block.json but the internationalization and localization doesn't work.
This is a simpler version of the problem reported in bobbingwide/oik#177 (comment)

Requirement

  • Internationalization and localization of the Post Edit block
  • Initially support UK English ( en_UK ) and bboing language ( bb_BB )
  • Check translation works for the JavaScript code that uses __()
  • Check translation works for the strings in block.json

Proposed solution

  1. Build the localized version using
npm run makepot
npm run l10n
npm run makejson
  1. Determine whether or not we need to call wp_set_script_translations. Find out what value for the $handle parameter should be.
/*
 * Localise the script by loading the required strings for the build/index.js file
 * from the locale specific .json file in the languages folder
 */
$ok = wp_set_script_translations( 'sb-chart-block-block-editor', 'sb-chart-block' , $dir .'/languages' );

Create the post-edit block to replace the [post-edit] shortcode

Create the plugin using npx @wordpress/create-block

Let's customize your block:
? The block slug used for identification (also the plugin and output folder name): sb-post-edit-block
? The internal namespace for the block name (something unique for your products): oik-sb
? The display title for your block: Post Edit block
? The short description for your block (optional): Post edit block to allow direct editing of the post
? The dashicon to make it easier to identify your block (optional): edit-page
? The category name to help users browse and discover your block: widgets
? The name of the plugin author (optional). Multiple authors may be listed using commas: bobbingwide
? The short name of the plugin’s license (optional): GPLv3
? A link to the full text of the license (optional): https://www.gnu.org/licenses/gpl-2.0.html
? The current version number of the plugin: 0.0.0

Creating a new WordPress block in "sb-post-edit-block" folder.

Editor crashes when Post edit block selected with other blocks

When I was attempting Call #7: Polished portfolios I experienced the Editor crashing.

I documented this at https://sneak-peek.me/2021/06/11/call-7-polished-portfolios/

The problem occurs when the Post Edit block is selected as part of multiple block selection.

3 blocks selected
image

Attempting to select the Post Edit block leads to
image

The error is

TypeError: Cannot read property 'lastChild' of null
    at np (https://sneak-peek.me/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=88d0ba7a6e6f356fbb72073b72436b2a:81:22824)
    at https://sneak-peek.me/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=88d0ba7a6e6f356fbb72073b72436b2a:81:23828
    at Bh (https://sneak-peek.me/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:126:456)
    at Dj (https://sneak-peek.me/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:162:476)
    at unstable_runWithPriority (https://sneak-peek.me/wp-content/plugins/gutenberg/vendor/react.min.e713ea3b.js:25:260)
    at Da (https://sneak-peek.me/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:60:280)
    at xb (https://sneak-peek.me/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:162:231)
    at Te (https://sneak-peek.me/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:146:79)
    at https://sneak-peek.me/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:61:68
    at unstable_runWithPriority (https://sneak-peek.me/wp-content/plugins/gutenberg/vendor/react.min.e713ea3b.js:25:260)

Note: The Post edit block is almost impossible to select in the block editor anyway.
So something needs to be changed. Maybe whatever's necessary to make the block selectable will solve the problem.
Perhaps just allowing the user to define the (Edit) string will be enough.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.