Giter VIP home page Giter VIP logo

sixach / wp-block-container Goto Github PK

View Code? Open in Web Editor NEW
0.0 0.0 0.0 14.4 MB

A fully customizable wrapper block to group other blocks together. Create more sophisticated designs with more space, colors, gradients, background images, videos and much more.

Home Page: https://sixach.github.io/wp-block-container/

License: GNU General Public License v3.0

JavaScript 83.75% PHP 10.08% SCSS 6.03% Shell 0.13%
block

wp-block-container's People

Contributors

adrianfiroiu avatar gooklani avatar kuserich avatar mahdiyazdani avatar renovate-bot avatar renovate[bot] avatar

Watchers

 avatar  avatar

wp-block-container's Issues

Height Option

In addition to the width in pixels, add an option to the inspector to define a Height in pixels.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

  • Update wordpress monorepo (@wordpress/blocks, @wordpress/compose, @wordpress/element, @wordpress/hooks, @wordpress/i18n)
  • Lock file maintenance

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions
.github/workflows/linting.yml
  • actions/checkout v3
  • actions/cache v3
  • actions/checkout v3
  • actions/cache v3
  • actions/checkout v3
  • actions/cache v3
.github/workflows/php-coding-standards.yml
  • actions/checkout v3
  • actions/cache v3
  • shivammathur/setup-php v2
npm
package.json
  • @sixa/icon-library 1.3.1
  • @sixa/wp-block-components 1.14.1
  • @sixa/wp-block-utils 1.2.0
  • @sixa/wp-react-hooks 1.14.0
  • @sixa/wp-style-utils 1.6.0
  • @wordpress/block-editor 8.6.0
  • @wordpress/blocks 11.17.0
  • @wordpress/components 19.17.0
  • @wordpress/compose 5.16.0
  • @wordpress/data 6.15.0
  • @wordpress/element 4.16.0
  • @wordpress/hooks 3.18.0
  • @wordpress/i18n 4.18.0
  • classnames 2.3.2
  • lodash 4.17.21
  • prop-types 15.8.1
  • @emotion/babel-plugin-jsx-pragmatic 0.2.0
  • @emotion/babel-preset-css-prop 11.10.0
  • @emotion/react 11.10.4
  • @sixa/wp-scripts 1.0.0
  • @wordpress/scripts 22.5.0
  • lint-staged 12.5.0
  • prettier 2.6.2

  • Check this box to trigger a request for Renovate to run again on this repository

Content positioning not working for some configurations

It seems that the content position is not applied for some of the configurations and the content is thus positioned incorrectly.
I have first noticed this issue after #26 but it seems to be related to the attributes rather than the styling.

Screenshot 2021-07-26 at 19 59 54

Screen.Recording.2021-10-04.at.10.35.51.mov

(Using Twenty Twenty-One)

Enable toggle for background overlay

Currently it is not possible to disable the overlay when a background image is added. The overlay can only be "hidden" by reducing opacity to 0. I propose to extend the Inspector and to add more flexibility in the configuration of the background overlay:

Enable / Disable overlay
Configure Overlay in addition to background color (i.e. separate these two options)

Experiment with different position settings

The goal is to have more options when defining the position of a background image. Particularly with different units (px) and relative to different elements in the page (e.g. right or center instead of left).

  • Toggle "align from center"
  • Additional units in FocalPointPicker
  • Reference selection in UnitControls in FocalPointPicker (e.g. right, center, left instead of just left)

Extend documentation

  1. Showcase some of the features of the block like background-color, gradient, and background-image with a few examples. Particularly, highlight the flexibility in use and output of these features
  2. Showcase some useful extensions for this block like box-shadow, spacing, and border with a few examples

Experiment with Overlay & Gradient Separation

Configure Overlay in addition to background color and separate these two options.

It might be better to include a change like this as an extension to the block rather than including this functionality in the base block.

Background size `cover` not working

It seems that the background size option cover does not work. Similarly, when selecting contain, the block still includes class has-background-size-auto, which I believe should be removed.

Screenshot 2021-10-04 at 10 24 25

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.