studiopress / atomic-blocks Goto Github PK

Hello,

WordPress: 4.9.8
Guttenberg: 4.4.0
Atomic Blocks Theme 1.2.3
Atomic Blocks - Gutenberg Blocks Collection: 1.3.8

The Font Awesome fonts are not loading for some reason. The stylesheet is not being included in the page. Here's my site https://www.ricardtorres.com/

Isn't it because it's commented out in the code?

Thank you

https://github.com/ArrayHQ/atomic-blocks/blob/e369c33c605af032d0f3bef79671bae91e5ddc3c/dist/init.php#L32-L43

For some themes it can be helpful to add a wrapper element, can an option added for this?

Do I really have to overwrite colors and fonts for atomic blocks or is there a way to remove unwanted CSS.

Colors and font-sizes should be defined by the theme and not by a plugin.

I think you're aware of this already as it's similar to issue38

Improvements and additions to the Post Grid block for 1.5.4.

• Number of posts to offset
• Excerpt limit
• Exclude sticky posts
• A11y improvements
• Add post class and ID
• Refactor Inspector code
• Add post/page selector
• Match Genesis markup
• Add Post Grid section title

Once #25 is merged and right before we tag 1.3.7, we need to regenerate the pot file so it includes all the strings.

WP 5.1 automatically adds rel="noopener noreferrer" to all links that have a target attribute. This causes block validation issues.

Reported here: https://wordpress.org/support/topic/whitescreen-an-js-exception-when-editing-site/

WP Trac tickets
https://core.trac.wordpress.org/ticket/46321
https://core.trac.wordpress.org/ticket/46316

When opening the style selection (accordion in sidebar) for the AB Container block,
Gutenberg editor crashes and displays an error popup. Error message:

TypeError: Cannot read property 'innerBlocks' of null
    at t.value ([...]/app/plugins/gutenberg/build/editor/index.js?ver=1550716684:50:144165)
    at commitLifeCycles ([...]/app/plugins/gutenberg/vendor/react-dom.60482cc7.js:16085:22)
    at commitAllLifeCycles ([...]/app/plugins/gutenberg/vendor/react-dom.60482cc7.js:17386:7)
    at HTMLUnknownElement.callCallback ([...]/app/plugins/gutenberg/vendor/react-dom.60482cc7.js:143:14)
    at Object.invokeGuardedCallbackDev ([...]/app/plugins/gutenberg/vendor/react-dom.60482cc7.js:193:16)
    at invokeGuardedCallback ([...]/app/plugins/gutenberg/vendor/react-dom.60482cc7.js:250:31)
    at commitRoot ([...]/app/plugins/gutenberg/vendor/react-dom.60482cc7.js:17582:7)
    at completeRoot ([...]/app/plugins/gutenberg/vendor/react-dom.60482cc7.js:19036:3)
    at performWorkOnRoot ([...]/app/plugins/gutenberg/vendor/react-dom.60482cc7.js:18965:9)
    at performWork ([...]/app/plugins/gutenberg/vendor/react-dom.60482cc7.js:18873:7)

Two styles have been added to the AB Container block by theme (Border and Empty):

wp.domReady( () => {

  wp.blocks.registerBlockStyle( 'atomic-blocks/ab-container', {
    name: 'border',
    label: 'Border',
    isDefault: true,
  } );

  wp.blocks.registerBlockStyle( 'atomic-blocks/ab-container', {
    name: 'empty',
    label: 'Empty',
  } );

} );

How about updating Fontawesome to 5.2.0?

We have a French translation in the plugin folder. I think ideally this would be served from translate.wordpress.org here: https://translate.wordpress.org/projects/wp-plugins/atomic-blocks/stable/fr/default

This doesn't seem to happen every time, and I've been unable to reproduce reliably, but the gist of it is laid out below. I think it could be related to how weird it is to get back into the placeholder field/area once you've removed the title and poking around all the keys is causing something funky under the hood, but I could be way off base. Haven't dug into the code at all.

Removing the title results in the letter F or lowercase f being saved in the title.

Steps to reproduce:

• Add Testimonial block
• Add some text
• Add a name
• Add a title
• Save page
• Edit title and remove it
• Save page

Visually it looks like it was removed, but viewing it on the front end shows an F where the title goes. Editing the page again in the admin will reveal the F. If you try to remove it and save, you'll see it again appears to be removed but on the front end it's still there and if you refresh the admin edit page you'll see it reappear.

Atomic Blocks: 1.3.6
Gutenberg: 4.1.1
WP: 4.9.8

Just an A11y tip/request -

The Post Grid Block pulls the featured image; if alt text is set on the image correctly, the alt text should be describing the image rather than the purpose of the link.

The Alt attribute in this case should be set to alt or alt="" so it's null this removes the image from consideration by assistive technologies, then the post title should be added to the link so assistive technologies can describe the link.

The Read More links need the page title appended to make them unique as well. In the below I added screen reader only span to hide the additional text. Screen reader will now read - whatever "read more text" set by the block, then append "about + page-title" an assistive technology user will be able to select a unique post from all of the posts on the page and hear in my example "Continue reading about hello world"

This is also required to pass google lighthouse audit for accessibility 100%.

if ( isset( $attributes['displayPostLink'] ) && $attributes['displayPostLink'] ) { $list_items_markup .= sprintf( '<p><a class="ab-block-post-grid-link ab-text-link" href="%1$s" rel="bookmark">%2$s <span class="sr-only">about %3$s</span></a></p>', esc_url( get_permalink( $post_id ) ), esc_html( $attributes['readMoreText'] ), esc_html( $title ) ); }

When the Atomic Blocks plugin is activated on one of my sites, any page that's using the AB CTA block can't be edited because the editor page is just a blank white screen. The only change that has happened on this site before I noticed this issue was the update to WP 5.1.

Here's what I see on the editor page (which shows the blank white screen at the top):

I also tried using this block on a test site that is using WP 5.1 and has no other active plugins. Here's what I see when entering a sample title, description, and button text:

And if I click the Resolve button, the suggested fix matches the original content (there are no changes suggested).

Edit to add: I'm using Atomic Blocks 1.5.2 on both sites.

Similar to #24.

Reported on wp.org forums here: https://wordpress.org/support/topic/button-text-bug/

Haven't tried to reproduce yet.

Gutenberg had some quirks with clearing placeholder text. Test to see if those are fixed and update the blocks accordingly.

When I activated plugin on clean install of Wordpress blocks not appear in Gutenberg editor and I can see error in devtools console from blocks.build.js?ver=1542790736:formatted:13012
Uncaught TypeError: Cannot read property 'InspectorControls' of undefined

Gutenberg Version 4.5.1
Atomic Blocks Version 1.3.8
Wordpress Version 4.9.8
nginx/1.4.6 (Ubuntu 14.04)
PHP 7.0.3

Some blocks have color palettes defined in the plugin, which prevents themes from overriding these color palettes. We can safely remove these and have the themes handle the colors.

Hi,
there's a bug in how to compile the stylesheets.

See

https://github.com/ArrayHQ/atomic-blocks/blob/f5ae35323bc86c1e44ee1c3542d81fdd42bb96d2/dist/blocks.style.build.css#L1-L12

and

https://github.com/ArrayHQ/atomic-blocks/blob/f5ae35323bc86c1e44ee1c3542d81fdd42bb96d2/dist/blocks.editor.build.css#L1-L12

As you can see, many CSS rules are repeated 12 times. This is because https://github.com/ArrayHQ/atomic-blocks/blob/master/src/common.scss is prepended to every block's stylesheet.

Cannot redeclare function array_social_icon_footer_script(). Reference: https://github.com/ArrayHQ/atomic-blocks/blob/1.1.5/src/blocks/block-sharing/index.php#L82-L91

Using a AB Container Block and setting the margin-bottom to 0 using the block editor, means you end up with a 1.2em bottom margin.

This is because margin-bottom:0; is not added to the block inline styles and therefore it inherits margin: 0 0 1.2em 0; from the blocks.styles.build.css.

Setting the margin-bottom to 0.5%, for example does add the inline style and overrides this, but if you want 0 it does not work.

Can there be a way to turn off the automatically populated inline-styling (i.e. all the padding, margin, max-width, and background color). It feels like those should only result in inline-styling if the user sets them versus automatically being set by default. This really conflicts with any theme styling and forces the use of !important because no level of specificity will trump inline styling.

User is reporting that social links aren't working in the profile box. https://twitter.com/imactivist/status/1065357198002245632

If you programmatically create or import content, and have some props predefined and you exclude the shareAlignment prop, you'll get a PHP notice on this line.

Example of imported content that will trigger this:
<!-- wp:atomic-blocks/ab-sharing {"google":false} /-->

This may happen with other properties, I haven't tested.

wp.editor.MediaUpload will be removed in 4.2. Use allowedTypes property containing an array with the allowedTypes or do not pass any property if all types are allowed instead.

Some of the settings sliders have changed in appearance after the latest update. https://cl.ly/87e075bdc742

So far, this library has been great! Thanks for all the hard work!
I opened this issue but it might not be an 'issue' and might be more of a question.

Problem

I am trying to style the accordion <summary> element using word press as a headless CMS.

However, when trying to apply specific styles to the <summary> element "text-decoration: underline" it doesn't style the UI even though its in the CSS. This seems like a limitation of the <summary> element.

Solution

A solution to this, would be to make a pull request to add an HTML element between the text and the <summary> element. I see your demo for the accordion has a <p> element inside the <summary> element.

Question How'd that <p> tag get in there?

• Was it from editing the HTML in WordPress for this accordion block? Cause if I do that, I get this validation issue: This block contains unexpected or invalid content. Having raw HTML in WordPress isn't a great solution for this anyways.

Anyways, I am just a little confused how the demo for the accordion has <p> tags inside the <summary> and how I can get that. Preferably without turning my entire accordion into HTML.

The Category select list in the Block settings is not showing all of my categories. It only shows All.

@atomicblocks, @mikemcalister: If the container block can be styled differently by the theme,
what is the correct approach for allowing the user to select a variation of that container block?
Should the theme somehow add a variation selection field to the block controls?
Assigning CSS classes would be not optimal because the user cannot
select from a fixed set and there is no clear captioning or preview possible.

Please add more social icons to the profile block e.g. linkedin.

Hi!

I noticed when playing around with the container block that changing alignment to not be centered causes a validation issue. If I find why, I can make a PR. :)

Using Version 1.4.2 . Here's the error:

Expected:

<div style="background-color:#fff;padding-left:5%;padding-right:5%;padding-bottom:20%;padding-top:20%;margin-top:0%;margin-bottom:0%" class="wp-block-atomic-blocks-ab-container alignundefined aligncenter ab-block-container"><div class="ab-container-inside"><div class="ab-container-image-wrap"><img class="ab-container-image has-background-dim-100 has-background-dim" src="http://antpb.staging.wpengine.com/wp-content/uploads/2018/06/Screenshot-2018-04-05-22.29.08.png" alt=""/></div><div class="ab-container-content" style="max-width:1600px"></div></div></div>

Actual:

<div style="background-color:#fff;padding-left:5%;padding-right:5%;padding-bottom:20%;padding-top:20%;margin-top:0%;margin-bottom:0%" class="wp-block-atomic-blocks-ab-container alignundefined ab-block-container"><div class="ab-container-inside"><div class="ab-container-image-wrap"><img class="ab-container-image has-background-dim-100 has-background-dim" src="http://antpb.staging.wpengine.com/wp-content/uploads/2018/06/Screenshot-2018-04-05-22.29.08.png" alt=""/></div><div class="ab-container-content" style="max-width:1600px"></div></div></div>
(anonymous) @ index.js?ver=1543977903:2

To recreate, install the Twenty Nineteen theme, which is part of the WP 5.0 RC. When adding an Atomic Blocks button to a post or page, it displays the button without an underline on the link. However, when displayed on the front-end, the underline has been added.

Although I can't recreate this in other themes, I'm wondering if this is an Atomic Blocks issue, as I would have thought the plugin's own CSS should ensure consistency across back and front end.

If you believe this is a Twenty Nineteen issue, please let me know and I'll report it to the developers of that theme.

Thanks.

The dismissable notice needs to generate a unique ID for each block so the localStorage knows what notice to close on click. Currently there is a placeholder ID in there.

On the Profile inspector.js When grouping TextControl fields into the PanelBody tag, once you click to open the panel, an error is thrown:

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Temporarily removed the PanelBody tag as a fix, but would like to regroup these into a panel.

Certain link styles, such as for .ab-block-post-grid h2 a:hover are outputting opinionated styles. These should defer to the theme styles.

This is in the pagegridstate branch. Not sure about master at this time.

After creating a page using the profile block, going back to edit it I get this error:

It doesn't affect every block on the page, but if I save the page and the re-edit, more profile blocks get the same error.

The console displays an error message containing the actual and expected output. Here's a diff of the two outputs: https://www.diffchecker.com/0wygDzGZ

It appears the issue relates to white space being added to the content by WP.

If I click "Edit as HTML" I get an unknown error (screenshot). If I click "Convert to Blocks" it changes the content to image and text blocks.

When I activate the plugin it breaks Elementor Pro's "Share Buttons" icons for social services, but not email or others that are not services.

Before the Atomic Blocks plugin:

After activating Atomic Blocks:

To reproduce:

1. Create a page with Elementor Pro "Share Buttons" and confirm they are showing.
2. Install and activate Atomic Blocks

I removed the background color with the clear button and after refreshing I get "This block contains unexpected or invalid content."

It would be great if masonry and imagesloaded javascript frontend files could only be loaded if needed.

The CTA block currently uses static title, text, and button components. These can be replaced with the InnerBlocks component and the content can be migrated to individual blocks within there.

Due to the array short syntax here: https://github.com/ArrayHQ/atomic-blocks/blob/c9a917ad9fda3a87b393c460db92146a977b5d6b/dist/init.php#L102

We should put some kind of PHP version check in here to avoid it, or convert it to array(). I prefer the former because we'll invariably let something like this slip in again since we're using modern PHP in dev, and writing old PHP sucks.

The align… class is missing from the CTA block on the front end after 1.4.22:

Cause seems to be the align class missing from this commit: 4478d03#diff-13e4e64d7ae491ce874522cd5abb55e4L32

Looks like some leftover code from a previous experiment: https://github.com/ArrayHQ/atomic-blocks/blob/f5ae35323bc86c1e44ee1c3542d81fdd42bb96d2/dist/custom-post-types/pricing-tables.php

Some font size classes such as has-large-font-size aren't being resized properly on mobile. See here for reference.

Research the use of the h2 tag in the name in the testimonial block.

So many people use a gravatar to keep their profile pic up to date across all the websites where they have profiles. I would imagine people would appreciate being able to use their gravatar in the profile block so their profile pic in the block matches the one used in, say, their comments ... or their profile in the WP dashboard.

Could be due to deactivating FontAwesome in recent version. https://cl.ly/720421f8f3c5

Right now things aren't ideal for multiple devs working in parallel. Since scripts and styles are always compiled down to a single file, even during dev, it's next to impossible to work in parallel due to merge conflicts.

At a minimum we need to compile individual block scripts and styles to separate files and load those when SCRIPT_DEBUG and/or WP_DEBUG is true. Then we can combine them prior to release using the build tools.

• phpcs
• break out of create-guten-block
• transpile and load block JS/CSS files separately in debug mode
• remove bundled scripts from this repo and only deliver them in releases

As reported here, if you enter an email address in the Email URL field, it gets created as a web URL like site.com/[email protected].

It requires you enter the email in this format to work:
mailto:[email protected]

That's not obvious or terribly friendly. We should look at detecting if a regular email is entered without the mailto prefix, and ensure the link is saved/output appropriately.

I was curious enough to try the atomic blocks plugin since I'm also getting involved in Gutenberg development, but an hour ago when I installed the plugin from wporg's plugin repo it threw me fatal error for missing files, I checked the plugin's trac repo and it turns out your last update has mistakenly removed the dist file folder from the plugin.
I thought you might care and solve it out before any user hits the issue. 😄

Hi there,
I am working on a client project and looking forward for the 5.0 update I already installed Gutenberg and activated your awesome plugin.

I've declared few default colors but I do not see them when I use your blocks, especially the button ones.

There is a way that will let me override your default colours or I have to force the user to use the colour picker?

Thank you in advance,
Andrea